VS Code中ESLint与Prettier对.js文件无作用的问题求助

我之前也碰到过类似的场景，结合你的配置细节，给你梳理几个具体的排查和修复方向：

1. 清理.prettierrc中的无效配置项 #

你的.prettierrc里包含了editor.formatOnSave和requireConfig这两个非Prettier官方配置项，这些会被Prettier忽略，甚至可能干扰解析，建议移除后保持配置纯净：

{
  "singleQuote": true,
  "printWidth": 80,
  "proseWrap": "always",
  "tabWidth": 4,
  "useTabs": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "semi": true
}

editor.formatOnSave应该移到VS Code的settings.json中配置，而不是放在Prettier的配置文件里。

2. 确保VS Code正确关联JavaScript文件的格式化和ESLint校验 #

在你的settings.json中，针对JavaScript文件单独配置格式化和校验规则，避免全局设置的冲突：

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

同时确认eslint.validate已经正确包含javascript（你已经设置了，但可以再检查工作区的settings.json是否覆盖了全局设置）。

3. 验证ESLint依赖是否完整安装 #

eslint-config-airbnb需要多个peer依赖才能正常工作，如果你只安装了核心包，可能导致JavaScript文件的规则不生效。可以运行以下命令安装所有必要依赖：

# 针对npm用户
npx install-peerdeps --dev eslint-config-airbnb

# 针对yarn用户
npx install-peerdeps --dev --yarn eslint-config-airbnb

另外，你的配置使用了babel-eslint作为解析器，确保已经安装babel-eslint和对应的Babel依赖（@babel/core等）。

4. 检查ESLint规则的覆盖是否合理 #

你的.eslintrc中设置了indent: [4, 4]，而eslint-config-airbnb默认的indent规则是2空格，这里的覆盖是否正确生效？可以尝试在.js文件中故意写错误的缩进，然后运行终端命令测试：

npx eslint your-test-file.js

如果终端能检测到缩进错误，说明ESLint配置本身没问题，问题出在VS Code插件的关联上；如果终端也没输出，可能是规则被其他配置覆盖了。

5. 重启ESLint服务并清除缓存 #

有时候VS Code的ESLint插件会缓存旧的配置，导致规则不生效：

• 按Ctrl+Shift+P（Windows）或Cmd+Shift+P（Mac）打开命令面板
• 运行ESLint: Restart ESLint Server
• 可选：删除项目根目录下的.node_modules/.cache/eslint（如果存在），然后重启VS Code

6. 检查.eslintignore文件 #

确保项目根目录的.eslintignore中没有添加*.js或特定.js文件的忽略规则，否则ESLint会跳过这些文件的校验。

内容的提问来源于stack exchange，提问作者Cédric Lefebvre