在React项目中添加ESLint
Posted lyralee
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在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"}, // ...其他的配置 }
以上是关于在React项目中添加ESLint的主要内容,如果未能解决你的问题,请参考以下文章
(ESLint)在 VS 2017 反应项目中找不到模块“eslint-config-react-app”
基于 TS 的 React 模板项目,集成 eslint sass,采用 StandardJS 代码风格,包含自动注册组件等各项功能,新建项目或 React 学习必备
基于 TS 的 React 模板项目,集成 eslint sass,采用 StandardJS 代码风格,包含自动注册组件等各项功能,新建项目或 React 学习必备
基于 TS 的 React 模板项目,集成 eslint sass,采用 StandardJS 代码风格,包含自动注册组件等各项功能,新建项目或 React 学习必备
基于 TS 的 React 模板项目,集成 eslint sass,采用 StandardJS 代码风格,包含自动注册组件等各项功能,新建项目或 React 学习必备