Prettier - 固执己见的代码格式化工具，适用于统一多语言代码风格与提升可读性

Prettier - 固执己见的代码格式化工具，适用于统一多语言代码风格与提升可读性

在多人协作和长期维护的项目中，代码风格的不一致往往是引发无意义争论和低效沟通的根源。有人喜欢用单引号，有人坚持双引号；有人用空格缩进，有人用 Tab；有人习惯在对象末尾加逗号，有人不加。这些看似微小的差异，在合并代码、Code Review 时会消耗大量精力。Prettier 的出现，就是要用“固执己见”的自动化格式化，终结这些争论——它是一个开箱即用的代码格式化工具，支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种语言，能在保存文件或提交代码时自动将代码整理成统一风格，让开发者专注于逻辑实现而非格式细节。

项目基本信息

一、项目介绍

Prettier 是一个“固执己见”（opinionated）的代码格式化工具，它的设计哲学是减少配置、统一风格、自动格式化。与 ESLint 这种可高度定制的代码检查工具不同，Prettier 只关注代码的外观呈现，并通过一套内置规则（如行宽、缩进、引号、分号、逗号位置等）将代码重新排版，确保整个项目的风格完全一致。

核心特性包括：

• 多语言支持：原生支持 JS、TS、JSX、Vue、CSS、SCSS、Less、HTML、JSON、Markdown、YAML 等。
• 零配置开箱即用：默认规则已覆盖大多数场景，无需繁琐配置即可运行。
• 自动格式化：可集成到编辑器保存时自动执行，或与 Git Hook 配合在提交前格式化。
• 与 ESLint 互补：Prettier 负责格式化，ESLint 负责代码质量检查，两者结合效果最佳。
• 高性能：基于流式处理与高效解析器，即使是大型文件也能快速完成格式化。

个人认为，Prettier 的最大价值在于将格式问题从团队讨论中彻底移除，让代码审查更聚焦于逻辑与业务，而不是空格与换行。

二、核心优势

• 开源免费：基于 MIT 许可，可自由用于商业与个人项目。
• 社区支持：拥有活跃的全球社区，插件生态丰富，持续适配新语言与框架。
• 持续更新：紧跟语言特性与编辑器集成，不断优化性能与兼容性。
• 功能丰富：支持忽略文件、自定义单行长度、箭头函数换行等少量可选项。
• 性能优秀：格式化速度快，资源占用低，适合在 CI 中大规模使用。
• 跨团队协作友好：统一风格减少因格式引发的合并冲突与 Review 成本。

三、适用场景

• 团队代码风格统一：无需制定繁琐的格式规范，直接使用 Prettier 默认规则。
• 多语言项目：前端项目中常混杂 JS、CSS、HTML、Markdown，Prettier 可一站式格式化。
• CI/CD 质量门禁：在流水线中检查代码是否已格式化，未格式化则自动修复或阻断提交。
• 编辑器集成：保存时自动格式化，提升开发体验，避免手动调整格式。
• 遗留代码整理：一次性格式化历史代码，提升可读性与维护性。

四、安装教程

Prettier 依赖 Node.js（≥14.0）环境，安装过程简单。

安装步骤（以本地项目为例）：

1. 初始化项目（如果尚未初始化）：

   npm init -y

2. 安装 Prettier 为开发依赖：

   npm install --save-dev prettier

3. 在 package.json 中添加脚本：

   {
     "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
     }
   }

4. 运行格式化：

   npm run format

   检查未格式化文件（不修改）：

   npm run format:check

提示：国内用户可使用淘宝 NPM 镜像加速安装：

npm install --save-dev prettier --registry=https://registry.npmmirror.com

五、使用示例

下面通过一个 JavaScript 示例展示 Prettier 的效果。

原始代码 example.js（格式混乱）：

const obj = {name:"John", age:30, hobbies:["reading","gaming"]}
function greet(name){console.log(`Hello, ${name}!`);}
[1,2,3].forEach(n=>console.log(n))

运行格式化：

npx prettier --write example.js

格式化后代码：

const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "gaming"],
};

function greet(name) {
  console.log(`Hello, ${name}!`);
}

[1, 2, 3].forEach((n) => console.log(n));

可见 Prettier 自动调整了缩进、换行、逗号、括号位置，使代码清晰易读。

与 ESLint 配合使用：
安装桥接插件避免规则冲突：

npm install --save-dev eslint-config-prettier

在 .eslintrc.json 中禁用格式化相关规则：

{
  "extends": ["eslint:recommended", "prettier"]
}

这样 ESLint 专注逻辑检查，Prettier 负责格式，二者互不干扰。

六、常见问题

• 格式化后风格不符合团队习惯：Prettier 可配置项有限，若必须自定义需评估是否真有必要，建议接受默认风格以减少成本。
• 与 ESLint 规则冲突：使用 eslint-config-prettier 关闭 ESLint 的格式化规则。
• 编辑器未自动格式化：安装对应编辑器插件（如 VSCode 的 Prettier Extension）并启用保存时格式化。
• 大文件格式化慢：可分批处理或在 CI 中并行执行。
• 忽略文件未生效：确保 .prettierignore 文件路径与语法正确，支持通配符与目录排除。

七、总结

Prettier 通过固执己见的自动化格式化，让代码风格统一变得毫不费力。它不适合需要极度自定义格式的场景，但在绝大多数团队协作项目中，它能显著降低沟通成本、提升代码可读性，并与 ESLint 形成完美互补。对于希望建立高效开发流程的团队，我建议从项目初始化就引入 Prettier，配合编辑器与 Git Hook 实现“提交即格式化”，让代码始终保持整洁美观。Prettier 已成为现代前端开发的标准配置，掌握它将让你的代码在一致性与可维护性上领先一步。