手动在.eslintrc.js设置的ESlint规则在Nuxt应用无效但Vue应用生效

核心原因 #

Nuxt框架默认集成了ESLint相关的配置模块，内置配置的优先级默认高于你手动创建的.eslintrc.js文件，你写的自定义规则被框架内置的规则覆盖，导致不生效，常见场景包括：

• 初始化项目时勾选了ESLint支持，Nuxt自动在nuxt.config.js/ts中注入了eslint模块配置，没有开启读取本地rc文件的开关
• 项目中存在多个ESLint配置文件，.eslintrc.js的加载优先级低于其他配置
• 你引入的ESLint拓展规范（如standard、@nuxt/eslint-config）本身将对应规则设为error，自定义规则没有覆盖成功

解决方案 #

• 方案1：强制开启ESLint读取本地配置文件的开关
  在nuxt.config.js（Nuxt3为nuxt.config.ts）中找到@nuxtjs/eslint-module的配置，新增useEslintrc: true参数：

  // nuxt.config.js 示例
  export default {
    buildModules: [
      ['@nuxtjs/eslint-module', {
        useEslintrc: true
      }]
    ]
  }
  

• 方案2：直接在Nuxt配置中写入自定义规则
  不需要修改.eslintrc.js，直接将规则配置到Nuxt的eslint配置项中，优先级最高：

  // nuxt.config.js 示例
  export default {
    eslint: {
      config: {
        rules: {
          'vue/multi-word-component-names': 'warn',
          'no-unused-vars': 'warn'
        }
      }
    }
  }
  

• 方案3：清理多余的ESLint配置文件
  检查项目根目录是否存在.eslintrc、.eslintrc.json、.eslintrc.yml等其他ESLint配置文件，合并配置后删除多余文件，仅保留你需要的.eslintrc.js即可。
• 方案4：清除缓存重启服务
  修改配置后先删除项目根目录的.nuxt缓存文件夹，再执行npm run dev重启项目，避免缓存导致配置不生效。

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