VSCode + Prettier：为不同语言配置不同的格式化规则-VSCode-PHP中文网

VSCode + Prettier：为不同语言配置不同的格式化规则

P粉986688829

发布： 2025-12-19 16:29:54

原创

248人浏览过

可通过Prettier语言专属配置文件（如.prettierrc.js~ts）、VSCode语言绑定设置及overrides字段实现JS/TS/MD/CSS差异化格式化，分层控制“怎么格式化”“谁来格式化”“在哪特殊处理”。

vscode + prettier：为不同语言配置不同的格式化规则

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 不自动换行，而其他地方要换行：

MediPro网上书店系统

基于PHP+MYSQL开发，除了网上书店必备的商品管理、配送支付管理、订单管理、会员分组、会员管理、查询统计和多项商品促销功能，还具有完整的文章、图文、下载、单页、广告发布等网站内容管理功能。系统具有静态HTML生成、UTF-8多语言支持、可视化模版引擎等技术特点，支持多频道调用不同模版和任意设置频道首页，适合建立各种规模的网上书店。系统具有以下主要功能模块：网站参数设置 - 对网站的一些参数进

查看详情

在 .prettierrc.js 中使用 overrides 字段
匹配文件路径或扩展名，指定局部配置

示例：

module.exports = {
  semi: true,
  singleQuote: true,
  overrides: [
    {
      files: ["*.md"],
      options: { proseWrap: "always" }
    },
    {
      files: ["docs/**/*.md"],
      options: { proseWrap: "never" }
    }
  ]
};

登录后复制

这种写法比建多个配置文件更灵活，适合项目内部分区管理。