10.4 Prettier

ESLint 可以制定规范和检查规范。当开发人员完成某一个功能时，在终端执行 eslint 命令检查代码，如果看到控制台有异常提醒，则修复异常后再继续进行开发。

如果配置的编码规范比较严格，比如字符串必须单引号，缩进必须是 2 个 tab 且不可以用空格。像这种很细节的规范在发过程中常常碰到，这个时候控制台就会频繁报错，开发人员也要频繁地修复，长此以往会非常繁琐。

正因为如此，在脚手架生成的项目中虽然默认都开启了 ESLint，但是很多人使用不久后就会觉得麻烦，效率低下，所以都手动关闭了 ESLint。

那么，有没有更高效的方法，让大家可以更快速地修复不规范的代码呢？当然有，它就是本节的主角 ——— Prettier。

Prettier 是当前最流行的代码格式化工具。上面我们用 ESLint 定制了编码规范，当检测到不规范的代码时，需要根据提示手动修复。而 Prettier 则帮我们完全省掉了这一步，它会将不规范的代码一键自动修改为完全符合规范的代码。

下面我们从零开始在项目中接入 Prettier。

10.4.1 安装与配置

首先在项目下安装 Prettier：

$ yarn add -D prettier

然后创建配置文件 “.prettierrc.json” 并写入以下配置：

{
  "singleQuote": true,
  "semi": true
}

该配置与 ESLint 下的 rules 配置作用一致，就是定义代码规范 ——— 没错，Prettier 也支持自定义规范，它会按照配置文件中的规范格式化代码。

Prettier 中常用的代码规范配置选项如下：

{
  "singleQuote": true, // 是否单引号
  "semi": false, // 声明结尾使用分号(默认true)
  "printWidth": 100, // 一行的字符数，超过会换行（默认80）
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": true, // 是否使用tab进行缩进（默认false）
  "trailingComma": "all", // 多行使用拖尾逗号（默认none）
  "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
}

当然配置选项不止这些，这里只列出了代表性的几个。全部配置项请查阅文档（https://prettier.io/docs/en/options.html）。

Prettier 还支持针对不同后缀的文件设置不同的代码规范，在配置文件中设置 overrides 选项来实现，如下：

{
  "semi": false,
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.json"],
      "options": {
        "parser": "json-stringify"
      }
    }
  ]
}

上述配置生效后，格式化 .js 文件和 .json 文件时会使用不同的规则，像这样有条件的格式化更加灵活。

10.4.2 格式化代码

定义好配置后，我们来测试格式化效果。创建 “index.js” 文件并写入以下内容：

const a = "13";
function add() {
  return "1";
}

保存后，在终端运行格式化命令：

$ npx prettier --write index.js

格式化之后，再看 index.js 文件变成了这样：

const a = "13";
function add() {
  return "1";
}

看到变化了吧，双引号自动变成了单引号，行结尾自动加了分号，刚好与配置文件中定义的规范一致。

除了格式化单个文件，Prettier 当然也支持批量格式化文件。批量格式化通过模糊匹配查找文件，比较常用，建议定义在 script 脚本中，如下：

// package.json
"scripts": {
  "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\"",
}

此时批量格式化 src 目录下的所有脚本文件，执行命令 “yarn run format” 即可。

注意：如果项目中同时使用 ESLint 和 Prettier，请确保它们各自的配置文件中定义了相同的规范。如果不一致，在 Prettier 格式化代码后，ESLint 会提示规范错误，这样造成了规范冲突。