【Prettier】代码美化工具Prettier快速上手教程

Prettier 暴躁吐槽版：专治代码“邋遢病”

“去他的代码风格自由！老子受够你们这群代码界‘流浪汉’了！”
今天必须把 Prettier 这个暴躁代码整容师拉出来遛遛！

---

一、🤬 代码界的“丐帮大会”

每次看你们写的代码，我血压直接飙到 180！

• 缩进？有人用 2 空格装文艺青年，有人用 4 空格当复古大佬，还有人用 Tab 键当街溜子！
• 引号？单引号双引号跟抽奖似的随机切换，不知道的以为你们在玩俄罗斯轮盘赌！
• 换行？有人把代码写成裹脚布，有人把代码剁成饺子馅，阅读体验比看天书还痛苦！

“这他妈是代码还是行为艺术展？！”
每次合并代码都像在拆炸弹，生怕哪个空格怪突然爆炸！

---

💥 Prettier：代码界的“电击治疗仪”

这玩意儿就是个暴躁代码教官，上来就是三板斧：

1. 缩进统一：管你以前是 2 空格还是 4 空格，现在统统给我站直了！
2. 引号制裁：单引号双引号二选一，再敢乱用直接电到抽搐！
3. 换行规训：每行最多 80 个字符，超过就给我滚去下一行！

“别跟我谈什么‘个人风格’，代码是给人看的还是给狗看的？！”
运行完 Prettier 的代码，就像给邋遢鬼做了全身大扫除——

• 缩进整齐得像军训方阵
• 引号统一得像复制粘贴
• 换行标准得像五线谱

“现在这代码才配叫代码！之前的都是电子垃圾！”

---

🔥 配置？老子就是规矩！

有人问：“能不能留点个性？”
“个性你大爷！代码是团队作战，不是个人时装秀！”

但 Prettier 还算有点人性，允许你改几个参数：

{
  "tabWidth": 2, // 缩进：老子说 2 个空格就是 2 个！
  "singleQuote": true, // 引号：单引号天下第一！
  "semi": false, // 分号：去他妈的分号！
  "trailingComma": "all" // 尾随逗号：多写个逗号能死啊？
}

“再敢问为什么，老子直接给你配置文件里写满脏话！”

---

🤬 编辑器插件：你的电子教鞭

VS Code 用户给我听好了：

1. 装 Prettier 插件
2. 设置保存时自动格式化
3. 再敢手动调格式就剁手！

“别跟我说什么‘我喜欢手动调’，你手动调的格式能比机器准？”
每次保存都像有强迫症患者帮你擦屁股——

• 缩进不对？啪！自动修正！
• 引号错了？啪！瞬间统一！
• 换行乱了？啪！马上归位！

“现在这代码写得跟强迫症晚期似的，但老子喜欢！”

---

💣 Git 钩子：代码提交前的最后通牒

还在担心有人偷偷提交邋遢代码？
“直接上 Git 钩子！提交前必须过 Prettier 这一关！”

1. 装 husky 和 lint-staged
2. 配置 pre-commit 钩子
3. 谁敢提交不符合格式的代码，直接让他改到哭！

“现在合并代码比相亲还安全——至少知道对方代码长得人模狗样！”

---

🤬 常见问题：别拿这些问题烦我！

Q：为什么 Prettier 改了我的代码？
A：因为它觉得你代码丑得像坨屎！

Q：能不能跳过某些文件？
A：能！在 .prettierignore 里写——但最好别用，这是给怂货准备的退路！

Q：和 ESLint 冲突怎么办？
A：装 eslint-config-prettier 插件！两个暴躁老哥不打架，联手收拾你们这群邋遢鬼！”

---

🔥 终极暴躁总结

1. 代码风格必须统一：

   • 缩进？听 Prettier 的！
   • 引号？听 Prettier 的！
   • 换行？听 Prettier 的！

2. 团队必须强制执行：

   • 装插件
   • 配钩子
   • 谁不遵守就踢出团队！

3. 别再问为什么：

   • “代码整洁比天大！”
   • “可读性就是生产力！”
   • “谁再敢写邋遢代码，老子直接顺着网线过去抽他！”

“现在！立刻！马上！去给你的代码做 Prettier 美容！”
“别让我再看到一行不符合规范的代码，否则——”
（掏出 Prettier 配置文件，上面写满各种脏话缩写）

二、为什么需要 Prettier？

1. 避免“代码风格大战”

在团队开发中，每个人都有自己的代码风格偏好。有人喜欢用 2 个空格缩进，有人喜欢用 Tab 缩进；有人喜欢用单引号，有人喜欢用双引号。这就像一场没有硝烟的战争，每个人都在坚持自己的“风格”。

Prettier 一出手，这场“战争”就结束了。它强制团队使用统一的代码风格，让大家不再为代码风格的问题而争吵，可以把更多的精力放在代码逻辑上。

2. 节省时间

手动调整代码格式既费时又容易出错。你可能会因为一个空格、一个换行的问题而纠结半天，浪费了大量的时间。而 Prettier 可以自动完成这些工作，让你有更多的时间去写代码、去实现业务功能。

3. 提高代码可读性

统一的代码风格可以让代码更容易阅读和理解。就像一本书，如果排版整齐、字体统一，你读起来就会很舒服；反之，如果排版混乱、字体大小不一，你读起来就会很费劲。代码也是一样，统一的代码风格可以让其他开发者更容易理解你的代码，提高代码的可维护性。

---

三、Prettier 安装与配置（实战篇）

1. 安装 Prettier

npm install --save-dev --save-exact prettier
# 或使用 yarn
# yarn add --dev --exact prettier

2. 创建配置文件

在项目根目录下创建一个 .prettierrc 文件（支持 JSON、YAML、JS 等格式），以下是一个 JSON 格式的示例配置：

{
  "tabWidth": 2, // 缩进空格数
  "useTabs": false, // 是否使用 Tab 缩进
  "semi": false, // 语句末尾是否加分号
  "singleQuote": true, // 是否使用单引号
  "trailingComma": "all", // 多行时是否使用尾随逗号
  "bracketSpacing": true, // 对象字面量的大括号间是否有空格
  "jsxBracketSameLine": false, // JSX 标签的反尖括号是否换行
  "arrowParens": "always", // 箭头函数参数只有一个时是否加括号
  "printWidth": 80, // 每行代码的最大长度
  "endOfLine": "lf" // 换行符类型
}

3. 创建忽略文件

在项目根目录下创建一个 .prettierignore 文件，用于指定不需要 Prettier 格式化的文件或目录，语法与 .gitignore 类似。例如：

node_modules/
dist/
build/
*.min.js

4. 配置编辑器（VS Code 示例）

1. 安装插件：在 VS Code 的扩展市场中搜索并安装 “Prettier - Code formatter” 插件。
2. 设置默认格式化工具：打开 VS Code 的设置（Ctrl + ,），搜索 “Format On Save”，勾选 “Editor: Format On Save” 选项，这样在保存文件时就会自动格式化代码。还可以搜索 “Default Formatter”，选择 “Prettier - Code formatter” 作为默认格式化工具。
3. 自定义快捷键（可选）：如果你觉得默认的格式化快捷键（Shift + Alt + F）不好用，可以自定义快捷键。打开 VS Code 的键盘快捷方式设置（Ctrl + K Ctrl + S），搜索 “Format Document”，然后设置你喜欢的快捷键。

5. 结合 Git 钩子自动化格式化

为了确保团队成员提交的代码都符合格式规范，可以结合 Git 钩子在提交代码之前自动运行 Prettier 进行格式化。

1. 安装 husky 和 lint-staged：

npm install husky lint-staged --save-dev
# 或使用 yarn
# yarn add husky lint-staged -D

2. 初始化 husky：

npx husky install

3. 在 package.json 中添加以下配置：

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  }
}

4. 创建 Git 钩子：在项目根目录下运行以下命令，创建一个 pre-commit 钩子：

npx husky add .husky/pre-commit "npx lint-staged"

这样，每次提交代码时，lint-staged 只会对暂存区中的文件运行 Prettier 进行格式化，确保提交的代码都符合格式规范。

---

四、常见配置项解释

1. tabWidth（缩进空格数）

• 🚫 错误：

function foo() {
∙∙∙∙console.log('Hello'); // 缩进 4 个空格
}

• ✅ 正确：

function foo() {
∙∙console.log('Hello'); // 缩进 2 个空格（根据配置）
}

• 类比：你写文章，每段开头缩进几个字符，Prettier 帮你统一标准，让文章看起来更整齐。

2. semi（语句末尾是否加分号）

• 🚫 错误：

const a = 1
const b = 2

• ✅ 正确：

const a = 1; // 根据配置决定是否加分号
const b = 2;

• 类比：你写句子，有的句子结尾加句号，有的不加，看起来很奇怪。Prettier 帮你统一，让代码更规范。

3. singleQuote（是否使用单引号）

• 🚫 错误：

const name = "Alice";

• ✅ 正确：

const name = 'Alice'; // 使用单引号（根据配置）

• 类比：你说话，有的用双引号，有的用单引号，别人可能会听不懂。Prettier 帮你统一，让代码更易读。

4. trailingComma（多行时是否使用尾随逗号）

• 🚫 错误：

const obj = {
  name: 'Alice',
  age: 20
};

• ✅ 正确：

const obj = {
  name: 'Alice',
  age: 20, // 添加尾随逗号（根据配置）
};

• 类比：你列清单，有的项目后面加逗号，有的不加，看起来很乱。Prettier 帮你统一，让代码更清晰。

---

五、实际业务场景应用

1. React 项目配置

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "jsxSingleQuote": false, // JSX 属性值使用双引号
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "printWidth": 80,
  "endOfLine": "lf"
}

2. TypeScript 项目配置

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 100, // 适当增加每行代码的最大长度
  "endOfLine": "lf",
  "parser": "typescript" // 指定解析器为 TypeScript
}

3. 自定义规则（业务场景）

假设你有一个业务规则：所有字符串必须使用单引号，但 JSX 属性值必须使用双引号。

在 .prettierrc 文件中配置：

{
  "singleQuote": true,
  "jsxSingleQuote": false
}

---

六、常见问题解决

1. 为什么 Prettier 格式化后的代码不符合我的预期？

• 检查 .prettierrc 配置文件，确保配置项符合你的需求。
• 有些代码结构可能比较复杂，Prettier 的默认规则可能无法满足你的所有需求。这时可以考虑使用 // prettier-ignore 注释来忽略某些代码的格式化。

// prettier-ignore
const obj = {
  name: 'Alice',
  age: 20
}; // 这段代码不会被 Prettier 格式化

2. 如何与 ESLint 集成？

Prettier 和 ESLint 是功能互补的工具，Prettier 主要负责代码格式化，ESLint 主要负责代码质量和风格检查。为了避免两者之间的规则冲突，可以使用以下插件：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev
# 或使用 yarn
# yarn add eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.js 文件中配置：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' // 启用 ESLint 与 Prettier 的集成
  ],
  plugins: ['prettier'],
  rules: {
    // 其他 ESLint 规则
  }
};

3. 如何格式化特定文件或目录？

使用命令行工具可以格式化特定文件或目录。例如：

# 格式化 src 目录下的所有文件
npx prettier --write src/

# 格式化特定文件
npx prettier --write src/index.js

---

七、总结

1. Prettier 的核心作用：
   • 统一代码风格，避免团队“代码风格大战”。
   • 节省手动调整代码格式的时间，提高开发效率。
   • 提高代码可读性和可维护性。
2. 最佳实践配置：
   • 根据项目需求自定义 .prettierrc 配置文件。
   • 创建 .prettierignore 文件忽略不需要格式化的文件。
   • 配置编辑器实现自动格式化。
   • 结合 Git 钩子确保提交的代码都符合格式规范。
3. 实际业务场景：
   • 根据不同的项目类型（React、Vue、TypeScript 等）调整配置。
   • 处理与 ESLint 的规则冲突。
   • 自定义规则满足业务需求。

记住：代码不规范，同事两行泪 😉