在这里记录一下 Prettier 的学习与使用。

什么是 Prettier ?

Prettier 是一个用来格式化代码的工具,或者称为包或插件。它的作用就是”格式化代码“,使代码更加整齐、易读。 Prettier 提供了多种使用方式,包括:

  • 命令行工具
  • 在 Nodejs 中使用其 API
  • 在浏览器中使用

一般最常见的就是将其当做命令行工具使用。例如有一个代码文件 xx.js,其内容如下:

const a = {name:'张三',age: 18,
}
const b=a.age+7;

则可以通过命令行将其内容格式化:

npx prettier index.js
## 输出如下
# const a = { name: '张三', age: 18 };
# const b = a.age + 7;

通过 prettier --write index.js 可以直接将源文件格式化。

Prettier 的特点

Prettier 作为一个格式化代码的工具,其特点就是:具有自己的格式化的规则

关于代码的格式化风格,每个团队、每个开发者都有自己的喜好,因此关于代码风格的争论也从未停止。公说公有理,婆说婆有理,到底该听谁的呢?Prettier 就是要终结这些争论:大家既然选择使用 Prettier就默认接受 Prettier 的格式化风格,如果不接受的话就不要使用

即便如此,Prettier 还是提供了一些可以配置项,因为大家对这些配置有着过于强烈的要求,比如:

  • 该使用单引号和双引号
  • 语句的末尾要不要加分号
  • 缩进使用 tab 还是 whitespace
  • 缩进量是 2 还是 4

在实际使用时,我们可以通过配置文件更改这些选项。所幸 Prettier 提供的配置并不多,以后也不打算再增加新的配置项。因此它还是一个具有明显的自我规则的格式化工具。

Prettier 和 ESLint 的区别

Lint 工具中最著名的就是 ESLint 了,其包含的规则分为两部分:

  • 代码格式的规则,例如:
    • 每行代码的最大长度
    • 关键词之间的空格
  • 代码质量的规则,例如:
    • 变量必须先声明后使用

对于代码格式的规则,完全可以使用 Prettier 来代替。而代码质量的规则,Prettier 则无能为力。因此必须借助 ESLint 来做这部分工作。因此,Prettier 专注于格式化代码,而 ESLint 专注于提高代码质量,减少潜在的 bug

Prettier 的使用

前文说过了 Prettier 的几种使用方式。在前端项目中,一般是在命令行中使用 Prettier 。

安装 Prettier

在项目中运行如下命令:

npm install -D prettier 

添加配置文件

项目根目录下新建两个文件:

  • .prettierignore: 无需使用 Prettier 进行代码格式化的文件或者目录名,一般可以保持和 .gitignore 的内容相同
  • prettier.config.js: Prettier 的配置文件,常见配置如下:
        module.exports = {
            // 是否加分号
           semi: true,
           // 是否用单引号
           singleQuote: true,
           // tab健的空格数
            tabWidth: 4,
           // 是否使用tab格式化
            useTabs: false,
        }
    

package.json 中增加格式化脚本

通过在 package.jsonscripts 增加脚本,就可以通过命令行格式化我们的代码文件。这里仅格式化 /src 文件下的文件:

{
  "scripts": {
    "format-all": "prettier --write src/"
  }
}

项目根目录下运行 npm run format-all,即可发现 src 目录下的文件都被重新格式化了。

增加 VSCode 插件和配置

实际使用时,我们如果每次写完代码都去运行格式化命令把代码格式化一遍,那就太麻烦了。所以配合编辑器使用,在保存时自动格式化的功能非常重要。

安装插件

首先在 VSCode 插件中安装如下插件:esbenp.prettier-vscode

添加配置

为了保证运行项目的每个开发者能使用相同的配置,需要给 VSCode 指定 workspace 级别的配置,并将其提交到 git 中。 在项目根目录创建文件 .vscode/settings.json 并添加如下内容:

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

这里我们使用 esbenp.prettier-vscode 插件作为代码的格式化工具,并指定在保存文件时自动格式化代码。

运行完上述步骤,在 VSCode 中编写代码就已经可以使用 Prettier 自动格式化代码了。

不过前端项目一般都会使用 ESLint 做代码检查,因此要配合 ESLint 使用还需要额外的配置。

配合 ESLint 使用

前文说过,ESLint 的规则集中也包括一些代码格式的规则,因此如果在 VSCode 中配置了使用 ESLint 做自动修复,这和 Prettier 就会产生冲突。因此需要使用 eslint-config-prettier 配置,把和 Prettier 冲突的格式化规则禁用掉。

安装 eslint-config-prettier

项目下运行:

npm install -D eslint-config-prettier

修改 ESLint 配置

在 ESLint 配置中增加如下配置:

{
   "extends": [
         "other config",
+       "prettier"
    ]
}

eslint-config-prettier 这个配置就是把所有跟代码格式相关的规则禁用掉,所以一定要保证 "prettier"extends 中的最后位置。这样,在编辑器中ESLint 就不会报关于格式的问题了。

eslint-config-prettier 不仅会禁用 ESLint 默认规则中的格式规则,也会禁用诸如 eslint-plugin-vueeslint-plugin-react 等插件的所有关于格式的规则,因此只需要在 extends 中增加 "prettier" 即可。 在 prettier@8.0.0 之前的版本,可能需要添加 "prettier/vue", "prettier/react" 等配置,在 8.0.0 之后,所有的规则都集中到了一起,所以无需再指定上述配置。

至此,Prettier 就可以在项目中完美运行了!

关于 eslint-plugin-prettier

查阅网络上关于 Prettier 的配置,很多会推荐使用 eslint-plugin-prettier 插件来配合 ESLint 使用。

前文说过,eslint-config-prettier 这个配置会禁用所有关于代码格式的规则,这样一来,代码中的任何格式错误都不会作为 ESLint 错误显示出来。而 eslint-plugin-prettier 这个插件是把 Prettier 的格式化规则加入到 ESLint 规则中,所以使用该插件后格式问题会以 ESLint 错误的方式显示出来。

使用 eslint-plugin-prettier 的缺点就是比只使用 Prettier 慢。

通过 Git hooks 格式化代码

如果有些团队成员并没有配置好代码自动格式化的流程,那么未经格式化的代码就会提交到仓库中,因此我们可以通过 git hooks ,在提交时对要提交的代码进行格式化。

安装 huskylint-staged

安装依赖

npm install --save-dev husky lint-staged
npx husky install

配置 husky

package.json 增加 prepare 脚本:

{
  "scripts": {
+    "prepare": "husky install"
  }
}

然后添加 pre-commit 钩子处理器:

npx husky add .husky/pre-commit "npx lint-staged"

这样在使用 git commit 的时候,就会执行 lint-staged 命令。

配置 lint-staged

lint-staged 这个库可以针对处于 staged 状态的文件执行一些命令。我们在 package.json 中增加以下内容:

{
+    "lint-staged": {
+        "**/*": "prettier --write --ignore-unknown"
+    }
}

这样在执行 npx lint-staged 命令时,lint-staged 就会执行我们设置的 prettier --write --ignore-unknown 命令,对代码进行格式化。

总结

  1. Prettier 是一个格式化代码的工具,使用它我们就不用花费更多精力去选择什么样的代码风格,只需要按照 Prettier 的规则来就好。
  2. 只要代码整齐、整洁、可读性好就够了,没有必要纠结于使用何种代码风格。
  3. 使用 eslint-config-prettier 时配置非常简单,同时比 eslint-plugin-prettier 性能更好。

本文到此结束,欢迎提出问题~