前言

官方文档

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

什么是prettier

prettier是一种自用的代码格式化程序,支持有:jsJSXVueFlow等等语言,它删除了原始样式,并确保所有的输出都符合一致的格式!
😕 比如 🈶 👇 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 SettingWorkspace Setting的区别:
设置vscode生效的范围

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

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