配置react-hook的eslint-plugin-react-hooks

最新推荐文章于 2025-03-28 10:20:32 发布

目标前端大佬

最新推荐文章于 2025-03-28 10:20:32 发布

阅读量3.7k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/qq_41043722/article/details/105997738

版权

React 专栏收录该内容

6 篇文章

订阅专栏

package.json 添加

 "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  }

在这里插入图片描述
安装插件后会报错

意思是不能在条件判断中使用useEffect()，会导致Hooks调用顺序发生错误
官方说法：https://zh-hans.reactjs.org/docs/hooks-rules.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

目标前端大佬

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用React Hook提高代码复用性

niceartisan的博客

05-04

1079

Hook 简介 Hook 是 React 16.8 的新增特性。是对 React 函数组件的一种扩展，通过提供一些特殊的函数，让无状态的组件拥有状态组件才拥有的能力。没有Hook之前写组件有两种形式，分别为函数组件 class组件函数组件特点如下所有的数据都是依赖props传入的，没有内部state 没有生命周期没有this(组件实例) 实际开发中因为业务复杂，一般使用函数组件无...

配置hooks的eslint-plugin-react-hooks

ZQD的博客

11-07

7083

eslint-plugin-react-hooks配置在使用create-react-app脚手架生成项目后，使用hooks特性没有eslint提示报错信息。可安装 eslint-plugin-react-hooks并配置package.json中的eslintConfig即可安装 npm install eslint-plugin-react-hooks --save -dev // y...

参与评论您还未登录，请先登录后发表或查看评论

eslint-plugin-react-refresh：让组件更新更迅速

最新发布

gitblog_00827的博客

03-28

1074

eslint-plugin-react-refresh：让组件更新更迅速 eslint-plugin-react-refresh Validate that your components can safely be updated with Fast Refresh ...

React-Hooks

秋水惊鸿的博客

02-25

1111

什么是Hooks？ Hooks是一类特殊的函数，适用于React的函数组件，可以让我们在不编写class的情况下使用state及其他的React特性，比如副作用处理及生命周期等。为什么要Hooks？ Hooks主要可以解决以下几类问题：在无需修改组件结构的情况下复用状态逻辑。原来的类组件如果需要封装一段可重用的逻辑，需要使用到高阶组件，不仅增加代码复杂度，同时会增加额外的组件节点。但是采用hooks的话，会更加的简单方便。复杂逻辑分离，针对一些副作用进行了集中的管理，让相关的业务逻辑更加聚合。使得

react配置eslint

weixin_33853827的博客

11-26

566

安装第三方依赖包 npm install eslint --save-dev npm install eslint-config-airbnb --save-dev npm install eslint-plugin-import --save-dev npm install eslint-plugin-jsx-a11y --save-dev npm install eslint-plugin-r...

awesome-react-hooks：关于React Hooks的精选列表

01-31

- 可能包括如`eslint-plugin-react-hooks`，用于检查Hook的使用是否符合规则。 6. **社区讨论与示例**： - GitHub上的开源项目和Issue讨论，展示Hooks的实际应用案例。通过这个"awesome-react-hooks"列表，...

react-TSLint规则用于检测ReactHooks的无效使用

08-14

在使用这些TSLint规则时，可以配置`.tslint.json`文件或使用ESLint与`@typescript-eslint/parser`和`@typescript-eslint/eslint-plugin`来实现对React Hooks的检查。Gelio-tslint-react-hooks-6e3dfe0这个库可能提供...

react-quill-plugin：具有React无状态组件的Quill.js实现

02-04

使用React实现Quill.js 基于React-Hook-API 开始使用 $ npm install react-quill-plugin --save 故事书 $ npm i $ npm run storybook

eslint-plugin-react-hooks

01-25

### 关于 `eslint-plugin-react-hooks` 的安装、使用与配置 #### 安装方式对于希望在项目中启用 React Hooks 规则校验的开发者来说，可以通过如下命令来安装该插件： ```bash npm install eslint-plugin-react-...

linter-formatter-config:React JS项目的Eslint和更漂亮的配置

03-19

通过自定义Eslint配置，可以为React项目设置特定的规则，例如限制不必要的副作用，强制使用函数组件和Hooks，以及禁止未使用的变量或导入。 **Prettier** Prettier则是一款自动化代码格式化工具，它可以按照预设的...

eslint-config-lidemy:港铁eslint配置

05-19

eslint-config-lidemy 一份为程式导师计画作业制定的Eslint rules config 此份config 包含哪些rules plugins ? eslint-plugin-import: ^2.22.1 eslint-plugin-jsx-a11y: ^6.4.1, eslint-plugin-react: ^7.12.4, eslint-plugin-react-hooks: ^4.2.0 上述套件需搭配Eslint 版本为: eslint: ^7.21.0 上述套件亦加入安装 npm install eslint-config-lidemy 因为有使用到上述plugins，所以需要一并安装： npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-pl

精读《React Hooks》

weixin_34128534的博客

11-12

308

1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态共享方案，不会产生 JSX 嵌套地狱问题。状态共享可能描述的不恰当，称为状态逻辑复用会更恰当，因为只共享数据处理逻辑，不会共享...

react项目eslint配置

weixin_54731282的博客

04-12

2319

注意：因为我们重新安装的插件在devDependencies中，可能dependencies中会有重复的插件，可以去掉dependencies中对应的插件。可以把node_modules包整体删掉再装，或者是运行命令逐个删掉------------（这个可以不急着弄，等文件规则校验都改好了之后再弄也行）（如果默认安装不成功，建议使用cnpm安装，安装在devDependencies中）若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；如果存在，它将执行；

官方检测 React-hook 的 ESLint 有 bug ？

weixin_46961967的博客

08-10

585

点击上方前端加加，关注公众号回复加群，加入前端加加技术交流群起因：团队在项目中定位一个很奇怪的问题，错误信息不明确，定位了很久才发现是 react rule 规则的问题。image.pn...

React Hook介绍（三）: Hook必须遵守的两个规则

热水钟博客

01-22

2195

一、两个强制性规则： (一）只在最顶层使用 Hook 记住别在循环，条件或嵌套函数中定义即可，因为hook它必须按顺序执行，它对state的控制才正确。（二）只在 React 函数中调用 Hook：不要在普通的 JavaScript 函数中调用 Hook，即只能在React的函数组件中调用，另外也可以在自定义hook中调用其它的hook. 二、安装ESLink插件：为了保证Hook开发中符合以上2个规则要求，可以在开发工具中安装：eslint-...

学习记录431@react之useState、useEffect、useCallback

教练我想学编程

07-27

442

useState 就是因为在函数式组件中无法使用this，就无法使用state，才出现了useState useEffect 就是因为在函数式组件中无法使用this，就无法使用state，才出现了useEffect 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循输入数组的工作方式。

都React V18了，还不会正确使用React Hooks吗，万字长文解析Hooks的常见问题

Web面试那些事儿的博客

10-20

279

今天主要想说一下react hooks，react hooks是react v16.8 之后引入的API，现在react都已经到V18了，hooks怎么还能不会用呢？首先hooks引入的目的是给函数式组件增加数据状态管理的能力，同时增加代码的可复用能力。但是同时hooks也是一个潘多拉魔盒，因为函数式组件不再只是单纯的一个纯函数了，可以在内部处理副作用了，使用不好就会经常遇到各种各样的问题，而且错误的使用方式也会引起re-render，引起一些性能上的问题。