你知道怎么在react 中配置ESLint 吗？

怎么在react 中配置 ESLint？

前言

说起 ESLint，想必大家的心情都是比较复杂的，又爱又恨。为啥呢？因为开启 ESLint 之后，它可以在我们写代码的时候，可以帮我们极大程度上按照指定的规则去规范我们的代码，尤其是在项目团队开发的时候（最好是在项目初期就开始使用），这个好处尤其显著。但是他也有一个弊端，在代码还没有写完的时候，他会各种飘红，有的小伙伴看到满屏的飘红就会有点慌了。其实这并不是因为你的代码写错了，因为 ESLint 他是随时检测的，等代码全部都写完就好了。

想必用过react的各位应该都知道，我们之前使用 vue，脚手架是会自动帮我们集成ESLint 让我们去选择的，但是react 没有帮我们集成，所以需要我们自己配置。
那么配置ESLint 我们都需要准备什么呢？

1、下包

npm i eslint -D
或者
yarn add  eslint

2、配置 ESlint

npx eslint --init

然后根据弹出的内容区选择你需要的规范。

1、 你想怎么使用ESLint？

2、 你的项目使用哪个规范？

3、你的项目使用哪个框架开发？

4、你的项目使用 TypeScript 了吗？

5、你的代码在哪里运行？

6、你希望你的配置文件的格式是什么？

7、需要再额外安装一些依赖包

当你的文件栏中出现 .eslintrc.js，就说明安装成了。

接下来就是配置怎么ctrl + s自动修复格式错误。

1. 在vscode中安装eslint插件。

2. 在vscode设置，让eslint插件显示在状态栏
   

勾选之后，vscode底部会出现一个 ESLint 的文字。
就说明配置成功了。

3. 配置 设置工作区设置 --> 自动创建.vscode/settings.json文件，内容如下：（不要配置 用户级别！不要配置 用户级别！不要配置 用户级别！）

一定要选择工作区工作区工作区！！

复制下面配置到文件中就可以啦！

{
    "eslint.run": "onType",
    "eslint.options": {
      "extensions": [".js", ".vue", ".jsx", ".tsx"]
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

恭喜你，配置完成！