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

Question

My Vue-Cli project is based on the Vuexy template (not open source).

The problem I'm experiencing is eslint rules that I have disabled are breaking the build.

When I first run vue-cli-service serve, it builds and runs fine. Any change to source code, however, triggers linting, and rules which should be disabled are showing up as errors:

 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 looks like this:

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'],
}

And finally 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"
  }

There are settings given in the eslint-loader documentation but they refer to a webpack configuration file which this project doesn't have. I think I'm somehow supposed to put them under chainWebpack but I don't really understand what that looks like.

(I also get that eslint-loader is deprecated, but I don't think I'm in a position to replace it.)

I'm really just trying to get the eslint configuration applying properly even during hot reloads, so any advice to get to that point is appreciated.

Answer 1

Adding this to to my vue.config.js seems to work:

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