在 Vue-cli 项目中应用 eslint-loader 选项，以便尊重 eslint 配置

Posted 2023-02-16

【中文标题】在 Vue-cli 项目中应用 eslint-loader 选项，以便尊重 eslint 配置

【英文标题】：Apply eslint-loader options in Vue-cli project so eslint configuration is respected

【发布时间】：2021-12-14 05:39:45

【问题描述】：

我的 Vue-Cli 项目基于 Vuexy 模板（非开源）。

我遇到的问题是我禁用的 eslint 规则正在破坏构建。

当我第一次运行vue-cli-service serve 时，它构建并运行良好。但是，对源代码的任何更改都会触发 linting，并且应该禁用的规则会显示为错误：

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                                           3:57:50 pm

 error  in ./src/views/inventory/map/layers/lotsData.js

Module Error (from .../node_modules/eslint-loader/index.js):

.../frontends/backoffice/src/views/inventory/map/layers/lotsData.js
  70:40  error  'map' is defined but never used  no-unused-vars
  87:3   error  Unexpected console statement     no-console

✖ 2 problems (2 errors, 0 warnings)

.eslintrc.js 看起来像这样：

const warnInLocal = process.env.NODE_ENV === undefined ? 0 : 'error'

module.exports = 
  root: true,
  env: 
    node: true,
    'jest/globals': true,
  ,
  extends: ['plugin:vue/recommended', '@vue/airbnb'],
  parserOptions: 
    parser: 'babel-eslint',
  ,
  ignorePatterns: ['**/node_modules/**', '**/.history/**'],
  rules: 
    // These make sense in deployment, but cause friction in local development
    'no-console': 0,
    'no-debugger': 0,
    'no-unused-vars': 0,
    'no-unused-expressions': 0,
  ,
  plugins: ['jest'],

vue.config.js：

//snipped
module.exports = 
  publicPath: '/',
  configureWebpack: 
    devtool: 'source-map',
    resolve: 
      alias: 
        '@themeConfig': path.resolve(__dirname, 'themeConfig.js'),
        '@core': path.resolve(__dirname, 'src/@core'),
        '@validations': path.resolve(__dirname, 'src/@core/utils/validations/validations.js'),
        '@axios': path.resolve(__dirname, 'src/libs/axios'),
      ,
    ,
  ,
  chainWebpack: config => 
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => 
        // eslint-disable-next-line no-param-reassign
        options.transformAssetUrls = 
            // snipped
        
        return options
      )
  ,
  transpileDependencies: ['vue-echarts', 'resize-detector'],

最后是 package.json：

  "devDependencies": 
    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
    "@serverless-stack/cli": "0.36.0",
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-router": "~4.5.9",
    "@vue/cli-plugin-vuex": "~4.5.9",
    "@vue/cli-service": "~4.5.9",
    "@vue/eslint-config-airbnb": "^5.3.0",
    "@vuepress/plugin-medium-zoom": "^1.7.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.31.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-vue": "^7.14.0",
    "sass": "1.32.*",
    "sass-loader": "^10.1.0",
    "vue-template-compiler": "2.x"
  

eslint-loader documentation 中给出了一些设置，但它们引用了该项目没有的 webpack 配置文件。我想我应该以某种方式将它们放在chainWebpack 下，但我真的不明白那是什么样的。

（我也知道 eslint-loader 已被弃用，但我认为我无法替换它。）

我真的只是想使 eslint 配置即使在热重载期间也能正确应用，因此对于达到这一点的任何建议表示赞赏。

【参考方案1】：

将此添加到我的 vue.config.js 似乎可行：

  chainWebpack: config => 
    // ... existing 'vue-loader' rule ...

    // stop warnings breaking the build locally
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .loader('eslint-loader')
      .tap(options => (
        ...options,
        failOnWarning: false,
        failOnError: true,
        emitWarning: true,
      ))