解決 Cannot find module ‘babel-eslint’ in VS Code.

先講結論

在 eslint 與 babel-eslint 都有正確安裝跑過 後,也正確的寫入 .eslintrc 設定檔的前提下!

重新啟動你的 VS Code IDE 吧!重開後一切都會正常了!

ESLint 是什麼?

Eslint logo

我們在前端開發時,常會與其他人一起協作,每個人都會有自己的 coding style,這是好事,但太多的 coding style 會導致看 code 的複雜度變高,這時我們就會需要 EsLint 這樣的【 coding style 限制套件】來幫助我們做這件事情!

$ npm install eslint

除了限制 coding style 還能做什麼?

如果你的 project 裡面的 JavaScript 並不是完全模組化(import / export),那麼你的 .js 檔案中應該會有很多使用 global 變數的情況,中途一半想要 integrate webpack 到 project 中,你要怎麼檢查某個變數是不是有被 import 進來呢?這時候我們就可以利用 eslint 來幫忙檢查!

.eslintrc 設定:

{
...otherSettings,
"rules": {
"no-undef": "error"
}
}

簡單來說就是利用 ESLint 的 no-undef 規則,檢查所有為宣告變數或函式!

更多 EsLint 設定請看 Eslint official document

如果你寫的前端是 ES6, Jsx… 等等需要 Babel 轉型的 JavaScript

這時候如果直接使用 EsLint 會有些語法會噴錯誤給你,這時候你就需要新的 parser!

$ npm install babel-eslint

並且在 .eslintrc 中增加設定

{
"parser": "babel-eslint",
...otherSettings
}
注意!問題來囉!
存檔的同時 VS Code 會噴一個錯誤訊息給你!
Cannot find module ‘babel-eslint’ in VS Code.
解決方法如同最上面說的,請重新啟動 VS Code 吧!重新啟動後就會正常了!

如果你使用了 ES6 中的 Rest / Spread operator

如果你使用的不是 babel-eslint,這時 eslint 可能也會噴錯誤給你看,你可以加上一個 EsLint 的設定來解決這個問題!

{
...otherSettings,
"parserOptions"
: {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
}

讓 eslint 忽略特定的檔案或資料夾

在 project 根目錄增加一個 .eslintignore 檔案來忽略檢查!

方法如同 .gitignore 一樣!

VS Code 使用 EsLint 開發搭配套件

VS Code ESLint extension

使用 VS Code 搭配這個套件,可以提供即時的檢查!馬上告訴你哪裡有問題,即時檢查及時修正!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.