cd进入我们自己的项目目录里面之后，给项目安装eslint

执行以下命令以后初始化 .eslintrc.js 文件。

执行上述命令以后，你会在自己的项目里面看到eslintrc.js文件

当你添加了 rule 以后,打开你的 .ts 文件

'semi': ["error", "always"]

上述标红的地方报错了，就是要你加上封号的意思。你按 ctrl+S 保存，自动帮你添加封号。

当然，你可以在rules里面添加其他的校验规则。比如缩进，对象换行，箭头函数等等。（其他的配置项目你可以移动到附件查看，我已经将所有文档的里面规则翻译了。）

安装一些eslint的插件，方便 react 的检查，不必须。 eslint-plugin-import插件 没有必要就不要安装了，更具需要走。

npm install -D eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

插件说明：

你需要的 plugin 如下：

我们在 vscode 上，下载了 eslint 插件，在项目里面安装了 eslint包，目的就是要 vscode 上的 eslint 插件能够按照 .eslintrc 的配置规则，实时监控我们的代码。

所以要记得在 vscode 的 setting.json 里面打开监控：

eslint.validate 用来检测文件

下面的都是用来 fix 代码的。

按照上述的配置结果就是，当你的文件报错了以后，你直接点击保存，vscode 会将你的文件格式错误自动格式化。不信你试试看呃。当你集成了prettier就不要再配置格式化文件的配置项。后面集成prettier会说这个问题。

在package.json里面增加一个脚本命令

添加完这个命令以后我们就可以对改项目进行eslint管理了 具体执行命令如下：

现在的项目一般都是提交到Gitgub或者Gitlab上管理，我们在提交Git的时候需要对项目进行校验，如果校验不通过，那么就不能进行commit操作，那么此时就需要一个插件叫做pre-commit。该插件的作用就是执行git commit -m "fix:xxxx"的时候先去校验代码是否符合规范，符合则继续commit，不符合则不提交，告诉你哪里有问题需要你去修改。

执行完上述命令以后我们需要在package.json文件里面配置一条信息

为什么使用 prettier？ `

Prettier 是一个“有主见”的代码格式化工具，支持列表如下：

简而言之，这个工具能够使输出代码保持风格一致。

ESLint 是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。

Prettier 它是代码格式化工具，用来做代码格式化，有了Prettier之后，它能去掉原始的代码风格，确保团队的代码使用统一相同的格式，修复规则可自定义。

注意： 好多博客上面把eslint和prettier混在一起并没有分开，导致一些经典问题（我要求每一行代码后面都要有封号，但是却要求我去掉，不管我怎么配置prettier的属性都没有效果。那就有必要继续向下看。）

npm i prettier -g

安装 eslint和prettier 的相关插件

npm i eslint-plugin-prettier -D

有了这个配置文件，再执行lint命令，eslint会按照这个prettier配置文件格式化我们的文件。

到这里，我们的项目中的eslint + prettier 的规则配置基本就完成了。

但是，当我们新增一个文件，需要对新写的代码进行格式化的时候，每次都要执行一下lint命令，这样也太不方便了，我们就希望在保存文件的时候，编辑器可以帮我们做格式化的事情。

此时我们把eslint用来fix的全部删除了，然后在VScode的settings里面配置用 prettier 来 fix 代码。

首先我们要在vscode上安装eslint插件，并且在vscode的setting.json配置文件里面配置相关检查信息，比如空格几个，对js和ts有没有修饰，具体的配置文件信息如下：

我们可以更具项目的需要增减eslintrc里面的配置信息，具体的配置需要到eslint的官网上面查看。