23 - Prettier - 格式化程序码工具

制定程序码格式规范对於可读性来说是必须的，如果开发者写程序时都有各自的格式规范，那整个专案的程序码会十分混乱。

另一方面，为了取得开发者们对於格式的一致认同，我们必须花许多时间在讨论与 review 这些格式规范上，进而浪费许多宝贵的开发时间。

不需要自己设定的格式化工具 - Prettier

Prettier 会帮助我们自动地格式化档案内容，藉以减少在开发时还需自己手动格式化的麻烦。

Prettier 以自己认为的最适解产生出一套格式规范，这个规范是预设的，要修改必须明确设定於配置档上，这样的设计是希望开发者们采用预设的规范，来减少对於格式规范讨论所花费的时间。

Prettier 是一个 npm 套件，在执行 CLI 指令後使用配置档中的设定对於指定档案进行格式化。

Prettier 支援的语言十分丰富，有 JavaScript 、 CSS 、 HTML 与 Markdown 等（支援的语言列表请参照 What is Prettier?），如果使用插件扩充，则可以支援更多其他的语言（插件列表请参照 Plugins ）。

Prettier 是个 npm 套件，要先安装：

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

由於 Prettier 的每个 release 版本都会对格式化的方式进行变动，因此要使用 --save-exact 避免更新版本。

要变更格式化规则时可以在专案根目录中建立配置档 .prettierrc.js ：

module.exports = {
  singleQuote: true,
  htmlWhitespaceSensitivity: 'strict',
};

将不需要格式化的档案或是目录加入 .prettierignore 中：

package-lock.json

都设定完成後执行 Prettier 指令做格式化的动作：

npx prettier --write .

这个指令会将当前目录与其子目录中所有 Prettier 支援的档案做格式化。

prettier 有多个指令，其中常用的指令有 --write 与 --check 。

指令 --write 会执行格式化後直接复写档案，通常会在开发时与要 commit 前使用。

指令 --check 会执行格式是否与规范一致，不会做复写的动作，通常是在 CI 检查程序码时使用。

针对指令的目标档案的设定可以使用档名、目录名与 glob ，其判断方式与顺序如下：

Prettier 预设规范，不需要自行设定。

但如果想要修改预设规则时， Prettier 提供许多规则供使用者配置。

配置的方式有配置档与 CLI 参数两种。

Prettier 使用 cosmiconfig 处理配置档，有多种配置格式可以选择，使用者可以依照专案的习惯做设定。

每个规则设定都是一对规则名称与设定值组合而成，以例子来说：

module.exports = {
  singleQuote: true,
  htmlWhitespaceSensitivity: 'strict',
};

singleQuote 与 htmlWhitespaceSensitivity 为规则名称， true 与 'strict' 为设定值。

在执行 prettier 指令时，以参数带入各个规则设定：

prettier --single-quote --html-whitespace-sensitivity strict --write .

范例中设定 --single-quote 与 --html-whitespace-sensitivity 参数以改变预设的格式规范。

Prettier 预设不会处理 node_modules 目录下的档案，如果要将其他的档案或是目录排除的话，可以在专案的根目录下建立名为 .prettierignore 档案：

package-lock.json

.prettierignore 采用 gitignore 设定方式。

如果想要格式化 node_modules 目录的内容，可以使用 --with-node-modules CLI 参数。

在 VS Code 中使用 Prettier 时，先安装 Prettier 插件：

code --install-extension esbenp.prettier-vscode

接着需要调整 Visual Studio Code 的设定，启动储存时自动格式化与将 Prettier 设为预设的格式化工具：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

设定完成後，每次储存时， Visual Studio Code 都会依照专案中的 .prettierrc.js 设定启动 Prettier 格式化档案内容。

为了让每次新开此专案的使用者都可以使用到 Prettier ，我们可以将设定配置在 .vscode 目录中。

首先，我们需要纪录要安装的插件，在 .vscode/extensions.json 中：

{
  "recommendations": ["esbenp.prettier-vscode"]
}

另外相关的设定也可以在 .vscode/settings.json 中纪录：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样一来，开启此专案的新使用者就可以使用插件推荐清单安装 Prettier ，并将相关的配置做设定。

每个人对於程序码格式都有自己的偏好与习惯，如果格式不统一的话，可读性会降低，而要统一格式又要花大量的时间讨论，使开发的量能减弱。
Prettier 作为一个程序码格式化工具，它预设了一套最适解的格式规范，使用者不用去讨论各种格式相关的规范，只要使用 Prettier 即可达成格式化的目的。
除了预设规范，使用者也可以藉由配置自行修改规则，并加上 .prettierignore 排除不需格式化的档案。
设定完成後使用 npm 安装 Prettier ，并使用 CLI 指令即可对程序码做格式化的处理。
Prettier 专注在格式化的作业上，给予使用者轻松格式化多种程序码的能力，是个能使开发效率增加的便利工具。
使用 VS Code 的 Prettier 插件，可以在储存时启动 Prettier 执行格式化。