用 Prettier 格式化项目代码 #144
Description
需求描述
依情况而定，可以参考 为什么我不使用 Prettier 这篇文章中的方案，只用 ESLint，不用 Prettier，因为 ESLint 更自由。
为了规范化开发，需要用 Prettier 来格式化项目代码。
安装依赖
参考官方文档 Install 一节，先在项目中安装 prettier： yarn add --dev --exact prettier 。
注意：每个需要使用 Prettier 来格式化代码的项目，都需要安装 prettier 这个库。
忽略列表
在项目根目录下新建一个 .prettierignore 文件，用于记录不需要 Prettier 格式化的文件，该文件的规则和 .gitignore 是一样的。
配置规则
在项目根目录下新建一个 .prettierrc 文件，内容如下：
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"requirePragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": true,
"endOfLine": "auto",
"embeddedLanguageFormatting": "off"
}以上各选项的含义如下：
行宽
"printWidth": 80：使行宽尽量保证在 80 字符以内，不强制，比如长字符串就不会强制折行。
制表符宽度
"tabWidth": 2：制表符宽度为 2 个字符宽度。
缩进方式
"useTabs": false：使用空格而不是 Tab 来缩进。
语句末分号
"semi": false：只在会产生歧义的时候才在语句末尾加分号。
单引号 vs 双引号
"singleQuote": true：尽量只用单引号，不过字符串中同时有单引号和双引号时，会使用数量更少的那个把字符串括起来。
对象属性名的括号
"quoteProps": "as-needed"：只在需要的时候才把对象属性用引号括起来。
JSX 中单引号 vs 双引号
"jsxSingleQuote": false：在 JSX 中使用双引号。
行尾逗号
"trailingComma": "es5"：添加 ES5 中支持的行尾逗号，比如 object, array。
对象大括号内侧空格
"bracketSpacing": true：对象大括号内侧添加空格，比如 { foo: bar }，属性名 foo 和属性值 bar 与相邻的括号间有空格。
JSX 起始标签的尾括号
"jsxBracketSameLine": false：对于 JSX 中同时有起始标签和闭合标签的 HTML 元素，且起始标签有多条属性时，起始标签的尾括号 > 始终独占一行，效果如下所示。
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
箭头函数参数大括号
"arrowParens": "always"：即使箭头函数只有一个参数，也强制用大括号括起来。虽然会多一个括号，但是对提高开发效率和改进代码质量非常有帮助。
格式化起点
"rangeStart": 0：将格式化范围设定为文件起点至当前所选内容的终点，也是 Prettier 的默认值。
格式化终点
"rangeEnd": Infinity：将格式化范围设定为当前所选内容的起点至文件的终点，也是 Prettier 的默认值。
Parser
Prettier 会根据文件自动选择所用的 parser，也建议用户不要手动设置该选项。
Require Pragma
"requirePragma": false：如果该字段的值设置为 true，那么只有当文件的起始内容是以下两种之一时，Prettier 才会格式化该文件：
/**
* @prettier
*/
或者
/**
* @format
*/
当需要对一个大型项目进行渐进式地重构时，这个参数就很有用了。
Insert Pragma
该参数和 requirePragma 参数一起使用时，Prettier 会在已被格式化的文件的开头加上一行 @format。如果文件开头已经有 docblock 了，那么会再添加一个空行（ @format 是在 docblock 之前还是之后？）。
Markdown 换行
"proseWrap": "preserve"：不对 Markdown 进行强制换行，保留原始格式。
HTML 空白字符
"htmlWhitespaceSensitivity": "css"：该参数决定了要如何处理 HTML 中的空白字符。比如 span 元素内的文字两侧有空格，Prettier 根据该参数决定是否要删除。
Vue 的 JS 和 CSS 缩进
"vueIndentScriptAndStyle": true：该参数设置为 true 时，会对 Vue 组件 script 和 style 标签中的内容进行缩进。如果不缩进，可能会破坏代码编辑器的折叠代码段的功能。
换行符
"endOfLine": "auto"：不要求代码统一用 LF 换行，因为 Windows 下用的是 CRLF 换行，如果同时会在 Windows 和 Linux/macOS 下开发，就需要开启该选项。
另外最好在项目根目录下再新建一个 .prettierignore 文件，这样命令行和代码编辑器就都不会格式化不需要格式化的文件。该文件的格式和 gitignore syntax 是一样的。
文件中嵌入其他语言的格式化开关
"embeddedLanguageFormatting": false：比如 JS 文件中的 HTML 模板，或者 Markdown 中的代码，如果将该参数设置为 off，Prettier 就不会视图格式化这样的嵌入代码。
格式化
在终端执行 yarn prettier --write .，Prettier 就会自动将项目代码文件进行格式化。
如果只是需要检查代码是否满足格式化要求，那么执行 yarn prettier --check . 即可，该命令会检查代码文件（不含被 git 和 Prettier 忽略的文件）是否满足格式化要求，并输出检查结果，但不修改代码。该命令可以集成到持续集成（CI）工作流中，以保证项目代码质量。
不过在实际开发中，在终端手动执行命令来格式化代码太不方便了，在 VSCode 中，可以安装 Prettier - Code formatter 这个扩展，扩展的配置也很丰富，可以好好看看。
另外，即使通过 VSCode 扩展来使用 Prettier，也务必要按照前面的流程，在每个项目中都用 npm 或 Yarn 安装 prettier 这个库，扩展才能生效。
搭配 ESLint
ESLint 这样的 Linter 包含两大类规则，一类是用于保证代码质量的，比如 no-unused-vars、no-extra-bind；另一类是用于格式化代码的，比如 max-len、no-mixed-spaces-and-tabs。而 Prettier 也是用于格式化代码的，所以在同时使用 ESLint 和 Prettier 时，ESLint 中格式化代码的规则就有可能和 Prettier 起冲突。
为了解决这个问题，可以使用 eslint-config-prettier 这样的库。这个库的简介就是 Turns off all rules that are unnecessary or might conflict with Prettier，也就是将 ESLint 的规则中和 Prettier 有冲突的部分，以及没必要启用的部分，都给它禁用掉。
终端执行 yarn add --dev eslint-config-prettier 安装这个库，然后在 ESLint 配置文件 .eslintrc.* 的 extends 字段的最后，加上 prettier，这样才能保证覆盖其他配置，扩展才能生效。
{
extends: [
'standard',
'prettier/standard',
'plugin:jest/recommended'，
'prettier'
],
}参考资料
- 官方文档
- Prettier看这一篇就行了：讲了为什么要用 Prettier，它和 ESLint 之类工具的区别，以及如何在项目中使用 Prettier。