格式化规则

专栏所有代码地址：github.com/Sunny-117/j...

作为一个格式化代码的工具，最最重要的就是格式化依据的规则是什么？以及如何配置这些规则。

在官网的 prettier.io/docs/en/opt... 页面就可以看到所有的格式化规则。

这些规则虽然很重要，但是本身来讲都很简单，只要会看一个，其他的也就都会了。

例如下面是 prettier 里面其中的一条规则，主要需要学会看规则说明以及下面的表：

那么多规则不可能挨着挨着去过一遍，一般来讲，了解一些常用的规则，之后另外一些规则用到了自然也就会了。和当初学习编程语言关键字非常类似，用到一个自然就会记住一个。

行宽：Prettier 默认将行宽限制在 80 个字符。如果一行代码超过这个长度，Prettier 会自动进行换行。你可以通过 printWidth 配置项自定义行宽。
缩进：Prettier 默认使用 2 个空格进行缩进。你可以通过 tabWidth 和 useTabs 配置项自定义缩进宽度和是否使用制表符（tab）。
分号：Prettier 默认在每个语句结尾添加分号。你可以通过 semi 配置项选择是否强制添加分号。
引号：Prettier 默认使用双引号。你可以通过 singleQuote 配置项自定义引号类型。
尾随逗号：Prettier 默认在多行结构（如对象字面量和数组字面量）的最后一个元素后添加尾随逗号。你可以通过 trailingComma 配置项自定义尾随逗号的使用。
括号空格：Prettier 默认在括号内添加空格。例如，{ foo: bar }。你可以通过 bracketSpacing 配置项自定义括号内的空格。
箭头函数参数括号：Prettier 默认在箭头函数只有一个参数时省略参数括号。你可以通过 arrowParens 配置项自定义箭头函数参数括号的使用。
HTML 属性换行：Prettier 会在 HTML 标签的属性超过 printWidth 时进行换行。你可以通过 htmlWhitespaceSensitivity 配置项自定义换行策略。
JSX 标签闭合：Prettier 默认将没有子元素的 JSX 标签闭合。例如，<br />。你可以通过 jsxBracketSameLine 配置项自定义 JSX 标签闭合的风格。

注意这些规则是 prettier 默认规则，也是行业内的最佳实践标准，因此我们平时在书写代码的时候，就应该主动的按照这些规则去规范书写我们的代码。

配置文件

配置文件的作用是做规则自定义。在 prettier 里面实际上提供了多种配置方式，并且多种配置方式之间会有一个优先级。

接下来我们来看一下究竟有哪些配置方式（优先级从高到低）

命令行选项：在 package.json 中配置 script 脚本命令的时候，是可以添加配置参数的

js 复制代码

"format": "prettier --no-semi --print-width 50 --write ."

这种命令行的配置方式优先级是最高的，但是这种方式仅限于自定义一两条规则，如果需要自定义规则比较多，那么还是推荐使用单独的配置文件。

文件中配置：这种方式就是单独创建一个配置文件，这里支持的配置文件的格式实际上是比较多。例如 .prettierrc、.prettierrc.json、.prettierrc.yaml、.prettierrc.yml、.prettierrc.js 或 prettier.config.js 。Prettier 会自动识别并应用这些文件中的配置。在这些文件里面，一般就是一个对象

js 复制代码

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 80,
  "trailingComma": "es5"
}

正常情况下，一个项目中写一个配置文件就可以了，但是如果不小心有多个配置文件，那么确实也涉及到一个优先级问题。优先级顺序如下（由高到低）：

.prettierrc.js 或 prettier.config.js
.prettierrc.yaml 或 .prettierrc.yml
.prettierrc.json
.prettierrc

在 pacakge.json 中进行配置：可以在 package.json 文件中添加一个配置选项 prettier，然后进行配置

js 复制代码

{
    "name": "my-project",
    "version": "1.0.0",
    "prettier": {
      "singleQuote": true,
      "tabWidth": 4
    }
 }

编辑器配置：许多代码编辑器可以安装和 prettier 相关的插件，之后可以在编辑器的 settings > extensions 里面进行配置
prettier 默认配置：默认配置一般优先级是最低，但是却是最常用的，因为这套配置已经是行业最佳实践了。

有点类似于 .gitignore，prettier 也支持 .prettierignore，用来排出一些文件或者目录，也就是说，出现在 .prettierignore 里面的文件或者目录不会被 prettier 进行处理。

例如：

js 复制代码

# 忽略所有的 .min.js 文件
*.min.js

# 忽略整个 build 目录
/build/

# 忽略 node_modules 目录
node_modules/

# 忽略特定文件
my-special-file.js

关于 .prettierignore 里面具体的路径写法，可以参阅 .gitignore 的写法：git-scm.com/docs/gitign...

命令行工具

在最初的时候，我们在 pacakge.json 里面做了一个命令行的配置：

js 复制代码

"scripts": {
    //...
    "format": "prettier --write ."
},

关于 prettier 究竟支持哪些 CLI 命令，我们可以在官网中看到：prettier.io/docs/en/cli...

关于 CLI 命令有一个最基本的格式：

js 复制代码

prettier [options] [file/dir/glob ...]

options: 格式化的选项
file/dir/glob：要格式化的文件或者目录

接下来我们来看一下在第一节课写的命令：

prettier --write .

--write 就是配置选项，本来 prettier 格式化完成后是在控制台输出的， --write 代表写入到原本的文件，--write 还有一个别名就是 -w
. 是第二个参数，代表的是要格式化的路径，正常情况下你可以写一个文件或者写一个目录，例如
bash 复制代码
```
prettier --write file.js # 只格式化 file.js 这个文件
prettier -w "src/**/*.js" # 格式化 src 目录下面的所有的 js 文件（包含 src 下面的子目录）
```
上面的 . 表示当前目录以及子目录下所有支持的文件，全部格式化之后写回原来的文件。

接下来介绍一些常见的 options

--check：该配置参数用于检查文件是否已经按照 prettier 规则进行了格式化，如果匹配的路径下面的所支持的文件已经全部被格式化，那么会输出 All matched files use Prettier code style!，否则会显示哪些文件还没有被 prettier 格式化
--find-config-path and --config：指定配置文件的路径，正常情况下，prettier 会自动去找项目下面的配置文件。但是如果你的配置文件不在项目中，而是在其他的位置，那么这个也是可以指定的

bash 复制代码

prettier --config ~/configs/prettier.json --write .

--no-config: 不读取任何配置文件，直接使用 prettier 里面默认的配置。
--ignore-path：指定忽略文件的路径，正常情况下也是在当前项目中去寻找，但是如果你的忽略文件不在项目中，而是在其他位置，也是可以指定的

bash 复制代码

prettier --ignore-path ~/configs/ignore/.prettierignore --write .

规则的配置：上一节课介绍了的 prettier 所有的规则都可以在 CLI 命令里面进行配置的。不过这种只适用于单独的一两个规则，如果你的规则比较多还是应该单独拿一个配置文件来配置规则。

Day4【代码规范】格式化规则和命令行工具

格式化规则

配置文件

命令行工具