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

Question

我的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 配置正确应用，即使在热重载期间，所以任何达到这一点的建议都将受到赞赏。

Answer 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,
      }))

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

Apply eslint-loader options in Vue-cli project so eslint configuration is respected

eslint

webpack

vuejs2

vue-cli

eslint-loader