如何在@vue/cli中启用no-unused-vars错误提示？

我之前也碰到过类似的情况，给你几个排查方向，应该能解决问题：

• 先确认PhpStorm的ESLint配置是否正确
  打开PhpStorm的设置（File > Settings），找到Languages & Frameworks > JavaScript > Code Quality Tools > ESLint，确保：

  • 勾选了Enable选项
  • 选择了Automatic ESLint configuration（或者手动指定你的.eslintrc.js文件路径）
    另外，还要在Inspections设置里找到JavaScript > Code quality tools > ESLint，确认这个检查项是开启状态，避免IDE屏蔽了ESLint的错误提示。

• 检查Vue CLI的lintOnSave配置
  在项目根目录的vue.config.js文件里（如果没有就新建一个），添加lintOnSave: true配置，确保开发服务器运行时会实时触发ESLint检测：

  module.exports = {
    lintOnSave: true
  }
  

  这个配置默认是true，但有时候可能被误改成false或者'warning'，改成true才能让错误级别的提示正常显示。

• 验证ESLint规则是否真的生效
  在终端手动运行yarn lint（或者npm run lint），看看输出里有没有no-unused-vars的错误。如果终端能检测到，说明规则本身没问题，问题出在开发服务器或者PhpStorm的实时检测上；如果终端也检测不到，那就要检查你的.eslintrc.js是否有其他规则冲突，或者有没有被局部配置覆盖。

• 清除缓存
  缓存经常会导致规则不生效：

  • 删除项目里的node_modules/.cache目录
  • 在PhpStorm里执行File > Invalidate Caches...，选择"Invalidate and Restart"重启IDE

• 检查是否有配置覆盖或忽略

  • 看看项目里有没有.eslintignore文件，确保没有忽略你的.vue或.js文件
  • 检查子目录里有没有其他.eslintrc.js文件，这些局部配置会覆盖根目录的规则

补充一点：如果是要检测Vue模板中的未使用变量，可能需要额外配置vue/no-unused-vars规则，但你要检测的是脚本部分的未使用变量，普通的no-unused-vars就足够了。

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