Prettier是一款纯粹的代码格式化工具，适用于大部分格式代码（如js、css、html等），它通常用来替代各种linters的formatting部分，可能是因为它各专一，所以表现更佳。

Prettier入门

官方文档传送门：Install · Prettier 中文网

推荐阅读：

• 第一次使用：Install · Prettier
• 了解Prettier的作用：Rationale · Prettier
• 了解Prettier与各种Linters的定位区别：Prettier vs. Linters · Prettier
• Prettier配置文件如何使用：Configuration File · Prettier
• Prettier所有的配置选项：Options · Prettier

Prettier是一款纯粹的Formatting工具，正如它自己所介绍，它不会修改任何代码逻辑

Prettier的第一个要求是输出与格式化前行为完全相同的有效代码。请报告任何Prettier未能遵守这些正确性规则的代码——这是一个需要修复的错误！

一、使用入门

1. 准备工作

第一步，安装依赖

npm install --save-dev --save-exact prettier
# --save-exact的作用就是固定依赖包的版本，有利于版本统一

第二步，在项目（根）目录下，创建配置文件.prettierrc.json

第三步（推荐使用），创建 Prettier 忽略项配置文件.prettierignore，声明在其中的项目将不会被 Prettier格式化

由于我在项目中使用了Stylelint，所以不再需要对css代码文件使用Prettier，把css文件忽略掉

# Ignore all CSS files:
*.css

除此之外，为了能够方便使用npx prettier --write .对所有期望的文件进行Formatting，还可以把不想被格式化的文件写进去

**/node_modules
**/.*
/asset
readme.md
package.json
package-lock.json

2. 排除冲突

第四步，排除潜在的与 linters 的 conflict。如果使用了 ESLint ，请在ESLint中扩展eslint-config-prettier配置文件，它将关闭掉所有ESLint不需要并且可能会与Prettier冲突的规则。如果使用了 Stylelint，请在Stylelint中扩展stylelint-config-prettier配置文件。

3. 使用CLI格式化

第五步，使用CLI进行 Formatting

npx prettier --write .		# 风格化所有文件（不包括.prettierignore中指定的文件）
npx prettier --write src/			# 风格化src目录下的所有文件
npx prettier --write src/main.js	# 风格化指定文件
npx prettier --write **/*.test.js	# 风格化所有.test.js后缀的文件

--write会将所有改变直接写入文件并保存，如果我们不希望直接写入，也可以使用--check参数

npx prettier --check .		

4. 使用IDE插件

第六步，使用VSCdoe插件（保存时自动格式化）。首先安装插件

但是到此并没有结束，VSCode自带默认的格式化程序，我们需要将Prettier修改为默认的格式化程序

扩展：除此之外，VSCode还提供了「换行时自动格式化」、「粘贴时自动格式化」的选择，可以根据自己的需求来勾选！

5. 配置规则

• 完整配置清单及所有默认值：Options · Prettier
• 配置文件的操作指南：Configuration File · Prettier

实际上，Prettier已经内置了很多 Format Rule，无需用户配置已经可以使用了。但是如果我们想修改这些默认配置，可以编辑项目中的.prettierrc.json文件（注意：配置文件有一个前缀点. 缺少的话，配置文件无法生效）

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

如果我们想针对不同的目录下的文件，或者不同的文件，使用不同于项目全局的Format规则，可以使用Configuration File · Prettier，下面给出一个简单示例

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

6. 与EditConfig的关系

如果项目目录中同时存在 Prettier 和 .editorconfig文件，Prettier会将.editorconfig文件中的规则转换为相应的Prettier配置。更多细节请看：Configuration File · EditorConfig

二、Prettier进阶

1. 常用Options

完整清单：Options · Prettier

属性	说明	默认值
printWidth	代码行长度	80
tabWidth	缩进长度	2
tabs	使用tab键作为缩进而非空格键	false
semi	是否在每条语句后面加分号	true
quotes	使用单引号（而不是双引号）	false
trailingComma	尾部逗号的使用策略	“es5”
bracketSpacing	括号间距，默认括号内前后有空格，如{ foo: bar }	true
bracketLine	HTML模板中的括号>是位于行尾 or 新开一行，示例见链接	false
arrowFunctionParentheses	剪头函数参数是否加圆括号	“always”
requirePragma	如果为true，文件需要在顶部加特殊注释，才能被Format	false
embeddedLanguageFormatting	是否Format文件内部的代码	“auto”
singleAttributePerLine	每行只放一个属性（在HTML、Vue、JSX中）	false