VSCode代码格式化失效怎么办_Prettier与ESLint配置修复

VSCode保存时未触发Prettier格式化，主因是未设Prettier为默认格式化工具或文件类型未关联；需检查Format Document With...列表、语言特定设置、documentSelectors配置，并确保ESLint与Prettier规则不冲突、全文件格式化启用、配置文件被正确加载。

VSCode 保存时没触发 Prettier 格式化

最常见原因是 VSCode 没把 prettier 设为默认格式化工具，或者文件类型未关联。即使装了插件、配了配置，只要编辑器不知道“该用谁来格式化 .js 文件”，就只会静默跳过。

• 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入并执行 Format Document With...，确认列表中是否显示 Prettier；若没有，说明插件未激活或配置路径错误
• 检查当前文件右下角语言模式（如 JavaScript），点击它 → 选择 Configure Language Specific Settings... → 确保有：

  "editor.defaultFormatter": "esbenp.prettier-vscode"

• prettier 默认不处理 .vue、.ts 等文件，需在 settings.json 中显式启用：

  "prettier.documentSelectors": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue"]

ESLint 修复（eslint --fix）和 Prettier 冲突

两者规则重叠（比如缩进、引号、分号），若同时开启自动修复，会相互覆盖：ESLint 加了分号，Prettier 又删掉；Prettier 调整了空行，ESLint 又报错。根本解法不是禁用某一方，而是让 ESLint “只管逻辑规则”，把格式交给 Prettier。

• 在 .eslintrc.js 或 .eslintrc.cjs 中禁用所有格式类规则：

  module.exports = {
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'prettier' // ← 这个必须存在，它会关闭 eslint 的格式规则
    ],
    plugins: ['prettier'],
    rules: {
      'prettier/prettier': 'error' // ← 把 prettier 问题转成 eslint 错误
    }
  }

• 确保已安装 eslint-config-prettier（关闭 ESLint 格式规则）和 eslint-plugin-prettier（把 Prettier 错误接入 ESLint）
• VSCode 中关闭 ESLint 的自动修复（避免抢在 Prettier 前动手）：

  "eslint.codeAction.onSave.mode": "none"

保存时只格式化修改行，而不是整个文件

这是 VSCode 的默认行为（editor.formatOnSaveMode 设为 modifications），但 Prettier 不支持“局部格式化”——它需要完整 AST，只给几行代码会直接报错或跳过。结果就是：看起来“格式化失效”。

Removal.AI

AI移出图片背景工具

下载

• 强制全文件格式化，在 settings.json 中设：

  "editor.formatOnSaveMode": "file"

• 如果用的是 Prettier v3+，且项目启用了 formatWithSemicolons: false 等新选项，注意 VSCode 插件版本是否同步升级（老版插件可能忽略新配置）
• 某些工作区设置了 "[javascript]": { "editor.formatOnSave": false }，会覆盖全局设置，需检查工作区 .vscode/settings.json

配置文件被忽略或加载失败

Prettier 和 ESLint 都按就近原则找配置文件（prettier.config.js、.prettierrc、.eslintrc.js 等），但 VSCode 不一定实时感知改动，尤其配置文件名大小写错误、或放在子目录却期望全局生效时。

• 运行命令行验证是否真能读到配置：

  npx prettier --find-config-path src/App.js

  和

  npx eslint --print-config src/App.js

  ，看输出路径是否符合预期
• Prettier 不识别 .eslintrc.js 里的 prettier 字段，必须单独放 .prettierrc 或 prettier.config.js
• ESLint 若用 overrides 匹配 **/*.ts，但文件实际是 App.TSX（大写），则匹配失败——注意 glob 大小写敏感性（尤其 macOS/Linux）