在阅读本篇文章之前请先阅读我的《在 React 项目中集成 ESLint 做代码规范》这篇文章，或者你已经在项目中成功引入了ESLint。
首先我们先来简单了解一下 Perttier 的用途
Perttier 的中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。它和ESLint的区别在于Prettier是一个专注于代码格式化的工具，对代码不做质量检查。使用Prettier在code review时不需要再讨论代码样式，节省了时间与精力。
接下来详细介绍一下 Perttier 的安装配置步骤
步骤一、安装 Perttier
npm install --save-dev --save-exact prettier
npm install --save-dev stylelint-config-prettier
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
1-1
步骤二、使用 ESLint 运行 Perttier
修改项目根目录中的 .eslintrc.js 文件 extends 字段为 extends: ['prettier'] ---（图2-1中的标记1）
项目根目录中的 .eslintrc.js 文件 rules 中添加一项 "prettier/prettier":"error" ---- （图2-1中的标记2）
2-1
步骤三、新建 .prettierrc.js 配置文件
在项目根目录下创建 .prettierrc.js 配置文件，在该文件中可以按照团队偏好自定义配置
点击查看 .prettierrc.js 中的所有配置项 官方文档中的配置项、经过翻译后的网络资源配置项
3-1
3-2
步骤四、在 VsCode 编辑其中安装相应插件
安装如图 4-1 和 4-2 这两个插件后重启编辑器即可。
4-1
4-2
补充：
1、在步骤二中我在 .eslintrc.js 文件中将 extends 字段添加 extends: ['prettier'] ---（图2-1中的标记1）是因为我想要在项目中自定义配置 .prettierrc.js 文件，
而在 eslint-plugin-prettier 提供了另一种使用方法：即在 .eslintrc.js 文件中将 extends 字段添加 extends: ['plugin:prettier/recommended'] --- 这样写的作用是使用 eslint-plugin-prettier 插件中暴露出的推荐的配置如图end-1。
end-1
2、当 Prettier 在项目中集成好并生效后可能会报这样一个错误，如图end-2
end-2
报这个错误的原因是简单：简单来说是换行符的问题在 Windows 和 Linus 下文本文件换行符不一致引起的（点击查看详细原因及解决方案）
在 这里 已经给出了许多解决方案，而在我的项目中，因为团队成员中用的都是 Windows 所以就选用了在 .prettierrc.js 配置 endOfLine: 'auto' 的方案，如图 end-3
end-3
3、在ESLint + Pretter 都配置完成后出现一个奇怪的问题：eslint 提示class类名要使用单引号，但Pretter提示class类名要使用双引号。
尴尬的是我将类名改为单引号Pretter报错，我将class类名改为双引号eslint报错，如下图 end-4
end-4
遇到这种报错情况：
我首先检查了eslint规则中配置了单引号规则： 'jsx-quotes': ['error', 'prefer-single']
其次我检查了pretter也配置了单引号规则：singleQuote: true
eslint 和 pretter 中都是采用的单引号规则，为什么pretter还会报错，要求改为双引号呢。当我检查编辑器也没有错误时，我将问题锁定在pretter上，在我仔细阅读pretter规则配置后发现有这样一条规则 jsxSingleQuote: true, 加上此条配置即可解决当前错误。
注意1：当你在项目中集成 ESLint 和 Perttier 之后团队协作是基本上就可以写出规范一致的代码了，但在项目中往往少不了的还有样式文件，那么如何才能让style样式也规范一下呢，请阅读 《React 项目中引入 Stylelint 做样式表代码规范》
注意2：当你在项目中集成 ESLint 和 Perttier 之后团队协作是基本上就可以写出规范一致的代码了，不过团队中总会有些成员无视这些规则，将不规范的代码提交的远程，如何避免这种操作呢，放心我们有办法阻止这些不规范的代码提交到远程的操作 ---- 请查看《React 项目中引入 Husky 和 Lint-staged》来做 git commit 提交预检查。
参考网址：
Prettier官网： https://prettier.io/docs/en/options.html
https://github.com/prettier/eslint-plugin-prettier#options
https://github.com/prettier/eslint-config-prettier#special-rules
https://www.jianshu.com/p/d6a69eb08f07
https://zhuanlan.zhihu.com/p/87586114
https://segmentfault.com/a/1190000021803437
https://www.cnblogs.com/jiaoshou/p/12004077.html
网友评论