可通过Prettier语言专属配置文件（如.prettierrc.js~ts）、VSCode语言绑定设置及overrides字段实现JS/TS/MD/CSS差异化格式化，分层控制“怎么格式化”“谁来格式化”“在哪特殊处理”。
VSCode 中用 Prettier 统一代码风格很常见，但它默认对所有语言套同一套规则。想让 JavaScript、TypeScript、Markdown、CSS 各自按适合的方式格式化？关键在于利用 Prettier 的“语言专属配置”能力，配合 VSCode 的 editor.defaultFormatter 和文件级覆盖设置。
为每种语言单独指定 Prettier 配置文件
Prettier 支持按语言加载不同配置，只需在项目根目录下创建多个配置文件，命名带语言前缀：
-
.prettierrc.js（或.prettierrc）—— 全局兜底配置 -
.prettierrc.js~js→ 仅作用于 JavaScript 文件（注意波浪线后是语言 ID） -
.prettierrc.js~ts→ 仅作用于 TypeScript 文件 -
.prettierrc.js~md→ 仅作用于 Markdown 文件 -
.prettierrc.js~css→ 仅作用于 CSS 文件
每个文件导出独立配置对象，比如 .prettierrc.js~ts 可设 semi: false，而 .prettierrc.js~js 保持 semi: true。Prettier v3.0+ 原生支持这种命名约定，无需额外插件。
在 VSCode 中绑定语言与格式化器
光有配置还不够，得告诉 VSCode：哪种语言该用 Prettier 格式化，且优先级高于其他格式化器：
- 打开 VSCode 设置（
Ctrl+,），搜default formatter - 找到 Editor: Default Formatter，设为
esbenp.prettier-vscode - 再搜
format on save，确保 Editor: Format On Save 已启用 - 对特定语言微调：在
settings.json中添加语言专属设置
例如，在 settings.json 里写：
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": { "editor.formatOnSave": true },
"[typescript]": { "editor.formatOnSave": true },
"[markdown]": { "editor.formatOnSave": true, "editor.tabSize": 2 },
"[css]": { "editor.formatOnSave": true }
这样既统一用 Prettier，又保留各语言的编辑行为差异（如 Markdown 缩进为 2 空格）。
用 overrides 覆盖单个文件或目录的规则
有些场景需要更细粒度控制，比如 docs/ 下的 Markdown 不自动换行，而其他地方要换行：
- 在
.prettierrc.js中使用overrides字段 - 匹配文件路径或扩展名，指定局部配置
示例：
module.exports = {
semi: true,
singleQuote: true,
overrides: [
{
files: ["*.md"],
options: { proseWrap: "always" }
},
{
files: ["docs/**/*.md"],
options: { proseWrap: "never" }
}
]
};
这种写法比建多个配置文件更灵活，适合项目内部分区管理。
验证和调试格式化是否生效
改完配置常遇到“没反应”，可按这几步快速定位：
- 保存文件后按
Shift+Alt+F手动触发格式化，看是否报错 - 右下角状态栏点击语言标识（如 “JavaScript”），确认当前语言模式正确
- 按
Ctrl+Shift+P输入 “Format Document With...”，看 Prettier 是否在列表中且被设为默认 - 打开命令面板运行 “Developer: Toggle Developer Tools”，在 Console 查 Prettier 插件报错
常见问题：Prettier 配置文件语法错误、语言 ID 写错（如写成 typescript 而非 ts）、插件未启用或被其他格式化器抢占。
基本上就这些。核心是分层控制：Prettier 配置文件决定“怎么格式化”，VSCode 设置决定“谁来格式化”，overrides 决定“在哪特殊处理”。不复杂但容易忽略细节。
