vue 和 eslint 仅对更改的文件进行 linting

Question

We are using vue-cli with the eslint plugin and we have an.eslintrc config like this:

const devOff = process.env.NODE_ENV === 'production' ? 'error' : 'warn';

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    "eslint:recommended"
  ],
  rules: {
    'no-console': devOff,
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};

When we run npm run build the first time we get an error and that's fine as eslint should report errors when building for production.

warning: Unexpected console statement (no-console)...

When we run npm run build again without changing anything, the build runs fine. It seems to me eslint is caching already parsed files regardless of having errors or not.

I found the CLI optin --cache in the eslint guide but I couldn't manage to set this option in vue.config.js nor.eslintrc.js

How can I set up vue/eslint to fail repeatedly the production build if we have any linting errors in any file.

Answer 1

This is how I solve this issue in all my projects:

// vue.config.js
module.exports =
{
  chainWebpack: config =>
  {
    config.module.rule('eslint').use('eslint-loader').loader('eslint-loader').tap(options =>
    {
      delete options.cacheIdentifier;
      options.cache = false; // otherwise on each restart cached errors won't be shown !!!
      return options;
    });
    config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options =>
    {
      delete options.cacheDirectory;
      return options;
    });
    config.module.rule('vue').uses.delete('cache-loader');
    config.module.rule('js').uses.delete('cache-loader');
  }
}