vscode+eslint插件+配置教程

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

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

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

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

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

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

注意： json文件的格式，只能最外面一個(gè)大括號(hào)包裹起來

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

效果如圖：注意: 因?yàn)槟愕膃slintrc.js中， 選擇的eslint語法可能不同，有的沒有分號(hào)，有的需要加分號(hào)

概念介紹：

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

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

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

如果不好用

排查1: 如果出現(xiàn)后面回車符問題

解決：先試著運(yùn)行命令： npm run lint -fix 來修復(fù)整個(gè)工程里的回車問題。因?yàn)閙ac和windows文件后面的回車用的格式不同，錯(cuò)誤原因如下：

如果運(yùn)行后, 回車問題還在, 重啟下vscode試試

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

解決:

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

排查3: 右下角是否開啟eslint服務(wù)

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

下面都是正確效果：

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

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

排查5: ESLint不生效

• node_modules第三方， 安裝下。
• ESLint插件是否啟動(dòng)了

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

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

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

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

?總結(jié)