在React项目中添加ESLint

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校验

 

原文出处：https://www.cnblogs.com/lyraLee/p/11982208.html