强烈建议安装代码检查器（例如 ESLint v9+），以确保你的代码清晰易读。它甚至还能帮助你在运行代码之前捕获一些错误。
¥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.
当你搭建 Quasar 项目文件夹的脚手架时，它会询问你是否需要 ESLint（同样是更漂亮的代码格式化程序）。
¥When you scaffold a Quasar project folder it will ask you if you want ESLint (also prettier as a code formatter).
JavaScript 项目(Javascript projects)
¥Javascript projects
所需依赖(Needed dependencies)
¥Needed dependencies
$ yarn add --dev @eslint/js eslint@9 eslint-plugin-vue globals vite-plugin-checker如果你希望将 prettier 用作代码格式化程序，则也请安装以下组件：
¥If you want prettier as a code formatter, then install these too:
$ yarn add --dev prettier@3 @vue/eslint-config-prettierquasar.config 文件设置(The quasar.config file settings)
¥The quasar.config file settings
build: {
vitePlugins: [
['vite-plugin-checker', {
eslint: {
lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
useFlatConfig: true
}
}, { server: false }]
]
}ESLint 配置(The ESLint configuration)
¥The ESLint configuration
import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-vite/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-vue.nodejs.cn
* * 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
]TypeScript 项目(TypeScript projects)
¥TypeScript projects
依赖(Dependencies)
¥Dependencies
$ yarn add --dev vue-tsc @vue/eslint-config-typescript @eslint/js eslint@9 eslint-plugin-vue globals vite-plugin-checker如果你希望将 prettier 用作代码格式化程序，则也请安装以下组件：
¥If you want prettier as a code formatter, then install these too:
$ yarn add --dev prettier@3 @vue/eslint-config-prettierquasar.config 设置(The quasar.config settings)
¥The quasar.config settings
build: {
vitePlugins: [
['vite-plugin-checker', {
vueTsc: true,
eslint: {
lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{ts,js,mjs,cjs,vue}"',
useFlatConfig: true
}
}, { server: false }]
]
}ESLint 配置文件(ESLint configuration file)
¥ESLint configuration file
import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-vite/eslint'
import { defineConfigWithVueTs, vueTsConfigs } 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 defineConfigWithVueTs(
{
/**
* 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-vue.nodejs.cn
* * 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' ],
{
files: ['**/*.ts', '**/*.vue'],
rules: {
'@typescript-eslint/consistent-type-imports': [
'error',
{ prefer: 'type-imports' }
],
}
},
vueTsConfigs.recommendedTypeChecked,
{
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.ts' ],
languageOptions: {
globals: {
...globals.serviceworker
}
}
},
prettierSkipFormatting // optional, if you want prettier
)性能与忽略文件(Performance and ignoring files)
¥Performance and ignoring files
警告
请务必忽略未使用的文件以提高性能。如果你对未使用的文件/文件夹进行 lint 操作，用户体验将显著下降。
¥Please be sure to ignore unused files to increase performance. If you lint unused files/folders the UX will degrade significantly.
你可以通过编辑 /eslint.config.js 文件来忽略某些文件：
¥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!
},请注意，上面几节中的 pluginQuasar.configs.recommended() 会将以下内容添加到你的 ESLint ignores 设置中（无需你自行添加！）：
¥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*'
]Lint 规则(Lint Rules)
¥Lint Rules
可以删除、更改或添加 linting 规则。注意以下几点：
¥The linting rules can be removed, changed, or added. Notice some things:
某些规则是标准 ESLint 规则。示例：‘brace-style’。
¥Some rules are standard ESLint ones. Example: ‘brace-style’.
某些规则适用于 eslint-plugin-vue。示例：‘vue/max-attributes-per-line’。
¥Some rules are for eslint-plugin-vue. Example: ‘vue/max-attributes-per-line’.
你可以通过先访问 https://eslint.nodejs.cn/docs/rules/ 或 https://eslint-vue.nodejs.cn/rules 来添加/删除/更改规则。
¥You can add/remove/change rules by first visiting https://eslint.nodejs.cn/docs/rules/ or https://eslint-vue.nodejs.cn/rules.