在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