Примените параметры eslint-loader в проекте Vue-cli, чтобы соблюдалась конфигурация eslint.

Question

Мой проект Vue-Cli основан на шаблоне Vuexy (не с открытым исходным кодом).

Проблема, с которой я сталкиваюсь, заключается в том, что правила eslint, которые я отключил, нарушают сборку.

Когда я впервые бегу vue-cli-service serve, он строится и работает нормально. Однако любое изменение исходного кода вызывает линтинг, и правила, которые следует отключить, отображаются как ошибки:

       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)

The .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 есть настройки, но они относятся к файлу конфигурации 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,
      }))