怎么在react 中配置 ESLint?

220 阅读2分钟

怎么在react 中配置 ESLint?

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第11天,点击查看活动详情

前言

说起 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 的文字。 就说明配置成功了。

  1. 配置 设置工作区设置 --> 自动创建.vscode/settings.json文件,内容如下:(不要配置 用户级别!不要配置 用户级别!不要配置 用户级别!

在这里插入图片描述 一定要选择工作区工作区工作区!! 在这里插入图片描述 复制下面配置到文件中就可以啦!

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

加粗样式 恭喜你,配置完成!