VSCode前端代码格式化失效主因是默认格式化器未设为Prettier：需手动配置javascript/typescript的defaultFormatter为esbenp.pretterr-vscode，并确保formatOnSave启用、.prettierrc无语法错误、ESLint不冲突，且语言模式匹配。
VSCode前端代码格式化失效，90%的情况不是插件没装，而是 VS Code 根本没把格式化任务派给 Prettier —— 它还在用内置的 TypeScript 语言功能默默处理 JS/TS 文件。
为什么 Shift+Alt+F 对 JS/TS 文件完全没反应
快捷键只是“发号施令”，真正干活的是 editor.defaultFormatter 指定的那个扩展。VS Code 默认对 JavaScript 和 TypeScript 使用 vscode.typescript-language-features，它只做基础缩进和括号匹配，不执行 Prettier 那套规则。
- 按
Ctrl+Shift+P→ 输入Format Document With…，如果列表里没有esbenp.prettier-vscode，说明绑定失败 - 右下角语言模式必须是
JavaScript或TypeScript（不是JavaScript React或Plain Text） - 检查设置：搜
javascript › default formatter，手动选esbenp.prettier-vscode（拼写一个字母都不能错） - 同理检查
typescript › default formatter，也得设成同一个值
保存时自动格式化（formatOnSave）被悄悄关掉了
这个开关有三层覆盖优先级：语言专属 > 工作区 > 用户。你可能在全局打开了，但项目里的 .vscode/settings.json 里写了 "[javascript]": { "editor.formatOnSave": false }，直接把 JS 文件全禁了。
- 打开命令面板 →
Preferences: Open Workspace Settings (JSON)，搜索formatOnSave，删掉所有显式设为false的语言块 - 推荐只在工作区配置中写语言专属启用：
"[javascript]": { "editor.formatOnSave": true }，避免影响其他语言 - 别在顶层写
"editor.formatOnSave": true，否则 Markdown、Python 文件也会被强行格式化，容易出错
Prettier 插件装了但规则根本没加载
Prettier 启动时读取 .prettierrc 或 prettier.config.js，一旦配置文件语法错误（比如 JSON 里写了注释、用了单引号、尾随逗号），它会静默退出——不报错，也不格式化，看起来就像“失效”。
- 运行
npx prettier --debug-check src/index.js，它会明确告诉你哪一行、哪个 key 出问题 - 把
.prettierrc改成prettier.config.js，内容用 JS 写，支持注释和动态逻辑，更健壮 - 确认项目本地装了 Prettier：
npm ls prettier，如果没装或版本太老（如 v2.x），插件可能无法调用 CLI - 如果用 pnpm 或 yarn v4+，可能需要加配置：
"prettier.prettierPath": "./node_modules/prettier/index.cjs"
ESLint 和 Prettier 一起用，结果越整越乱
这不是格式化失效，是两个工具在“打架”：ESLint 自带的 semi、quotes 规则和 Prettier 的规则冲突，保存一次加引号，再保存又删掉。
- 必须安装
eslint-config-prettier并在.eslintrc.cjs的extends数组末尾加上"prettier"（顺序不能错） - VS Code 设置里关掉 ESLint 的格式能力：
"eslint.format.enable": false - 删掉
.eslintrc里所有样式类规则（semi、indent、comma-dangle等），只留逻辑和安全类规则 - 如果还想让 ESLint “顺便”跑一遍 Prettier 规则，就装
eslint-plugin-prettier，并加"plugin:prettier/recommended"
最容易被忽略的一点：语言模式不对，editor.defaultFormatter 就是摆设。哪怕所有配置都对，右下角显示的是 JavaScript React，Prettier 默认不响应——它只认 javascript 这个 language ID，React 是额外扩展的 mode，得单独配："[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
