应用代码校验(Linter) | Quasar Framework 中文网

应用代码校验(Linter)

强烈建议使用代码校验以确保代码看起来清晰可辨。它还可以帮助您在运行代码之前捕获一些错误。

当你使用Quasar CLI创建一个Quasar项目文件夹时，它会问你是否想要一个linter和你想要的ESLint的安装方式：

Standard
Airbnb
Prettier
… 或者你可以自己配置一个

两个点文件将被创建：

.eslintrc.js - ESLint配置，包括规则
.eslintignore - ESLint在代码校验时应该忽略的内容

可以进一步扩展上述Eslint安装方式之一。你的项目默认使用eslint-plugin-vue来处理你的Vue文件。快速浏览.eslintrc.js并关注以下内容：

extends: [
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // 考虑切换到 `plugin:vue/strongly-recommended` 或 `plugin:vue/recommended` 以获得更严格的规则
  'plugin:vue/strongly-recommended'
]

如果您在创建项目文件夹时选择了ESLint，您还会注意到/quasar.conf.js为您添加了eslint-loader到Webpack配置：

build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /[\\/]node_modules[\\/]
    })
  }
}

代码校验规则

可以删除，更改或添加删除规则。注意一些事情：

有些规则适用于标准、Airbnb或Prettier标准（无论您在创建项目时选择哪个标准）。例如：‘brace-style’。
有些规则适用于eslint-plugin-vue。例如：‘vue/max-attributes-per-line’。

您可以通过首先访问 https://eslint.org/docs/rules/ 或 https://github.com/vuejs/eslint-plugin-vue 来添加/删除/更改规则。

下面的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，你需要做的就是从/quasar.conf.js注释掉（或删除）下面的代码：

build: {
  extendWebpack (cfg) {
    /*
     * we comment out this block
     *
    cfg.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /[\\/]node_modules[\\/]
    })
    */
  }
}

阅读更多?