Quasar CLI with Webpack - @quasar/app-webpack
Having a code linter (like ESLint v9+) 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 ESLint (also prettier as a code formatter).
Javascript projects
Needed dependencies
$ yarn add --dev @eslint/js eslint@9 eslint-plugin-vue globals eslint-webpack-plugincontent_paste
If you want prettier as a code formatter, then install these too:
$ yarn add --dev prettier@3 @vue/eslint-config-prettiercontent_paste
The quasar.config file settings
return {
eslint: {
// fix: true,
// include: [],
// exclude: [],
// cache: false,
// rawEsbuildEslintOptions: {},
// rawWebpackEslintPluginOptions: {},
warnings: true,
errors: true
}
}content_paste
The ESLint configuration
import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-webpack/eslint'
// the following is optional, if you want prettier too:
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'
export default [
{
/**
* Ignore the following files.
* Please note that pluginQuasar.configs.recommended() already ignores
* the "node_modules" folder for you (and all other Quasar project
* relevant folders and files).
*
* ESLint requires "ignores" key to be the only one in this object
*/
// ignores: []
},
...pluginQuasar.configs.recommended(),
js.configs.recommended,
/**
* https://eslint.vuejs.org
*
* pluginVue.configs.base
* -> Settings and rules to enable correct ESLint parsing.
* pluginVue.configs[ 'flat/essential']
* -> base, plus rules to prevent errors or unintended behavior.
* pluginVue.configs["flat/strongly-recommended"]
* -> Above, plus rules to considerably improve code readability and/or dev experience.
* pluginVue.configs["flat/recommended"]
* -> Above, plus rules to enforce subjective community defaults to ensure consistency.
*/
...pluginVue.configs[ 'flat/essential' ],
{
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser,
...globals.node, // SSR, Electron, config files
process: 'readonly', // process.env.*
ga: 'readonly', // Google Analytics
cordova: 'readonly',
Capacitor: 'readonly',
chrome: 'readonly', // BEX related
browser: 'readonly' // BEX related
}
},
// add your custom rules here
rules: {
'prefer-promise-reject-errors': 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
},
{
files: [ 'src-pwa/custom-service-worker.js' ],
languageOptions: {
globals: {
...globals.serviceworker
}
}
},
prettierSkipFormatting // optional, if you want prettier
]content_paste
TypeScript projects
Dependencies
$ yarn add --dev vue-tsc @vue/eslint-config-typescript @eslint/js eslint@9 eslint-plugin-vue globals eslint-webpack-plugincontent_paste
If you want prettier as a code formatter, then install these too:
$ yarn add --dev prettier@3 @vue/eslint-config-prettiercontent_paste
The quasar.config settings
return {
eslint: {
// fix: true,
// include: [],
// exclude: [],
// cache: false,
// rawEsbuildEslintOptions: {},
// rawWebpackEslintPluginOptions: {},
warnings: true,
errors: true
}
}content_paste
ESLint configuration file
import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-webpack/eslint'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
// the following is optional, if you want prettier too:
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
export default [
{
/**
* Ignore the following files.
* Please note that pluginQuasar.configs.recommended() already ignores
* the "node_modules" folder for you (and all other Quasar project
* relevant folders and files).
*
* ESLint requires "ignores" key to be the only one in this object
*/
// ignores: []
},
...pluginQuasar.configs.recommended(),
js.configs.recommended,
/**
* https://eslint.vuejs.org
*
* pluginVue.configs.base
* -> Settings and rules to enable correct ESLint parsing.
* pluginVue.configs[ 'flat/essential']
* -> base, plus rules to prevent errors or unintended behavior.
* pluginVue.configs["flat/strongly-recommended"]
* -> Above, plus rules to considerably improve code readability and/or dev experience.
* pluginVue.configs["flat/recommended"]
* -> Above, plus rules to enforce subjective community defaults to ensure consistency.
*/
...pluginVue.configs[ 'flat/essential' ],
// https://github.com/vuejs/eslint-config-typescript
...vueTsEslintConfig({
// Optional: extend additional configurations from typescript-eslint'.
// Supports all the configurations in
// https://typescript-eslint.io/users/configs#recommended-configurations
extends: [
// By default, only the recommended rules are enabled.
'recommended'
// You can also manually enable the stylistic rules.
// "stylistic",
// Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
// are also extendable here. But we don't recommend using them directly.
]
}),
{
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser,
...globals.node, // SSR, Electron, config files
process: 'readonly', // process.env.*
ga: 'readonly', // Google Analytics
cordova: 'readonly',
Capacitor: 'readonly',
chrome: 'readonly', // BEX related
browser: 'readonly' // BEX related
}
},
// add your custom rules here
rules: {
'prefer-promise-reject-errors': 'off',
'@typescript-eslint/consistent-type-imports': [
'error',
{ prefer: 'type-imports' }
],
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
},
{
files: [ 'src-pwa/custom-service-worker.ts' ],
languageOptions: {
globals: {
...globals.serviceworker
}
}
},
prettierSkipFormatting // optional, if you want prettier
]content_paste
Performance and ignoring files
WARNING
Please be sure to ignore unused files to increase performance. If you lint unused files/folders the UX will degrade significantly.
You can ignore files by editing your /eslint.config.js file:
export default [
{
/**
* Ignore the following files.
* Please note that pluginQuasar.configs.recommended() already ignores
* the "node_modules" folder for you (and all other Quasar project
* relevant folders and files).
*
* ESLint requires "ignores" key to be the only one in this object
*/
ignores: [] // <<<---- here!
},content_paste
Notice that pluginQuasar.configs.recommended() from a few sections above will add the following to your ESLint ignores setting (no need to add them yourself too!):
// not an exhaustive list auto-added to "ignores"
[
'dist/*',
'src-capacitor/*',
'src-cordova/*',
'.quasar/*',
'quasar.config.*.temporary.compiled*'
]content_paste
Lint Rules
The linting rules can be removed, changed, or added. Notice some things:
- Some rules are standard ESLint ones. Example: ‘brace-style’.
- Some rules are for eslint-plugin-vue. Example: ‘vue/max-attributes-per-line’.
You can add/remove/change rules by first visiting https://eslint.org/docs/rules/ or https://eslint.vuejs.org/rules.