.prettierrc有什么作用，怎么书写

.prettierrc 文件是 Prettier 代码格式化工具的配置文件。Prettier 是一个流行的"代码美化器"（code formatter），它能自动格式化代码，使其风格统一，减少团队中因代码风格不同而产生的争论。

.pretierrc 的作用

1. 统一代码风格：强制执行一致的代码格式（缩进、引号、分号、换行等）。
2. 自动化格式化：无需手动调整格式，保存文件或提交代码时自动应用格式。
3. 减少代码审查负担：避免因格式问题而提出修改意见。
4. 支持多种语言：支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种文件类型。

---

如何书写 .prettierrc

.pretierrc 文件可以是多种格式，常见的有：

• .prettierrc.json (JSON 格式)
• .prettierrc.yaml 或 .prettierrc.yml (YAML 格式)
• .prettierrc.js (JavaScript 模块)
• 或直接在 package.json 中使用 prettier 字段

下面以 JSON 格式 为例，展示一个典型的 .prettierrc 文件内容：

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

常用配置项说明

配置项	类型	说明
semi	boolean	是否在语句末尾添加分号，默认 true
singleQuote	boolean	是否使用单引号代替双引号，默认 false
trailingComma	"none" | "es5" | "all"	是否添加尾随逗号，es5 表示在 ES5 兼容的范围内添加
printWidth	number	每行最大字符数，超过则换行，默认 80
tabWidth	number	一个缩进的空格数，默认 2
useTabs	boolean	是否使用 tab 缩进而非空格，默认 false
bracketSpacing	boolean	对象大括号内是否加空格，如 { foo: bar }，默认 true
arrowParens	"avoid" | "always"	箭头函数参数只有一个时是否省略括号，avoid 表示省略
endOfLine	"lf" | "crlf" | "cr" | "auto"	换行符类型，通常设为 "lf"（Unix 风格）

---

示例：.prettierrc.json

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf"
}

其他写法示例

1. YAML 格式 (prettierrc.yaml)

semi: true
singleQuote: true
trailingComma: es5
printWidth: 100
tabWidth: 2

2. JavaScript 模块 (prettierrc.js)

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  tabWidth: 2,
};

3. 在 package.json 中配置

{
  "name": "my-project",
  "version": "1.0.0",
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  }
}

---

使用前提

要使 .pretierrc 生效，你需要：

1. 安装 Prettier：

   npm install --save-dev prettier

2. 在编辑器中安装 Prettier 插件（如 VS Code 的 Prettier 插件）。

3. 配置编辑器保存时自动格式化（可选）。

---

注意事项

• 如果项目中同时存在 .prettierrc 和其他配置文件（如 .editorconfig），Prettier 会以自己的配置为准。
• 推荐团队统一配置，并将 .prettierrc 文件提交到版本控制中。

通过合理配置 .pretierrc，可以让团队代码风格高度一致，提升开发效率和代码可读性。