1. 安装eslint

npm install eslint --save-dev
// 或者
yarn add eslint --dev

2. 初始化配置文件

npx eslint --init //进入问题配置页面

选择Airbnb会自动安装react相关的插件,包含eslint-plugin-react-hooks。

3.在VSCode的Extensions中安装Eslint

从插件说明中可知这个插件的默认配置文件位置:

它会默认查找当前工作目录下的根文件夹下的.eslintrc.*或者.eslintrc文件。即第2步生成的文件, 按照该文件的配置内容进行代码校验。

4. 错误分析

如果ESLint在VSCode中未起作用。根据上面的步骤分析可知有两个方向错误

1. VSCode未安装ESLint

2. 配置文件有问题

即当前工作目录下的根文件夹下找不到配置文件。

1)配置文件名称错误。如: .essslintrc.js

2)配置文件正确且在当前项目的根文件夹下,但是,当前项目不是当前工作目录。

如图所示,当前工作目录是当前项目的父文件夹,VSCode会到React下查找配置文件,查找失败!

解决该问题的办法:

1)将当前项目作为当前工作目录。

✅推荐使用这种。这样不需要额外配置。

2)修改VSCode中ESLint查找配置文件的位置。

Code->Perference(首选项)->settings(配置)

在配置文件中添加ESLint插件的配置文件路径:

// ❌不推荐使用,这样之后的所有项目都需要重新配置
{
"eslint.options": {"configFile": "/Users/lyralee/Desktop/MyStudy/React/webpackdemo/.eslintrc.js"},
// ...其他的配置
}

5. 细节注意

1. 动态import校验

在React项目中添加ESLint的更多相关文章

  1. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  2. 在vue项目中添加eslint规则

    自己配置脚手架时候如何安装eslint语法规则, 第一步安装 官方推荐的安装包如下 eslint eslint-config-standard eslint-plugin-standard eslin ...

  3. 我是如何在公司项目中使用ESLint来提升代码质量的

    ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...

  4. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  5. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  6. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  7. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  8. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  9. Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作

    Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

随机推荐

  1. Unity中的资源管理

    一.AssetBundle 相关 Q1:Unity中的SerializedFile是怎么产生的?请问用Unload(false)可以清除吗?因为读取了Bundle里面的内容后已经赋值给其他物体了.而且 ...

  2. Linux基本指令与作用

    在Linux操作系统中,有不同于windows的操作,可以用指令来进行操作. 指令 ls:查看文件 ls -a:查看隐藏文件 cd:移动到某个路径之中 clear:清屏rm:删除touch:创建mv: ...

  3. vps配置脚本备个份

    #!/bin/bash apt-get update -y apt-get dist-upgrade -y apt-get install -y nmap vim build-essential gc ...

  4. ubuntu 12 install redis

    ubuntu 12 install redis 今天开始写数据server部分,大家初步的方案是用redis+mysql 所以要安装,下面记录安装的基本过程,留做后续参考 unbuntu 12 已经支 ...

  5. Java实现不遍历数组求和

    package com.jts.t1; /** * 不遍历数组求和 * 方法省略异常检查 */ public class Demo1 { public static void main(String[ ...

  6. m74 考试反思

    这次不叫考试题解,叫做考试反思,为什么折磨说,因为这次犯的错误太多了! 事情还要从昨天晚上说起,昨晚放学,班主任来机房说我被子不合格,要停课反思 ###&&¥%#%¥@#%¥#@……% ...

  7. Scss的使用场景

    一.Scss 1.CSS有几个缺点 语法不够强大,没有变量和合理的样式复用机制 使得逻辑上相关的属性值必须以字面的形式重复输出,难以维护 动态的样式语言为css富裕了动态语言的特性 极大的提高了样式语 ...

  8. Java基础知识之常量变量(一)

    1.什么是变量,什么是常量?java的基本数据类型是什么 变量: 会发生改变的数据,叫做变量,如自定义一个a,并且对a进行赋值操作为1,也可以让a等于2,此时a就是一个变量 常量: 不会发生改变的值, ...

  9. iOS定位--CoreLocation

    一:导入框架 #import <CoreLocation/CoreLocation.h> 二:设置代理及属性 <CLLocationManagerDelegate> @prop ...

  10. 网站搭建 - Linux虚拟系统 - 时间设置 - root密码修改 - 建站

    先试一下,如果不成的话,就不发表了. 下载织梦: 额,这个先还是不要下了. Linux是Apache + MySQL + PHP的套路,先下载吧,不摆图了,直接摆命令,我的是虚拟机,可能没有那么顺利. ...