React 中 环境配置 eslint

大帅子
864 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
大家好,我是大帅子,今天我们来讲一下在React的项目中怎么配置eslint,好了,话不多说,我们直接开始,

1.下包

eslint是为了约束我们的代码规范,养好良好的编程习惯从我做起

npm i eslint

2. 配置eslint的配置文件, 执行eslint的命令

npx eslint --init

3.下面就在黑窗口配置,直接按照流程走

1.第一步: 选第三个

image.png

你想如何使用ESLint?
1.只检查语法
2.检查语法并发现问题
3.检查语法、发现问题和加强代码风格

2. 第二步: 选第三个

image.png

您的项目使用什么类型的模块?
1. JavaScript
2. CommonJs
3. 都不选 (但是都不选就是默认都选中)

3.第三步 选React

image.png

项目里面使用的是哪种框架
1. React
2. Vue.js
3. 一个都不选

4.第四步 选Yes

image.png

这个就是项目中用不用TypeScript

5.第五步 全选

image.png

你的代码要在什么环境下面运行?
1. 浏览器
2. node

第六步 选第一个

image.png

你想如何为你的项目定义一种风格?
1. 使用一种流行的风格
2. 回答关于你的风格的问题

第七步 选Standard

image.png

这就是选择每个风格的名字,就不赘述了

第八步 选 JavaScript

image.png

就是你想把你的配置文件变成什么格式

第九步 选double Yes

image.png

image.png

这个就是你的版本需要降级我们直接yes就行了
下面的是你下面的那个问题解决需要装这一堆包,然后问是不是npm装,我们直接确认

第九步 我们就等待安包

image.png

看到项目里面多了一个这个文件我们就完成了

解决项目报错

1. 工作区配置

image.png

image.png

2.然后会多出一个文件,在settings.json里面配置

image.png

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
  //这句就是当你按下保存时,他会给你格式化
    "source.fixAll.eslint": true
  }
}

3. 检查结果

ctrl+s       会格式化

解决没有链入React 报错

在.eslintrc.js中配置

image.png

 rules: {
    'react/react-in-jsx-scope': 'off'
  }
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅        还需努力!大家一起进步!!!
avatar
文章
阅读
粉丝