要啟用vscode中eslint自動修復，首先安裝eslint插件，接著配置項目中的eslint規則文件（如.eslintrc.JS或.eslintrc.json），然后在vscode設置中開啟eslint.validate并添加需檢查的文件類型，再配置editor.codeactionsonsave以啟用保存時自動修復，最后重啟vscode確保配置生效。若自動修復未生效，可檢查eslint是否正確安裝、插件是否啟用、文件類型是否識別、規則是否有沖突、依賴是否完整等。自定義eslint規則可通過修改.eslintrc.js中的rules字段實現，并可使用extends繼承現有配置、通過plugins擴展功能，同時建議逐步調整規則并與團隊協作統一規范。最佳實踐包括從小范圍規則開始、定期更新eslint版本、結合prettier格式化代碼、使用版本控制管理配置變更、忽略特定無需檢查的文件或行。
Vscode啟用ESLint自動修復，簡單來說，就是讓Vscode在你保存代碼的時候，自動按照ESLint的規則格式化你的代碼。這能省去很多手動調整格式的時間，讓代碼風格保持一致。
解決方案：
-
安裝ESLint插件： 首先，在Vscode的擴展商店里搜索ESLint，安裝官方的ESLint插件。這是基礎。
-
配置ESLint： 確保你的項目里已經配置了ESLint。通常會有一個.eslintrc.js或.eslintrc.json文件。如果沒有，可以使用npm init @eslint/config在項目根目錄下初始化一個。這個配置文件定義了你的代碼規范。
-
Vscode設置： 打開Vscode的設置（文件 -> 首選項 -> 設置，或者直接按Ctrl + ,）。在搜索框里輸入eslint.validate。
- 在eslint.validate中，添加你想要ESLint檢查的文件類型。比如，[“JavaScript”, “javascriptreact”, “typescript“, “typescriptreact”, “vue“, “html”]。這意味著ESLint會檢查js、jsx、ts、tsx、vue和html文件。
-
啟用保存時修復： 繼續在設置里搜索editor.codeActionsOnSave。點擊在settings.json中編輯。
- 在settings.json文件中，添加以下配置：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }- 如果你的Vscode版本較低，可能不支持source.fixAll.eslint。在這種情況下，可以嘗試使用eslint.autoFixOnSave，將其設置為true。但source.fixAll.eslint是更推薦的方式。
-
重啟Vscode： 修改了Vscode設置后，建議重啟一下Vscode，確保配置生效。
-
檢查ESLint配置： 如果自動修復沒有生效，檢查你的.eslintrc.js或.eslintrc.json文件是否正確配置了rules。有些rules可能阻止自動修復。
-
忽略文件： 有些文件可能不需要ESLint檢查。可以在項目根目錄下創建一個.eslintignore文件，將不需要檢查的文件或文件夾添加到這個文件中。
為什么Vscode的ESLint自動修復不生效？
ESLint自動修復不生效的原因有很多，我踩過的坑包括：
- ESLint未正確安裝或配置： 這是最常見的原因。確保你的項目里安裝了ESLint，并且.eslintrc.js文件配置正確。可以通過在終端運行eslint .來檢查ESLint是否正常工作。如果報錯，說明ESLint配置有問題。
- Vscode插件未啟用： 檢查ESLint插件是否已啟用。有時候插件會被禁用，導致自動修復失效。
- 文件類型未被識別： 確保eslint.validate中包含了你想要檢查的文件類型。
- ESLint rules沖突： 有些ESLint rules可能互相沖突，導致自動修復失敗。檢查你的.eslintrc.js文件，看看是否有沖突的rules。
- Vscode設置問題： 檢查editor.codeActionsOnSave和eslint.autoFixOnSave是否正確配置。
- 文件保存時出錯： 有時候，文件保存時會出錯，導致自動修復失敗。可以查看Vscode的輸出面板（查看 -> 輸出），看看是否有ESLint相關的錯誤信息。
- 沒有安裝依賴： 有時候需要安裝一些額外的依賴，比如eslint-plugin-react，才能讓ESLint正常工作。
如何自定義ESLint規則以適應團隊的代碼風格？
自定義ESLint規則是讓ESLint更好地適應團隊代碼風格的關鍵。以下是一些步驟和注意事項：
-
理解ESLint規則結構： ESLint規則通常包含rule ID、severity和options。rule ID是規則的名稱，severity表示規則的嚴重程度（”off”、”warn”、”Error”），options是規則的配置選項。
-
修改.eslintrc.js： 打開你的.eslintrc.js文件，在rules字段中添加或修改規則。例如：
module.exports = { "rules": { "semi": ["error", "always"], // 強制使用分號 "quotes": ["error", "single"], // 強制使用單引號 "no-unused-vars": "warn" // 未使用的變量發出警告 } }; -
使用extends繼承配置： 可以使用extends字段繼承一些常用的ESLint配置，比如eslint:recommended、airbnb、standard等。這可以省去很多手動配置的麻煩。例如：
module.exports = { "extends": "airbnb", "rules": { // 覆蓋airbnb的規則 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] } }; -
創建自定義規則： 如果ESLint自帶的規則不能滿足你的需求，可以創建自定義規則。這需要編寫一些JavaScript代碼來實現規則的邏輯。具體步驟可以參考ESLint官方文檔。
-
使用plugins： ESLint支持使用plugins來擴展其功能。plugins可以提供額外的規則和配置。常用的plugins包括eslint-plugin-react、eslint-plugin-vue、eslint-plugin-typescript等。
-
逐步調整： 修改ESLint規則后，建議逐步調整，避免一次性修改過多導致代碼混亂。
-
團隊協作： 確保團隊成員都了解并遵守ESLint規則。可以定期召開代碼評審會議，討論ESLint規則的合理性，并根據實際情況進行調整。
ESLint自動修復的最佳實踐有哪些？
-
從小處著手： 剛開始使用ESLint自動修復時，不要一下子啟用所有規則。先從一些簡單的規則開始，比如空格、縮進、分號等。逐步增加規則，避免代碼庫出現大量修改。
-
定期更新ESLint： ESLint會不斷更新，修復bug并添加新功能。定期更新ESLint可以確保你使用的是最新的版本，并享受到最新的功能和修復。
-
使用版本控制： 在修改ESLint配置之前，先提交代碼。這樣可以方便地回滾修改，避免出現問題。
-
代碼評審： 即使使用了ESLint自動修復，仍然需要進行代碼評審。自動修復只能解決一些簡單的格式問題，無法保證代碼的邏輯正確性。
-
與Prettier結合使用： ESLint主要用于檢查代碼的邏輯和風格，而Prettier主要用于格式化代碼。可以將ESLint和Prettier結合使用，讓代碼風格更加統一。
-
忽略特定行或文件： 有時候，某些行或文件不需要ESLint檢查。可以使用// eslint-disable-next-line或.eslintignore文件來忽略這些行或文件。
-
保持ESLint配置簡單： 盡量保持ESLint配置簡單明了。避免使用過于復雜的規則，以免影響代碼的可讀性和可維護性。
