怎么自定义JS格式化规则：控制缩进、单双引号和尾逗号

一、JS 格式化工具的分层机制与核心工作流

在深入具体配置参数之前，首先需要明确格式化工具在现代前端工程体系中的定位。很多初学者容易将 ESLint 与 Prettier 混淆，导致在项目里出现规则打架或格式化失效的问题。

现代前端开发中已形成清晰的职责划分：Prettier 专门负责代码样式与版式美化（包括行宽折行、缩进宽度、单双引号使用、末尾逗号补充），它会直接将源码解析为抽象语法树（AST），彻底丢弃原有混乱的排版，并依照指定规则重新打印出规范的代码；而 ESLint 则专注于代码质量检查与语法防错（如未定义变量检测、禁止使用未声明全局变量、逻辑死循环拦截等）。

因此，对于缩进、单双引号和尾逗号这类纯外观风格的诉求，最佳也是最具确定性的方案就是交由 Prettier 的配置文件来统领。当我们在项目根目录声明规则后，无论团队成员在本地使用 VS Code、WebStorm 还是命令行脚本，解析器都会依据同一份配置文件执行输出，消除了不同开发者编辑器本地默认配置各异带来的风格分裂。

二、实操步骤：从零配置并激活自定义规则

自定义格式化规则不需要复杂的脚手架环境，整个落地流程分为依赖引入、规则编写、编辑器联动与批量校验四个确定性步骤。

步骤 1：在项目中安装 Prettier 开发依赖

推荐将 Prettier 安装为项目的开发依赖（devDependencies），并使用 --save-exact 参数锁定确切版本号，防止后续不同小版本内核更新引起排版微调波动：

# 进入项目根目录执行
npm install --save-dev --save-exact prettier

步骤 2：创建配置文件并写入三大核心规则

在项目根目录下新建名为 .prettierrc.json（或 .prettierrc）的文件。在此文件中写入控制缩进、单双引号和尾逗号的 JSON 声明：

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "bracketSpacing": true
}

上述字段各司其职：tabWidth: 2 与 useTabs: false 联合实现每层缩进固定为 2 个空格；singleQuote: true 约束 JS 字符串优先使用单引号；trailingComma: "all" 规定多行对象、数组及函数调用末尾均保留尾逗号。

步骤 3：配置 VS Code 实现保存时自动格式化

为了让开发者无需每次手动执行格式化命令，可在项目根目录下的 .vscode/settings.json 文件中固化编辑器行为，使团队成员打开项目时自动生效：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

完成该设置后，在编辑器内按下快捷键 Ctrl + S（macOS 为 Cmd + S）保存文件时，编辑器会即时调取项目根目录的 .prettierrc.json 完成代码对齐与格式化。

步骤 4：通过命令行执行全局测试与验证

可在终端中执行官方 CLI 命令，快速检查或一键修复现有项目中的全部文件：

# 仅检查是否存在未按规则排版的文件（输出差异列表，不修改文件）
npx prettier --check .

# 批量将项目下所有文件按规则重写排版
npx prettier --write .

三、核心规则深度剖析：缩进、单双引号与尾逗号

理解每一个选项在不同业务场景下的取值差异与排版结果，有助于为团队选定最符合工程效率的规则组合。

1. 控制缩进：tabWidth 与 useTabs

缩进是代码可读性的基石。Prettier 提供了两个关键选项来控制缩进：

• tabWidth（数值型，默认 2）：指定代码在每次换行缩进时所占用的空间宽度。主流现代前端开源项目（如 Vue、React、Vite 等）均普遍采用 2 格缩进，因为其紧凑的排版在嵌套层级较深的高阶函数或 JSX 树中能够有效防止水平横向滚动条的出现；部分后端或传统团队也可将其设为 4。
• useTabs（布尔型，默认 false）：决定缩进字符是使用空格（Spaces）还是制表符（Tabs）。设定为 false（推荐）时，缩进由纯空格字符填充，在任何终端、代码托管平台（GitHub/GitLab）及文本编辑器中展现宽度严格一致；设为 true 时则输出实际的 制表符，由阅读者各自编辑器设置决定显示宽度。

2. 控制引号：singleQuote 与 jsxSingleQuote

在 JavaScript 中字符串既可以用单引号包裹，也可以用双引号包裹。通过 singleQuote 可以统一全项目的符号风格：

• singleQuote: true（优先使用单引号）：符合多数 JavaScript 开发者与 StandardJS 社区惯例。输入 "hello" 保存后会自动转为 'hello'。
• 智能逃逸机制：当字符串内容本身包含单引号（如 "It's working"）时，即使启用了 singleQuote: true，Prettier 也会智能保留外部双引号，而不是强行写成 'It's working'，从而极大降低了转义反斜杠的视觉干扰。
• JSX 独立控制：React/JSX 模板属性惯常遵循 HTML 标准的双引号习惯。Prettier 提供了独立的 jsxSingleQuote 选项，其默认值为 false，意味着即便在 JS 逻辑中设定了 singleQuote: true，JSX 中的组件属性依然会保持标准的双引号，兼顾 JS 逻辑与模板结构两者的视觉习惯。

3. 控制尾逗号：trailingComma

多行对象或数组在换行书写时，最后一项末尾是否保留逗号是一个长期争议点。Prettier 通过 trailingComma 提供了三档策略：

• "all"（现代推荐，Prettier 3 默认值）：在所有多行结构的末尾项均保留逗号。覆盖对象属性、数组元素、解构赋值、函数形参以及函数实参调用。
• "es5"（仅限 ES5 合法结构）：只在 ES5 支持的对象与数组末尾添加逗号，而在函数参数列表多行末尾不加尾逗号。
• "none"（不使用尾逗号）：在任何多行结构末尾均不添加逗号。

四、团队协同、生效优先级与常见冲突排查

在实际企业级工程落地时，开发者常常会遇到“明明修改了规则却不生效”或“格式化完后 ESLint 疯狂报错红线”的困扰。梳理配置优先级并正确排查冲突是保障规则稳固运行的关键。

1. 规则优先级与覆盖法则

当格式化动作被触发时，配置规则遵循以下从高到低的优先级序列生效：

1. CLI 命令行临时传参（如 --single-quote）：具备最高覆盖权。
2. 项目根目录的 .prettierrc / .prettierrc.json：工程级标准配置，覆盖所有全局与编辑器默认配置。
3. 项目中的 .editorconfig 文件：若存在，Prettier 会自动读取其中的 indent_size 和 indent_style；若 .prettierrc 中已有显式声明，则以 .prettierrc 为准。
4. VS Code 用户全局设置（User Settings）：仅作为最后的保底缺省值。

2. 彻底解决 ESLint 与 Prettier 规则冲突

最常见的问题是在配置完 singleQuote: true 后，ESLint 自带的 quotes 规则却要求使用双引号，导致保存格式化后立即爆出黄色或红色警告。解决该问题的标准做法是引入 eslint-config-prettier：

# 安装冲突禁用配置包
npm install --save-dev eslint-config-prettier

在项目的 .eslintrc.js 或 eslint.config.js 中，将 prettier 放置在 extends 数组的最后一项：

// .eslintrc.js 示例
module.exports = {
  extends: [
    'eslint:recommended',
    // 务必放在最后，关闭所有可能与 Prettier 冲突的 ESLint 格式规则
    'prettier'
  ],
  rules: {
    // 业务代码质量逻辑校验规则保留...
  }
};

该扩展会自动禁用所有与缩进、分号、引号、逗号相关的 ESLint 规则，让 ESLint 专注代码质量，让 Prettier 专注格式布局，实现完美的双轨协同。

五、核心配置速查表与操作检查清单

为了便于日常查阅与快速初始化新工程，下表汇总了控制缩进、单双引号和尾逗号的核心配置项及其典型取值：

实操上线核验清单（Checklist）

1. 配置文件确认：项目根目录下已建立 .prettierrc.json 并正确写入 tabWidth、singleQuote 与 trailingComma。
2. 编辑器插件与绑定：VS Code 中已安装 Prettier 官方插件，.vscode/settings.json 已将 Prettier 设为默认格式化工具并启用 editor.formatOnSave。
3. 冲突排查：若开启了 ESLint，已安装 eslint-config-prettier 并在规则继承链末尾声明，确认保存时不出现格式冲突报错。
4. 团队门禁保障：可进一步搭配 husky 与 lint-staged 在 git commit 阶段自动拦截未格式化文件，确保所有合入版本库的代码都严格遵循预设风格。