在react+ts中配置eslint

本次eslint配置是基於react+ts

1. 在項目中安裝eslint及對應的規則的包

npm i eslint -D

2. 配置eslint。執行eslint的命令：npx eslint --init

1. 提供交互界面，用戶去選擇

   1. 

   2. 

   3. 

   4. 

   5. 

   6. 

   7. 

   8. 

   9. 

   10. 

   11. 恭喜完成配置

2. 根據選擇去自動下包

3. 自動生成配置文件

3. 配置開發工具(vscode)能ctrl+s自動修復格式錯誤

1. 在vscode中安裝eslint插件。

2. 在vscode設置，讓eslint插件顯示在狀態欄"eslint.alwaysShowStatus": true

3. 管理-–>設置—>工作區設置 --> 打開json設置—>自動創建.vscode/settings.json文件，添加如下內容：（不要配置 用戶級別！不要配置 用戶級別！不要配置 用戶級別！）

   {
       "eslint.run": "onType", // 運行linter 的時間，onSave(保存后)或onType(輸入時)，默認為onType
       "eslint.options": {
         "extensions": [".js", ".vue", ".jsx", ".tsx"]//指定vscode的eslint所處理的文件的后綴
       },
       "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true // 保存時按eslint自動修復
       }
   }
   

4.自定義校驗規則

在.eslintrc.js中根據需求自定義相應規則

// 例如
rules: {
  'react/react-in-jsx-scope': 0
  // “off” 或 0 - 關閉規則
  // “warn” 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)
  // “error” 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
}

eslint 規則