前言

官方文档

既然已经有ESLint以及stylelint了，为啥还要有这个prettier呢？
👽 我们都知道，项目团队在研发过程中，必须严格遵循统一的一个代码规范，即便是拥有了ESLint与stylelint的加持，在实际的编码过程中，也还是难免需要借助于插件、三方库来协助规范整个团队的项目开发，因此，我们需要在项目中通过统一提供的编码规则配置方案，由项目自身的开发依赖以及配置方案，完成项目自身的代码规范化自动控制，保证项目在不同的ide、环境，不同的人员手中都是采用的统一的一个配置的！！！

什么是prettier

prettier是一种自用的代码格式化程序，支持有：js、JSX、Vue、Flow等等语言，它删除了原始样式，并确保所有的输出都符合一致的格式！
😕 比如 🈶 👇 1⃣ 个函数：

1
2
3
4
function foo(arg0, arg1, arg2, arg3){
  // ... 此处隐藏代码的实现
}

☝ 针对上述的函数，假如调用foo函数所传递的参数是较为简单的常量或者是变量的话，则一般一行是能够正常展示完整的，但是，如果传递的参数是一个函数的执行结果，而且这个函数原本的实现也比较复杂的话，那么阅读起来就会比较的麻烦了！！如下代码所示：

1
const result = foo(fun1(12, 23), fun2(546, 123), fun3(567, 82), (params0, params1) => {});

☝ 这里对于函数参数的复杂调用，在阅读上则会相对比较麻烦，因此， 🈶 了prettier的加持了之后，就相应的有 👇 的阅读效果：

1
2
3
4
5
6
7
8
const result = foo(
  fun1(12, 23),
  fun2(546, 123),
  fun3(567, 82),
  (params0, params1) => {
    // ... 此处隐藏回调函数的实现体
  }
);

👉 prettier强制使用执行一致的代码样式(也就是不影响原本的AST树结构)！！！

与ESLint的关系

👉 相辅相成

  1. eslint-config-prettier
  2. stylelint-config-prettier

👽 同样地，与原本使用ESLint以及stylelint的类似，通过安装 ☝ 的插件，实现对lint的相关配置工作，使用方式与之前单独的一个个的使用方式一致！！！

如何使用Prettier

1. 在项目中安装prettier服务

1
npm install --save-dev --save-extra prettier

2. 创建一个空的配置文件.prettierrc.json，让编辑器工具知道项目正在使用prettier

1
echo {} > .prettierrc.json

3. 创建对应的忽略文件.prettierignore，让编辑器工具知道项目不需要格式化哪些文件

1
echo '' > .prettierignore

关于这个文件的内容与一般的.gitignore的内容相类似

1
2
3
# 以下是忽略的文件的相关注释
build
coverage

⚠ 如果项目中之前拥有这个.gitignore以及.eslintignore的话，那么新增的这个.prettierignore将基于这两个文件来添加忽略的！

4. 使用prettier格式化非忽略的文件

1
npx prettier --write .
5. 与ide配合工作(vscode)

在实际的项目开发过程中，我们一般是使用ide来配合项目的编码工作的，这里我们以vscode为例

prettier-code formatter官方文档

👉 首先，先安装对应的vscode插件，输入关键词：prettier code format
vscode安装插件

👉 其次，配置全局生效还是部分工作台生效，也就是User Setting与Workspace Setting的区别：
设置vscode生效的范围

👉 然后，一般情况下，由于不同的项目，采用的格式化配置可能不一样，因此，实际项目过程中，不采用全局生效的方式，而是采用与项目相关的配置，也就是在对应的workspace setting中进行相关的配置：
针对项目的vscode的prettier配置

👉 接着，对当前项目需要采用的配置，进行自定义格式化配置，借助于 官方prettier参数配置 进行针对当前项目的自定义格式化配置，一般可以采用在当前项目根目录中创建对应的文件格式，如下图所示：
可支持的prettier文件格式
👇 而对应的prettier配置文件的内容如下所示(根据不同的文件格式，对应 🈶 不同的文件规范内容)：
prettier配置文件内容