在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校驗