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,你所需要做的就是:

  1. Comment out (or remove) the key below:
// quasar.config.js
eslint: { /* ... */ }
  1. Or, set warnings and errors to false:
// quasar.config.js
eslint: {
  warnings: false,
  errors: false
}