在React项目中添加ESLint

1. 安装eslint

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

2. 初始化配置文件

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

完成后,添加react-hook的eslint插件

npm install eslint-plugin-react-hooks --save-dev
// 或者
yarn add eslint-plugin-react-hooks --dev

并且在配置文件中添加配置项:

// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

3.在VSCode的Extensions中安装Eslint

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

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

3. 错误分析

如果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"},
   // ...其他的配置
}

原文地址:https://www.cnblogs.com/lyraLee/p/11982208.html

时间: 2024-09-29 03:36:09

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

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

并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScript,顾名思义该方法是项目使用typescript时的配置 方法二.使用babel-preset-mobx, 安装并添加到.babelrc配置中,该方法需要升级一些依赖, babel-core -> @/babel-core 7.x babel-loader -> @/babel-loader 8.

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

前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节项目的基础上做了一些修改, 添加React相关依赖:react.react-dom.@types/react 和@types/react-dom 修改Webpack配置文件 修改webpack.base.config.js,其余文件和第二小节保持一致,修改如下: const HtmlWebpackP

在SSH2项目中添加JBPM4的开发环境

1.导入JBPM4开发所需的jar包,注意不要和原有的SSH2jar包冲突,启动tomcat,如果正常,则进行下一步的操作 2.将下面的JBPM4的映射文件代码,写入到hibernate.cfg.xml配置文件中: <!-- 导jpbm入映射文件 --> <mapping resource="jbpm.repository.hbm.xml" /> <mapping resource="jbpm.execution.hbm.xml" /&

向asp.net项目中添加控件AspNetPager

1.打开项目,把.dll文件放入项目中: 2.在工具栏中添加一个自定义选项卡 3.右键选项卡,点击"选择项" 4.在打开的对话框中点击:"浏览" 5.找到要添加的控件文件AspNetPager.dll,确定,添加成功啦 向asp.net项目中添加控件AspNetPager

如何在asp.net的mvc类型项目中添加webservice

先在项目中添加webservice 会产生一个asmx结尾的文件,然后在其cs中写方法. 另外在global.asax.cs里或App_Start/Route_Config中加一句 routes.IgnoreRoute("{resource}.asmx/{*pathInfo}"); 这样asmx后缀的web service就不会被mvc的routing来处理了.

Android Studio-Gradle项目中添加JNI生成文件(.so文件)

当使用gradle时,添加.so和jar包遇到报错: java.lang.UnsatisfiedLinkError: Couldn't load faceppapi: findLibrary returned null 解决办法是将build.gradle写成如下形式: apply plugin: 'android' android { compileSdkVersion 19 buildToolsVersion "19.0.0" defaultConfig { minSdkVersi

web项目中添加logger日志

在项目中添加log4j.xml文件 log4j.xml文件 <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE log4j:configuration SYSTEM "log4j.dtd"> <log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/"> <appen

在SpringBoot项目中添加logback的MDC

在SpringBoot项目中添加logback的MDC 先看下MDC是什么 Mapped Diagnostic Context,用于打LOG时跟踪一个“会话“.一个”事务“.举例,有一个web controller,在同一时间可能收到来自多个客户端的请求,如果一个请求发生了错误,我们要跟踪这个请求从controller开始一步步都执行到了哪些代码.有哪些log的输出.这时我们可以看log文件,但是log文件是多个请求同时记录的,基本无法分辨哪行是哪个请求产生的,虽然我们可以看线程,但线程可能被复

Intellij IDEA在maven项目中添加外部Jar包运行

一. 问题概述 我们知道Intellij IDEA是非常好用的Java语言开发的集成环境.提供了非常多实用的功能,包括了智能代码助手.代码自动提示.代码重构.各种插件等,当然也集成了maven 正常情况下,我们创建maven项目时,相关的jar包会自动导入,当然我们也可以通过IDEA右侧的maven工具来实现jar包的加载. 但我们在实际开发过程中,可能会使用外部jar包的情况,如实现与第三方公司的系统对接时,需要使用到他公司提供的jar包,这个时候在maven中央仓库找不到,该如何导入呢? 首