📝 课前小测

题目：团队开发中，每个人写代码风格不同。有人用双引号，有人用单引号；有人每行80字符换行，有人写200字符不换行。以下哪个工具可以统一代码风格？

A. Git B. npm C. Prettier D. Chrome DevTools

（答案在文章末尾～）

第5篇：代码格式化工具——Prettier

💡 学习目标：理解 Prettier 的作用和配置方法，学会在 VS Code 中集成自动格式化。

一、代码风格不统一会带来什么问题？

看这两段代码，功能完全一样：

混乱风格：

const name="小明";let age=18;const arr=[1,2,3];
if(age>=18){console.log("成年人")}else{console.log("未成年")};

统一风格：

const name = '小明';
let age = 18;
const arr = [1, 2, 3];

if (age >= 18) {
    console.log('成年人');
} else {
    console.log('未成年');
}

功能相同，但混乱风格看起来头疼、容易引发 Git 冲突（每个人的格式改动都被当成”修改”）。

Prettier 就是来解决这个问题的。 它是一个”固执己见”的代码格式化工具——你配置一次规则，它自动把代码整理成统一风格，不需要手动调整。

二、Prettier 的核心配置项

Prettier 通过配置文件来控制格式化规则。在项目根目录创建 .prettierrc 文件：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

各配置项含义：

三、安装 Prettier

🔧 全局安装（推荐）：

npm install -g prettier

# 验证
prettier --version

🔧 在项目中安装：

npm install --save-dev prettier

四、基本用法

格式化单个文件：

prettier --write src/index.js

--write 参数表示直接修改文件（不加只预览）。

格式化整个项目：

# 格式化 src 目录下所有 .js 和 .jsx 文件
prettier --write "src/**/*.{js,jsx}"

只检查，不修改：

prettier --check src/index.js

--check 检查文件是否符合格式，不符合则报错，但不修改。常用于 CI/CD 流程中检查代码格式是否合规。

五、在VS Code中使用Prettier

🔧 方式一：安装VS Code插件

1. 点击左侧 **🧩 插件图标**

2. 搜索 **Prettier**（作者：Prettier）

3. 点击 **Install**

安装后：

• 按 `Shift + Alt + F`（Windows）或 `Shift + Option + F`（Mac）格式化当前文件

• 右键 → **Format Document** 格式化整个文件

🔧 方式二：设为默认格式化工具

1. 按 `Ctrl + Shift + P`（或 `Cmd + Shift + P`）

2. 输入 **”Format Document With”**

3. 选择 **”Configure Default Formatter”**

4. 选择 **”Prettier”**

以后按 Shift + Alt + F 就会自动用 Prettier 格式化了。

🔧 方式三：保存自动格式化（最推荐）

设置保存文件时自动格式化：

1. 按 `Ctrl + ,`（或 `Cmd + ,`）打开 VS Code 设置

2. 搜索 **”Format On Save”**

3. 勾选 **☑ Editor: Format On Save**

以后每次 Ctrl + S 保存文件，Prettier 自动帮你整理格式——不需要任何额外操作，代码始终保持整洁。

六、忽略不需要格式化的文件

有些内容不需要格式化（如第三方库的代码），在 .prettierignore 文件里声明：

node_modules/
dist/
*.min.js

七、格式化前后对比

格式化前：

const name="小明";let age=18;const arr=[1,2,3];
if(age>=18){console.log("成年人")}else{console.log("未成年")};

Prettier 格式化后：

const name = '小明';
let age = 18;
const arr = [1, 2, 3];

if (age >= 18) {
    console.log('成年人');
} else {
    console.log('未成年');
}

格式化后代码结构清晰、层次分明。团队成员提交的都是统一格式，Git 看差异时更容易聚焦在真正的逻辑改动上，而不是一堆”空格 vs 缩进”的无意义冲突。

八、和 ESLint 一起使用

有些项目同时用了 Prettier（格式化）和 ESLint（代码检查），两者规则可能冲突。解决方案：

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

在 ESLint 配置文件中添加：

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

eslint-config-prettier 会关闭所有和 Prettier 冲突的 ESLint 规则，让两个工具和平共处。

九、本篇总结

✅ Prettier = 代码格式化工具，统一团队代码风格
✅ 核心配置：printWidth（行宽）、tabWidth（缩进）、singleQuote（引号）
✅ VS Code 插件安装后 Shift+Alt+F 格式化，勾选 Format On Save 保存自动格式化
✅ .prettierignore 声明不需要格式化的文件
✅ eslint-config-prettier 解决 Prettier 和 ESLint 的规则冲突

本篇新学命令：

*下篇预告：前端构建利器——Vite，毫秒级启动、热更新，开发体验质的飞跃！*

📝 学完了，来检验一下成果吧！

1. Prettier 的主要作用是？

A. 检查 JavaScript 代码中的语法错误 B. 压缩代码体积，减少文件大小 C. 统一代码格式风格，让混乱代码自动变得整洁 D. 管理项目依赖的安装和卸载

2. 保存文件时自动格式化，应该在 VS Code 中勾选哪个选项？

A. Auto Save B. Format On Save C. Minimap D. Word Wrap

3. .prettierignore 文件的作用是？

A. 配置 Prettier 的格式化规则 B. 设置代码缩进宽度 C. 声明哪些文件或文件夹不需要格式化 D. 定义代码检查规则

答案：C, B, C

解析：

1. Prettier 是代码格式化工具，作用是将代码整理成统一、整洁的风格，不管代码的逻辑是否正确。检查语法错误是 ESLint 的工作，压缩代码是 UglifyJS/Terser 的工作，管理依赖是 npm 的工作。

2. Format On Save（保存时格式化）勾选后，每次 `Ctrl+S` 保存文件会自动运行 Prettier。Auto Save 是自动保存（隔一段时间自动保存，不需要按 Ctrl+S），和格式化无关。

3. `.prettierignore` 的写法类似 `.gitignore`，列出不需要格式化的文件或文件夹路径，如 `node_modules/`、`dist/`、`*.min.js` 等。** 配置格式化规则要用 `.prettierrc` 文件。