diff --git a/create-quasar/templates/app/quasar-v2/js-vite-beta/index.js b/create-quasar/templates/app/quasar-v2/js-vite-beta/index.js index b973276de01..0c8f406e2e0 100644 --- a/create-quasar/templates/app/quasar-v2/js-vite-beta/index.js +++ b/create-quasar/templates/app/quasar-v2/js-vite-beta/index.js @@ -16,7 +16,7 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'vite-plugin-checker (ESLint)', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (vite-plugin-checker + ESLint)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, { title: 'axios', value: 'axios' }, diff --git a/create-quasar/templates/app/quasar-v2/js-vite/index.js b/create-quasar/templates/app/quasar-v2/js-vite/index.js index b973276de01..0c8f406e2e0 100644 --- a/create-quasar/templates/app/quasar-v2/js-vite/index.js +++ b/create-quasar/templates/app/quasar-v2/js-vite/index.js @@ -16,7 +16,7 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'vite-plugin-checker (ESLint)', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (vite-plugin-checker + ESLint)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, { title: 'axios', value: 'axios' }, diff --git a/create-quasar/templates/app/quasar-v2/js-webpack-beta/index.js b/create-quasar/templates/app/quasar-v2/js-webpack-beta/index.js index 00d48577ddb..08236c45cc3 100644 --- a/create-quasar/templates/app/quasar-v2/js-webpack-beta/index.js +++ b/create-quasar/templates/app/quasar-v2/js-webpack-beta/index.js @@ -16,11 +16,11 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'ESLint', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, - { title: 'Axios', value: 'axios' }, - { title: 'Vue-i18n', value: 'i18n' } + { title: 'axios', value: 'axios' }, + { title: 'vue-i18n', value: 'i18n' } ], format: values => { let result = values diff --git a/create-quasar/templates/app/quasar-v2/js-webpack/index.js b/create-quasar/templates/app/quasar-v2/js-webpack/index.js index 00d48577ddb..08236c45cc3 100644 --- a/create-quasar/templates/app/quasar-v2/js-webpack/index.js +++ b/create-quasar/templates/app/quasar-v2/js-webpack/index.js @@ -16,11 +16,11 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'ESLint', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, - { title: 'Axios', value: 'axios' }, - { title: 'Vue-i18n', value: 'i18n' } + { title: 'axios', value: 'axios' }, + { title: 'vue-i18n', value: 'i18n' } ], format: values => { let result = values diff --git a/create-quasar/templates/app/quasar-v2/ts-vite-beta/index.js b/create-quasar/templates/app/quasar-v2/ts-vite-beta/index.js index 28467438d6e..385b15787e8 100644 --- a/create-quasar/templates/app/quasar-v2/ts-vite-beta/index.js +++ b/create-quasar/templates/app/quasar-v2/ts-vite-beta/index.js @@ -28,7 +28,7 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'vite-plugin-checker (ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (vite-plugin-checker + ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, { title: 'axios', value: 'axios' }, diff --git a/create-quasar/templates/app/quasar-v2/ts-vite/index.js b/create-quasar/templates/app/quasar-v2/ts-vite/index.js index 28467438d6e..385b15787e8 100644 --- a/create-quasar/templates/app/quasar-v2/ts-vite/index.js +++ b/create-quasar/templates/app/quasar-v2/ts-vite/index.js @@ -28,7 +28,7 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'vite-plugin-checker (ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (vite-plugin-checker + ESLint + vue-tsc)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, { title: 'axios', value: 'axios' }, diff --git a/create-quasar/templates/app/quasar-v2/ts-webpack-beta/index.js b/create-quasar/templates/app/quasar-v2/ts-webpack-beta/index.js index 740cd23b5a3..6c625bf4b0e 100644 --- a/create-quasar/templates/app/quasar-v2/ts-webpack-beta/index.js +++ b/create-quasar/templates/app/quasar-v2/ts-webpack-beta/index.js @@ -28,11 +28,11 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'ESLint', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, - { title: 'Axios', value: 'axios' }, - { title: 'Vue-i18n', value: 'i18n' } + { title: 'axios', value: 'axios' }, + { title: 'vue-i18n', value: 'i18n' } ], format: values => { let result = values diff --git a/create-quasar/templates/app/quasar-v2/ts-webpack/index.js b/create-quasar/templates/app/quasar-v2/ts-webpack/index.js index 740cd23b5a3..6c625bf4b0e 100644 --- a/create-quasar/templates/app/quasar-v2/ts-webpack/index.js +++ b/create-quasar/templates/app/quasar-v2/ts-webpack/index.js @@ -28,11 +28,11 @@ export async function script ({ scope, utils }) { name: 'preset', message: 'Check the features needed for your project:', choices: [ - { title: 'ESLint', value: 'lint', description: 'recommended', selected: true }, + { title: 'Linting (ESLint)', value: 'lint', description: 'recommended', selected: true }, { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' }, { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' }, - { title: 'Axios', value: 'axios' }, - { title: 'Vue-i18n', value: 'i18n' } + { title: 'axios', value: 'axios' }, + { title: 'vue-i18n', value: 'i18n' } ], format: values => { let result = values diff --git a/docs/src/pages/quasar-cli-vite/handling-vite.md b/docs/src/pages/quasar-cli-vite/handling-vite.md index c24fa769a20..46710d2dcce 100644 --- a/docs/src/pages/quasar-cli-vite/handling-vite.md +++ b/docs/src/pages/quasar-cli-vite/handling-vite.md @@ -9,9 +9,9 @@ The build system uses [Vite](https://vitejs.dev) to create the UI of your websit ## Updating Vite config -You may have noticed that the `vite.config.js`/`vite.config.ts` file does not exist in your Quasar CLI with Vite project. This is because Quasar CLI generates the Vite configuration for you so that you don't have to worry about it. +You may have noticed that the `vite.config.js` / `vite.config.ts` file does not exist in your Quasar CLI with Vite project. This is because Quasar CLI generates the Vite configuration for you so that you don't have to worry about it. -In case you need to tweak it, you can do so through `quasar.config file > build > extendViteConf` like so: +In case you need to tweak it, you can do so through quasar.config file > build > extendViteConf like so: ```js /quasar.config file // use mergeConfig helper to avoid overwriting the default config @@ -66,32 +66,48 @@ $ quasar inspect -h --help, -h Displays this message ``` -## Adding Vite plugins +## Adding Vite plugins Make sure to yarn/npm install the vite plugin package that you want to use, then edit the `/quasar.config` file: -```js +```js /quasar.config file build: { vitePlugins: [ - [ '', { /* plugin options */ } ] + // both are perfectly equivalent: + [ '', { /* plugin options */ } ], + [ '', { /* plugin options */ }, { server: true, client: true } ] + ] +} +``` + +You can disable a plugin on the client-side or the server-side, which is especially useful when developing a SSR app: + +```js /quasar.config file +build: { + vitePlugins: [ + // disable on the server-side: + [ '', { /* plugin options */ }, { server: false } ], + + // disable on the client-side: + [ '', { /* plugin options */ }, { client: false } ] ] } ``` There are multiple syntaxes supported: -```js +```js /quasar.config file vitePlugins: [ - [ '', { /* plugin1 options */ } ], - [ '', { /* plugin2 options */ } ], + [ '', { /* plugin1 options */ }, { server: true, client: true } ], + [ '', { /* plugin2 options */ }, { server: true, client: true } ], // ... ] // or: vitePlugins: [ - [ require(''), { /* plugin1 options */ } ], - [ require(''), { /* plugin2 options */ } ], + [ require(''), { /* plugin1 options */ }, { server: true, client: true } ], + [ require(''), { /* plugin2 options */ }, { server: true, client: true } ], // ... ] diff --git a/docs/src/pages/quasar-cli-vite/linter.md b/docs/src/pages/quasar-cli-vite/linter.md index 19f8b823625..e26f603582d 100644 --- a/docs/src/pages/quasar-cli-vite/linter.md +++ b/docs/src/pages/quasar-cli-vite/linter.md @@ -1,7 +1,8 @@ --- -title: ESLint +title: Linter desc: (@quasar/app-vite) How to configure a code linter in a Quasar app. --- + Having a code linter (like [ESLint](https://eslint.org/)) in place is highly recommended and ensures your code looks legible. It also helps you capture some errors before even running the code. When you scaffold a Quasar project folder it will ask you if you want a linter and which setup you want for ESLint: @@ -18,7 +19,7 @@ Two dot files will be created: Further extension of one of the ESLint setups above can be made. Your project will by default use `eslint-plugin-vue` to handle your Vue files. Take a quick look at `/.eslintrc.cjs` and notice it: -```js +```js /.eslintrc.cjs extends: [ // https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention-for-vue-js-3-x // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. @@ -26,17 +27,16 @@ extends: [ ] ``` -If you chose ESLint when creating your project folder, you'll also notice that the `eslint` key is added to the `/quasar.config` file: +Also note that you need the following file: -```js /quasar.config file -eslint: { - // fix: true, - // include: [], - // exclude: [], - // rawOptions: {}, - warnings: true, - errors: true -}, +```bash /.eslintignore +/dist +/src-capacitor +/src-cordova +/.quasar +/node_modules +.eslintrc.cjs +/quasar.config.*.temporary.compiled* ``` ## Lint Rules @@ -77,7 +77,137 @@ Example of ESLint rules below: } ``` -## Disabling Linter +## Typescript projects linting + +The linting for a TS project is based on vite-plugin-checker + ESLint + vue-tsc: + +```tabs +<<| bash Yarn |>> +$ yarn add --dev vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0 +<<| bash NPM |>> +$ npm install --save-dev vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0 +<<| bash PNPM |>> +$ pnpm add -D vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0 +<<| bash Bun |>> +$ bun add --dev vite-plugin-checker vue-tsc@^1.0.0 typescript@~5.3.0 +``` + +::: warning +Notice the `typescript` dependency is <= 5.3. There is currently an issue with ESLint and newer TS (5.4+). This is only a temporary thing until upstream fixes it. +::: + +Create a file called `tsconfig-vue-tsc.json` in the root of your project folder: + +```json /tsconfig-vue-tsc.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "skipLibCheck": true + } +} +``` + +```js /quasar.config file +build: { + vitePlugins: [ + ['vite-plugin-checker', { + vueTsc: { + tsconfigPath: 'tsconfig-vue-tsc.json' + }, + eslint: { + lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"' + } + }, { server: false }] + ] +} +``` + +## Javascript projects linting + +The linting for a JS project is based on vite-plugin-checker + ESLint: + +```tabs +<<| bash Yarn |>> +$ yarn add --dev vite-plugin-checker +<<| bash NPM |>> +$ npm install --save-dev vite-plugin-checker +<<| bash PNPM |>> +$ pnpm add -D vite-plugin-checker +<<| bash Bun |>> +$ bun add --dev vite-plugin-checker +``` + +```js /quasar.config file +build: { + vitePlugins: [ + ['vite-plugin-checker', { + eslint: { + lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"' + } + }, { server: false }] + ] +} +``` + +## quasar.config file > eslint + +::: warning +The property described below has been deprecated in favour of using vite-plugin-checker. +::: + +If you chose ESLint when creating your project folder, you'll also notice that the `eslint` key is added to the `/quasar.config` file: + +```js /quasar.config file +eslint: { + // fix: true, + // include: [], + // exclude: [], + // rawOptions: {}, + warnings: true, + errors: true +}, +``` + +```js /quasar.config file > eslint +/** Options with which Quasar CLI will use ESLint */ +eslint?: QuasarEslintConfiguration; + +interface QuasarEslintConfiguration { + /** + * Should it report warnings? + * @default true + */ + warnings?: boolean; + + /** + * Should it report errors? + * @default true + */ + errors?: boolean; + + /** + * Fix on save + */ + fix?: boolean; + + /** + * Raw options to send to ESLint + */ + rawOptions?: object; + + /** + * Files to include (can be in glob format) + */ + include?: string[]; + + /** + * Files to exclude (can be in glob format). + * Recommending to use .eslintignore file instead. + */ + exclude?: string[]; +} +``` + In order for you to disable ESLint later, all you need to do is to: 1. Comment out (or remove) the key below: diff --git a/docs/src/pages/quasar-cli-vite/quasar-config-file.md b/docs/src/pages/quasar-cli-vite/quasar-config-file.md index 062aa8aa6bc..84e57d05125 100644 --- a/docs/src/pages/quasar-cli-vite/quasar-config-file.md +++ b/docs/src/pages/quasar-cli-vite/quasar-config-file.md @@ -172,62 +172,20 @@ type QuasarBootConfiguration = (string | BootConfigurationItem)[]; ### preFetch -More on the [PreFetch Feature](/quasar-cli-vite/prefetch-feature). +More on the [PreFetch Feature](/quasar-cli-vite/prefetch-feature) page. ```js /** Enable the preFetch feature. */ preFetch?: boolean; ``` -### eslint +### eslint -Quasar CLI will use [ESLint](https://eslint.org) to lint your code automatically when running `quasar dev` or `quasar build`. - -To use this, you need the linting packages already installed and configured in your project. -If you [scaffolded a Quasar project](/start/quasar-cli#installation-project-scaffolding) and picked "Linting" when prompted, then you already have ESLint configured. -Otherwise, scaffold a new project and pick "Linting" when prompted, then find the linting related differences and apply them to your project. - -If you have ESLint installed and configured in your project, this feature will be enabled by default. You can control the behavior of this feature through the `eslint` property in `/quasar.config` file: - -```js -/** Options with which Quasar CLI will use ESLint */ -eslint?: QuasarEslintConfiguration; - -interface QuasarEslintConfiguration { - /** - * Should it report warnings? - * @default true - */ - warnings?: boolean; - - /** - * Should it report errors? - * @default true - */ - errors?: boolean; - - /** - * Fix on save - */ - fix?: boolean; - - /** - * Raw options to send to ESLint - */ - rawOptions?: object; - - /** - * Files to include (can be in glob format) - */ - include?: string[]; +::: warning +This property has been deprecated in favour of using vite-plugin-checker. +::: - /** - * Files to exclude (can be in glob format). - * Recommending to use .eslintignore file instead. - */ - exclude?: string[]; -} -``` +More on the [Linter](/quasar-cli-vite/linter) page. ### extras @@ -440,9 +398,15 @@ interface BuildTargetOptions { node: string; } +interface PluginEntryRunOptions { + server?: boolean; + client?: boolean; +} + +/* requires @quasar/app-vite 1.8+ */ type PluginEntry = - | [pluginName: string, options?: any] - | [pluginFactory: (options?: any) => Plugin, options?: any] + | [pluginName: string, options?: any, runOptions?: PluginEntryRunOptions] + | [pluginFactory: (options?: any) => Plugin, options?: any, runOptions?: PluginEntryRunOptions] | Plugin | null | undefined diff --git a/docs/src/pages/quasar-cli-vite/upgrade-guide.md b/docs/src/pages/quasar-cli-vite/upgrade-guide.md index 5699551984e..1724e93ad83 100644 --- a/docs/src/pages/quasar-cli-vite/upgrade-guide.md +++ b/docs/src/pages/quasar-cli-vite/upgrade-guide.md @@ -33,7 +33,7 @@ api.compatibleWith( * Typescript detection is based on the quasar.config file being in TS form (quasar.config.ts) and tsconfig.json file presence. * feat+refactor(app-vite): ability to run multiple modes + dev/build simultaneously (huge effort!) * SSR and Electron modes now build in ESM format. -* Dropped support for our internal linting system (quasar.config file > eslint). Should use `vite-plugin-checker` instead. +* Dropped support for our internal linting system (quasar.config file > eslint). Should use [vite-plugin-checker](https://vite-plugin-checker.netlify.app/) instead. * **We will detail more breaking changes for each of the Quasar modes below**. ### Highlights on what's new @@ -181,7 +181,7 @@ Preparations: ### Linting (TS or JS) -We dropped support for our internal linting (quasar.config file > eslint) in favor of the `vite-plugin-checker` package. We will detail below the changes that you need to make based on if you use TS or not. +We dropped support for our internal linting (quasar.config file > eslint) in favor of the [vite-plugin-checker](https://vite-plugin-checker.netlify.app/) package. We will detail below the changes that you need to make based on if you use TS or not. #### Typescript projects linting @@ -233,7 +233,7 @@ Create a new file called `tsconfig-vue-tsc.json` in the root of your project fol + tsconfigPath: 'tsconfig-vue-tsc.json' + }, + eslint: { -+ lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"' ++ lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"' + } + }, { server: false }] ]