Having a code linter (like ESLint) 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
Two dot files will be created
- .eslintrc.cjs – ESLint configuration, including rules
- .eslintignore – what ESLint should ignore when linting
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
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.
'plugin:vue/strongly-recommended'
]Also note that you need the following file
/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.cjs
/quasar.config.*.temporary.compiled*Lint Rules
The linting rules can be removed, changed, or added. Notice some things
- 有些規則適用於 Standard、Airbnb 或 Prettier 標準 (取決於您建立專案時選擇的標準)。例如：‘brace-style’。
- 有些規則適用於 eslint-plugin-vue。例如：‘vue/max-attributes-per-line’。
您可以新增/移除/變更規則，首先請造訪 https://eslint.dev.org.tw/docs/rules/ 或 https://eslint.vuejs.org/rules。
以下是一些 ESLint 規則的範例
'rules': {
'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],
'vue/max-attributes-per-line': 0,
'vue/valid-v-for': 0,
// allow async-await
'generator-star-spacing': 'off',
// allow paren-less arrow functions
'arrow-parens': 0,
'one-var': 0,
'import/first': 0,
'import/named': 2,
'import/namespace': 2,
'import/default': 2,
'import/export': 2,
'import/extensions': 0,
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}Typescript 專案的程式碼檢查
TS 專案的程式碼檢查基於 vite-plugin-checker + ESLint + vue-tsc
$ yarn add --dev vite-plugin-checker vue-tsc@2 typescript在您的專案根目錄中建立一個名為 tsconfig.vue-tsc.json 的檔案
{
"extends": "./tsconfig.json",
"compilerOptions": {
"skipLibCheck": true
}
}build: {
vitePlugins: [
['vite-plugin-checker', {
vueTsc: {
tsconfigPath: 'tsconfig.vue-tsc.json'
},
eslint: {
lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"'
}
}, { server: false }]
]
}Javascript 專案的程式碼檢查
JS 專案的程式碼檢查基於 vite-plugin-checker + ESLint
$ yarn add --dev vite-plugin-checkerbuild: {
vitePlugins: [
['vite-plugin-checker', {
eslint: {
lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"'
}
}, { server: false }]
]
}quasar.config 檔案 > eslint已棄用
警告
以下描述的屬性已被棄用，建議改用 vite-plugin-checker。
如果您在建立專案資料夾時選擇了 ESLint，您也會注意到 eslint 鍵已新增至 /quasar.config 檔案中
eslint: {
// fix: true,
// include: [],
// exclude: [],
// rawOptions: {},
warnings: true,
errors: true
},/** 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[];
}為了稍後停用 ESLint，您只需要執行以下操作
- 註解掉 (或移除) 下方的鍵
eslint: { /* ... */ }- 或者，將
warnings和errors設定為false
eslint: {
warnings: false,
errors: false
}