1、Prettier 概述

• 官网：https://prettier.io/
• 中文网：https://prettier.nodejs.cn/

1.1、什么是 Prettier

• 🎨 有态度的代码格式化器
• 🌐 支持多种编程语言
• 🔌 与主流编辑器无缝集成
• ⚙️ 极简配置选项

1.2、为什么使用 Prettier

• ⚡ 保存时自动格式化代码
• 👥 消除代码审查中的风格争议
• ⏱️ 显著节省开发时间和精力

1.3、Prettier 关心的是什么

格式化重点：正确性、字符串处理、空行管理、多行对象、装饰器、模板字面量、分号使用、打印宽度、JSX 语法、注释处理

💡 Prettier 仅负责代码格式化，不改变代码逻辑，以此保持工具职责的纯粹性

2、使用指南 🚀

2.1、安装 prettier 插件

npm install -D prettier

2.2、安装 VS Code 插件

• 插件名称：Prettier - Code formatter
• 🔄 迁移说明：正从 esbenp.prettier-vscode 迁移至 prettier.prettier-vscode
• ✅ 推荐：在插件市场搜索 prettier.prettier-vscode 安装
• ⚠️ 注意：当前仍使用 esbenp.prettier-vscode，未来将弃用

2.3、推荐 Vs Code 配置

使用用户配置或工作区配置（.vscode\settings.json）都可以

配置项	功能说明	推荐值
editor.formatOnSave	保存时自动格式化	true
files.autoSave	编辑器失焦时自动保存	"onFocusChange"
editor.defaultFormatter	设置默认格式化程序	"esbenp.prettier-vscode"

{
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

2.4、配置 npm 脚本

"format": "prettier --write src/**/*.{js,ts,vue,jsx,tsx}"

📝 注：src/**/*.{js,ts,vue,jsx,tsx} 指定格式化范围，可根据需要调整或省略

运行 npm run format 即可格式化项目文件

3、配置清单

3.1、配置文件

此处仅列举个人喜好的方式配置 Prettier（按优先顺序）：

1. package.json文件中的prettier键
2. 以JSON编写的.prettierrc文件
3. 使用export default导出对象的prettier.config.js或prettier.config.mjs
4. 使用module.exports导出对象的prettier.config.cjs

---

💡 进阶技巧：使用可共享配置

安装已发布的配置npm install -D @xxxx/prettier-config

然后，你可以在package.json中引用它，"prettier": "@xxxx/prettier-config"

扩展可共享配置示例

import xxxxPrettierConfig from "@xxxx/prettier-config";

/**
 * @type {import("prettier").Config}
 */
const config = {
  ...xxxxPrettierConfig,
  semi: false,
};

export default config;

3.2、忽略文件

使用.prettierignore忽略（即不重新格式化）文件和文件夹

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

3.3、常用选项

选项	说明	类型
printWidth	行最大宽度	number
tabWidth	缩进空格数	number
useTabs	使用制表符缩进	boolean
semi	语句末尾分号	boolean
singleQuote	使用单引号	boolean
arrowParens	箭头函数参数括号	"avoid"｜"always"

📖 完整选项参考：https://prettier.nodejs.cn/docs/options

---

✨ 推荐配置方案

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid"
}

4、总结 🎯

Prettier 通过强制统一的代码风格，显著提升团队协作效率和代码质量。其"有态度"的设计理念减少了配置负担，让开发者更专注于业务逻辑而非代码格式争论。

使用流程：安装 → 配置 → 自动化格式化 → 享受整洁代码

核心价值：

• ✅ 消除代码风格争议
• ✅ 提升开发效率
• ✅ 保持代码一致性
• ✅ 减少审阅时间成本