Quasar CLI with Vite - @quasar/app-vite
ESLint
强烈建议使用代码校验(如ESLint)以确保代码看起来清晰可辨。 它还可以帮助您在运行代码之前捕获一些错误。
当你在Quasar项目文件夹上搭建脚手架时,它会问你是否需要一个linter,以及你想为ESLint做什么设置:
两个点文件将被创建:
- .eslintrc.js - ESLint配置,包括规则
- .eslintignore - ESLint在代码校验时应该忽略的内容
可以进一步扩展上述Eslint安装方式之一。 你的项目默认使用eslint-plugin-vue
来处理你的Vue文件。 快速浏览/.eslintrc.js
并关注以下内容:
extends: [
// https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention-for-vue-js-3-x
// 考虑切换到 `plugin:vue/strongly-recommended` 或 `plugin:vue/recommended` 以获得更严格的规则
'plugin:vue/strongly-recommended'
]
如如果你在创建项目文件夹时选择了ESLint,你也会注意到eslint
键被添加到/quasar.config.js
:
// quasar.config.js
eslint: {
// fix: true,
// include = [],
// exclude = [],
// rawOptions = {},
warnings: true,
errors: true
},
代码校验规则
可以删除,更改或添加删除规则。 注意一些事情:
- 有些规则适用于标准、Airbnb或Prettier标准(无论您在创建项目时选择哪个标准)。 例如:‘brace-style’。
- 有些规则适用于eslint-plugin-vue。 例如:‘vue/max-attributes-per-line’。
您可以通过首先访问 https://eslint.org/docs/rules/ 或 https://eslint.vuejs.org/rules 来添加/删除/更改规则。
下面的ESLint规则示例:
// .eslintrc.js
'rules': {
'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],
'vue/max-attributes-per-line': 0,
'vue/valid-v-for': 0,
// 允许异步等待(async-await)
'generator-star-spacing': 'off',
// 允许无箭头括号方法
'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,
// 允许开发时开启调试器
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
禁用代码校验
为了让你以后能禁用ESLint,你所需要做的就是:
- Comment out (or remove) the key below:
// quasar.config.js
eslint: { /* ... */ }
- Or, set
warnings
anderrors
tofalse
:
// quasar.config.js
eslint: {
warnings: false,
errors: false
}