用 Prettier 格式化项目代码

[Dream4ever]

需求描述

依情况而定，可以参考 为什么我不使用 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。