VSCode中ESLint外掛修復以及設定教學

2022-12-29 14:01:17

vscode+eslint外掛+設定教學

1.開啟專案，必須讓Vscode左側工作區根目錄是專案資料夾，確保根目錄下(第一級)有eslintrc.js / package.json中有eslint相關設定。

2.在Vscode中，安裝ESLint外掛(它可以設定你工作區中的eslintrc.js相關設定來幫你修復你程式碼中的程式碼風格問題)。

3.給VSCode中新增設定，讓編輯器在儲存(寫程式碼區域, 按ctrl+s) 會嘗試修復eslint語法檢查的問題(如果是程式碼本身寫錯了，這個不管)，具體新增設定步驟：

注意: 中間偏下部分, 選擇使用者的, 不要選擇工作區的
使用者: 設定一次所有專案都生效
工作區: 設定只在當前Vscode開啟的根目錄下範圍有效

4.切換成右側json格式的設定後，加入這個設定，讓vscode儲存嘗試修復問題。

"eslint.run": "onType",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

注意： json檔案的格式，只能最外面一個大括號包裹起來

設定好以後：應該就可以使用eslint外掛+vscode來格式化和修復你的eslint語法問題了。

效果如圖：注意: 因為你的eslintrc.js中，選擇的eslint語法可能不同，有的沒有分號，有的需要加分號

概念介紹：

eslint 是法官
eslintrc.js中設定的是法律 (具體用哪些規則)

但是無論用哪個規則，只要你把上面4步設定好，eslint外掛就會按照規則來修復你的程式碼

當然也可以在rules中新增自定義的規則

解決：先試著執行命令： npm run lint -fix 來修復整個工程裡的回車問題。因為mac和windows檔案後面的回車用的格式不同，錯誤原因如下：

如果執行後, 回車問題還在, 重啟下vscode試試

解決:

把vscode儲存自帶的格式化效果去掉, 在設定裡, 勾去掉

你的vscode版本可能過低，看下右下角有無eslint，如果有的話看看是否打勾勾了，如果是個x，禁用圖示，點選它開始eslint，彈窗選擇 everywhere。

下面都是正確效果：

還是有可能和vscode其他美化外掛衝突，禁用其他美化外掛，eslint也能美化你的js程式碼

關閉vscode，重新開啟，如果還不行，把ESLint外掛解除安裝關閉Vscode，再重新開啟再安裝試一下。

額外說明-新檔案還是末尾換行問題

如果新的.vue檔案右下角也還是CRLF(rn), 可以挨個改, 選擇LF (n), 但是比較麻煩
:

到此這篇關於VSCode中ESLint外掛修復以及設定教學的文章就介紹到這了,更多相關VSCode中ESLint外掛修復設定內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！