Prettier 代码格式化工具使用详解

目录

什么是 Prettier？

安装 Prettier

配置 Prettier

使用 Prettier

Prettier配合EditorConfig使用说明

与ESLint对比

---

什么是 Prettier？

借用官方的话来说，Prettier 是一个固执的代码格式化程序，它删除所有原始样式*并确保所有输出的代码符合一致的样式。

所以，Prettier 是一个代码格式化工具，可以在多人协作开发中能让每一行代码保持一致的风格，Prettier 是一种代码风格指南，Prettier 提供了很多的配置项和API，你可以有选择的配置你想要的代码风格，并使用 Prettier 来进行统一格式处理。

Prettier 支持：

• JavaScript（包括实验性功能）
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

安装 Prettier

指令：

npm install --save-dev --save-exact prettier

yarn add --dev --exact prettier

配置 Prettier

创建配置文件，指令：

echo {}> .prettierrc.js

运行命令会生成 .prettierrc.js 文件，如果你的编辑器是 vscode ，那么他会自动读取 .prettierrc.js 文件中的配置，并以此配置来格式化你的代码，具体的配置规则如下：

module.exports = {
    // 每行最多字符数，默认80
    printWidth: 130,
    // 用制表符(tab)不是空格缩进行
    // 如果为true，则取编辑器tabSize值
    // 安装editorconfig编辑器插件并配置文件，则取 editorConfig 文件中设置的值
    // 具体取indent_size或者tab_width，依据indent_style值来决定
    // 如果为false，则取值为tabWidth值，但是有问题，经常需要重启编辑器才生效
    useTabs: false,
    // 指定每个缩进级别的空格数
    tabWidth: 4,
    // 在每条语句的末尾添加一个分号 默认true
    semi: false,
    // 使用单引号代替双引号 默认false
    singleQuote: true,
    // 引用对象中的属性，对象key添加引号方式  as-needed仅在需要时在对象属性周围添加引号
    quoteProps: 'as-needed',
    // 有效的尾随逗号 es5 中有效的尾随逗号(默认) | none 没有逗号 | all 尾随逗号
    trailingComma: 'none',
    // 在对象文字中的括号之间打印空格
    bracketSpacing: true,
    // 决定html元素首元素右侧尖括号(>)是否换行,不包含自闭合元素 false另起一行
    bracketSameLine: false,
    // 箭头函数参数周围包含括号 always有括号(默认) avoid无括号
    arrowParens: 'always',

    // 规定使用哪一种解析器
    // Prettier 会自动从输入文件路径推断解析器，因此您不必更改此设置
    // parser: require("./my-parser")

    // 是否缩进Vue文件中的<script>和<style>标签,
    // 不缩进可以保存缩进级别，但可能破坏编辑器中的代码折叠(默认false)
    vueIndentScriptAndStyle: true,
    // 行尾形式 lf|crlf|cr|auto  默认lf
    endOfLine: 'auto',
}

 常用的配置如上所示，更多细节配置及使用使用方法参见 Prettier 官方文档

同样，你也可以定义不需要被格式化的文件集合，创建 .prettierignore 文件，配置你不需要格式化的文件，具体的配置规则同 .gitignore 文件，因为 .prettierignore 基于 .gitignore 和 .eslintignore，如：

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

到此 Prettier 配置完毕，更多详细配置请参见官方文档。

如果你同时使用 ESLint，请安装 eslint-config-prettier 以使 ESLint 和 Prettier 相互配合。它关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。

使用 Prettier

指令方式：

// 格式化所有文件
npx prettier --write .

// 格式化app目录下的所有文件
prettier --write app/

配合编辑器自动运行： 

在vscode中，首先你应该安装 Prettier 插件，Prettier - Code formatter 插件。

其次，应该定义编辑器的默认格式化程序，如下：

// 为了确保这个扩展被其他你可能已经安装的扩展使用，确保将它设置为你的VS Code设置中的默认格式化器
// 此设置可以针对所有语言或者特定语言进行设置

// 设置编辑器默认格式化器
// 注：设置编辑器默认格式化使用prettier后不影响eslint的正常使用
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 设定特定语言
"[vue]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

如果您想在特定语言上禁用 Prettier，您可以创建一个.prettierignore文件，也可以使用 VS Code 的editor.defaultFormatter设置。 

// 对除 Javascript 之外的所有语言使用 Prettier
{
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
     "editor.defaultFormatter": "<another formatter>" 
  } 
}

// 仅将 Prettier 用于 Javascript
{
   "editor.defaultFormatter": "<another formatter>",
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     // 配置javascript(某一个特定语言的配置) 保存自动格式化     --示例配置
     // "editor.formatOnSave": false,
  } 
}

配置编辑器在保存的时候格式化文件：

// prettier与ESLint不同的一点就在于prettier需要启用编辑器保存自动格式化功能才可用
"editor.formatOnSave": true,

接下来就可以正常使用 Prettier 来格式化你的代码了。

更多编辑器使用配置，代码格式配置请查阅官方文档。

Prettier配合EditorConfig使用说明

如果你不知道什么是editorConfig，或者不知道怎么用，请看EditorConfig 使用详解。

editorconfig 和 prettier 其实是相辅相成的，是互不矛盾的，共同协作来格式化代码。

editorConfig 中 indent_style 控制的是：编辑器使用制表符（tab）缩进，还是空格（space）缩进，控制编辑器的缩进风格。

prettier 中的useTabs 控制的是：是否使用制表符缩进，而不使用空格。

如果使用制表符缩进，即 useTabs 值为 true，如果配置了editorconfig 文件，并安装editorconfig 插件，则编辑器缩进距离取值为 editorconfig 文件配置的值。如果 indent_style = space，则先取 indent_size 的值，如果没有则取 tab_width 的值；如果 indent_style = tab，则先取 tab_width 的值，如果没有则取 indent_size 的值。如果 useTabs 值为 false，则取 prettier 文件中 tabWidth 的值。

如果没有安装editorconfig 插件，则 useTabs 为 true，取值为编辑器 tabSize 值，如果 useTabs 为 false，取值为 tab_width 值。

优先级说明：

editorConfig 的优先级高于编辑器设置的值，前提是编辑器安装了EditorConfig插件。

prettier 中 useTabs 的优先级高于 editorConfig 中的 indent_style。

与ESLint对比

 prettier 与 ESLint/TSLint/stylelint 等相比如何？

Linter 有两类规则：

• 格式规则

例如：max-len、no-mixed-spaces-and-tabs、keyword-spacing、comma-style等。

Prettier 减轻了对这一整类规则的需求！Prettier 将以一致的方式从头开始重新打印整个程序，因此程序员不可能再在那里犯错

• 代码质量规则

例如：no-unused-vars , no-extra-bind , no-implicit-globals , prefer-promise-reject-errors等。

Prettier 对这些规则没有任何帮助。它们也是 linter 提供的最重要的工具，因为它们很可能会捕获您代码中的真正错误！

所以，可以使用Prettier 进行格式化并使用linter来捕获错误。

推荐文章：

使用Prettier统一格式化项目代码