怎么在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
自动修复格式错误。
-
在
vscode
中安装eslint
插件。 -
在
vscode
设置,让eslint
插件显示在状态栏
勾选之后,vscode底部会出现一个 ESLint 的文字。 就说明配置成功了。
- 配置 设置工作区设置 --> 自动创建
.vscode/settings.json
文件,内容如下:(不要配置 用户级别!不要配置 用户级别!不要配置 用户级别!)
一定要选择工作区工作区工作区!! 复制下面配置到文件中就可以啦!
{
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".vue", ".jsx", ".tsx"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
恭喜你,配置完成!