@vue/cli-plugin-eslint #

vue-cli 的 eslint 插件

注入的命令 #

• vue-cli-service lint

  Usage: vue-cli-service lint [options] [...files]
  
  Options:
  
    --format [formatter] specify formatter (default: stylish)
    --no-fix             do not fix errors
    --max-errors         specify number of errors to make build failed (default: 0)
    --max-warnings       specify number of warnings to make build failed (default: Infinity)
    --output-file        specify file to write report to
  

对文件进行 lint 和修复。如果没有指定特定文件，它会对 src 和 tests 中的所有文件进行 lint，以及根目录中的所有 JavaScript 文件（这些文件通常是配置文件，例如 babel.config.js 或 .eslintrc.js）。

不支持其他 ESLint CLI 选项。

配置 #

ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段进行配置。有关更多详细信息，请参阅 ESLint 配置文档。

默认情况下，在开发过程中使用 eslint-loader 进行保存时 lint 功能已启用。可以通过 vue.config.js 中的 lintOnSave 选项禁用它。

module.exports = {
  lintOnSave: false
}

当设置为 true 时，eslint-loader 会将 lint 错误作为警告发出。默认情况下，警告只记录到终端，不会导致编译失败。

要使 lint 错误显示在浏览器覆盖层中，可以使用 lintOnSave: 'error'。这将强制 eslint-loader 始终发出错误。这也意味着 lint 错误现在会导致编译失败。

或者，你可以配置覆盖层以显示警告和错误。

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

当 lintOnSave 为真值时，eslint-loader 将在开发和生产环境中应用。如果你想在生产构建期间禁用 eslint-loader，可以使用以下配置。

// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

在已创建的项目中安装 #

vue add eslint

注入的 webpack-chain 规则 #

• config.module.rule('eslint')
• config.module.rule('eslint').use('eslint-loader')