Vue-cli项目配置eslint-loader 使自定义eslint规则热重载时生效

以下是按优先级排序的可行方案，全部适配你当前的Vue CLI 4 + eslint-loader技术栈，无需更换依赖：

方案1：添加Vue CLI原生lint配置（最快生效） #

直接在vue.config.js根配置项中添加lintOnSave字段，本地开发环境下将eslint校验结果降级为警告，不会阻断热重载和构建：

// vue.config.js
module.exports = {
  // 新增以下配置
  lintOnSave: process.env.NODE_ENV === 'development' ? 'warning' : 'error',
  // 原有配置保持不变
  publicPath: '/',
  configureWebpack: {
    // ...原有内容
  },
  // ...其他原有配置
}

该配置仅会改变校验结果的报错级别，不会关闭eslint检查，生产环境构建时仍会正常校验规则避免问题代码上线。

方案2：强制eslint-loader读取根目录配置+关闭缓存 #

热重载时规则失效90%以上是因为eslint-loader缓存了旧配置，或者读取了Vuexy模板子目录下的额外eslint配置覆盖了根目录规则。在vue.config.js的chainWebpack字段中添加eslint-loader的自定义配置即可解决：

// vue.config.js
const path = require('path') // 顶部引入path，已有则忽略

module.exports = {
  // ...原有其他配置
  chainWebpack: config => {
    // 新增eslint-loader配置
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .tap(options => {
        // 关闭缓存，每次热重载都读取最新配置
        options.cache = false
        // 强制指定根目录的eslint配置文件，避免子目录配置覆盖
        options.configFile = path.resolve(__dirname, '.eslintrc.js')
        return options
      })

    // 原有vue-loader配置保持不变
    config.module
      .rule('vue')
      .use('vue-loader')
      // ...原有内容
  }
}

方案3：优化.eslintrc.js规则配置 #

补充overrides配置明确指定规则生效范围，避免继承的airbnb规则优先级覆盖你的自定义配置：

// .eslintrc.js
module.exports = {
  root: true,
  // ...原有其他配置
  rules: {
    'no-console': 'off',
    'no-debugger': 'off',
    'no-unused-vars': 'off',
    'no-unused-expressions': 'off',
  },
  // 新增以下覆盖配置
  overrides: [
    {
      files: ['*.js', '*.vue'],
      rules: {
        'no-console': 'off',
        'no-debugger': 'off',
        'no-unused-vars': 'off',
        'no-unused-expressions': 'off',
      }
    }
  ],
  plugins: ['jest'],
}

同时建议删除未使用的warnInLocal变量，避免后续误触产生问题。

验证方法 #

修改配置后重启vue-cli-service serve，修改任意JS文件触发热重载，即可验证规则是否正常生效。

内容的提问来源于stack exchange，提问作者Steve Bennett