JavaScript 核心觀念(62) - ES6 章節:Let 及 Const - 學好 ES6 - 使用 ESlint 工具輔助學習

前言

如果想讓自己的 JavaScript 再更上一層樓的話,就會建議嘗試使用 ESLint。

學好 ES6 - 使用 ESlint 工具輔助學習

這邊就不贅述如何替自己專案加入 ESLint 了,如果不知道該怎麼加的人,我會建議你參考這一篇「五分鐘快速替專案加上 ESLint」。

那麼什麼是 ESLint 呢?簡單來講它是一個 JavaScript 風格管理工具,什麼是風格管理工具呢?我們在實際開發時,一定會與團隊合作,而每個人的開發習慣也不同,舉例來講原有的開發者可能習慣使用 var 宣告變數,後來進來的人則習慣使用 ES6 的 letconst 語法。

前面我們也說明過許多次 var 與 ES6 的 letconst 語法差異,那麼如果一直沒有制定一個公司開發規範,專案是有可能非常混亂:

1
2
3
var myName = "Ray";

let maName = "is Ray not Array";

又或者是結尾分號要加不加的問題:

1
2
3
var myName = "Ray"

let obj = {};

整體下來程式碼就會越來越混亂且混淆,最終就會導致難以維護。

而在學習過程中,也會推薦使用 Airbnb 風格,而 Airbnb 的風格簡單來講,它會希望你盡可能的使用 ES6 語法而不是使用 ES5 語法。

當然,如果你覺得 Airbnb 的挫折感太重的話,可以考慮先使用 Standard 風格,Standard 風格相對就比較寬鬆。

那麼最後這邊也會建議你可以嘗試閱讀一下 Airbnb 的官方文件:

我個人會推薦閱讀原文版本,畢竟翻譯的版本必須看 Fork 出來的作者有沒有空更新與其他成員發起 Pr merge 回去。

那你可能會想說,真的必須全部看完再來寫嗎?你可以直接上 ESLint 透過邊開發來學習,當遇到提示時,再去查詢解法了解為什麼這樣子改也是可以的。

那麼每個專案都必須安裝一次,因為 ESLint 是依據專案導向來去分析的。

最後以下這個功能我會希望你是已經掌握 ES6 的人在使用,也就是「VSCode 自動修正 ESLint 錯誤」。

為什麼 var 不要與 ES6 let、const 混用

最後聊一下為什麼 var 不要與 ES6 letconst 混用,首先先看一段範例程式碼:

1
2
3
4
5
6
var myName = 'Ray';
if(true) {
let myName = 'Ray1';
}

console.log(myName); // ?

我相信聰明的你很快就知道 console.log(myName); 的結果是 Raylet 的作用域是以 block(花括號)為主,因此只會存活於 if 陳述式內,但你有想過,如果變成這樣呢?

1
2
3
4
5
6
let myName = 'Ray';
if(true) {
var myName = 'Ray1';
}

console.log(myName); // ?

答案會是 Ray或是 Ray1 嗎?結果都不是。

而是 Uncaught SyntaxError: Identifier 'myName' has already been declared 這一段變數已經被宣告的錯誤訊息,雖然看起來都是在我們可以掌握的範圍內,但是你有沒有發現一件事情就是,如果當這兩種宣告方式混用時,你必須思考一下兩者的作用域?

  • var 函式作用域
  • letconst 區塊作用域

還有什麼呢?暫時性死區與提升等等,因此這樣子對於開發者來講,是必須額外花心思去閱讀邏輯的,所以會建議 varlet 不要混用。

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ