vscode+eslint插件+配置教程

1.打開項目， 必須讓Vscode左側工作區(qū)根目錄是項目文件夾， 確保根目錄下(第一級)有eslintrc.js / package.json中有eslint相關配置。

2.在Vscode中， 安裝ESLint插件(它可以配置你工作區(qū)中的eslintrc.js相關配置來幫你修復你代碼中的代碼風格問題)。

3.給VSCode中添加配置， 讓編輯器在保存(寫代碼區(qū)域, 按ctrl+s) 會嘗試修復eslint語法檢查的問題(如果是代碼本身寫錯了，這個不管)，具體添加配置步驟：

注意: 中間偏下部分, 選擇用戶的, 不要選擇工作區(qū)的
用戶: 配置一次 所有項目都生效
工作區(qū): 配置只在當前Vscode打開的根目錄下范圍有效

4.切換成右側json格式的配置后， 加入這個配置， 讓vscode保存嘗試修復問題。

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

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

配置好以后： 應該就可以使用eslint插件+vscode來格式化和修復你的eslint語法問題了。

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

概念介紹：

• eslint 是法官
• eslintrc.js中配置的是法律 (具體用哪些規(guī)則)

但是無論用哪個規(guī)則， 只要你把上面4步配置好，eslint插件就會按照規(guī)則來修復你的代碼

當然也可以在rules中添加自定義的規(guī)則

如果不好用

排查1: 如果出現后面回車符問題

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

如果運行后, 回車問題還在, 重啟下vscode試試

排查2: 保存時好了但是一瞬間代碼又回來了

解決:

• 把vscode保存自帶的格式化效果去掉, 在設置里, 勾去掉

排查3: 右下角是否開啟eslint服務

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

下面都是正確效果：

排查4: 如果保存還是變回去了

還是有可能和vscode其他美化插件沖突，禁用其他美化插件，eslint也能美化你的js代碼

排查5: ESLint不生效

• node_modules第三方， 安裝下。
• ESLint插件是否啟動了

排查6: 如果都用心走了一遍, 還不行

關閉vscode， 重新打開， 如果還不行， 把ESLint插件卸載關閉Vscode， 再重新打開再安裝試一下。

額外說明-新文件還是末尾換行問題

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

 總結

到此這篇關于VSCode中ESLint插件修復以及配置教程的文章就介紹到這了,更多相關VSCode中ESLint插件修復配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論