React 项目中添加 ESLint + Perttier 做代码规范

在阅读本篇文章之前请先阅读我的《在 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

https://www.cnblogs.com/victorlyw/p/13589682.html

https://blog.csdn.net/qq_39548647/article/details/105135003?utm_medium=distribute.pc_relevant.none-task-blog-blogcommendfrommachinelearnpai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-blogcommendfrommachinelearnpai2-1.channel_param