利用 ESLint 來檢查變數宣告是否有遺漏

[mvpdw06]

通常這種事情不太會發生的，但有很多的 code 存在都有它的時空背景，我們能找出最適用的情況，也許就是最好的解法了！

前情提要

是這樣的，因為以前的 code 並沒有使用 JavaScript 嚴格模式來開發，並且使用 ASP.NET 的 bundle 方法，但因為改為使用 React 的情況下，導入了 webpack，但 webpack 打包時會使用 JavaScript 的嚴格模式，造成以前 JavaScript 中有的問題被暴露出來，更慘的是這些東西又是 runtime error，總不能遇到才改吧，這樣的被動不是我們所樂見的，因此我們必須化被動為主動，利用工具把這些問題找出來！

要解決的問題

1. 因為 React 的 component 化，導致某些情境下才會 render 到特定的 component，又剛好這時候這個 component 的寫法是有問題的，就會造成 JavaScript runtime error，導致畫面沒辦法 render 完成。

2. 串連式宣告

// right syntax
var a, b, c;

// error syntax
var a; b, c;

就是漏了逗號，或是把逗號誤輸入為分號

目標

找出漏宣告的變數或函式

解決方案

1. 使用眼力

眼力有限....非常不可靠（這我們已經親身體驗了，還好不是上到 Production...）

2. 投靠 IDE

不確定哪個 IDE 可以做出正確的判斷，因此放棄。

3. 使用工具 ESLint

好像可行，但他不是限制 coding style 的工具嗎？可以做到這件事嗎？

使用 ESLint 工具檢查！

1. 專案加入 .eslint 設定檔
2. 設定如下

{
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "globals": {
    "React"
  },
  "rules": {
    "no-undef": "error"
  }
}

講重點

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

會遇到的問題

1. library 如果不是模組化寫法，所有 library 或是 global 變數都會被判斷為 error，那我們就必須要設定例外情況！

"globals": {
  "React",
  "angular"
}

2. jQuery 怎麼辦？

"env": {
  "jquery": true
},

如果你的專案裡 global 變數非常多，那麼就乖乖一個一個慢慢加吧，至少這是一次的工作，以後在維護這份設定檔即可！

設定完畢後，你就可以輕鬆檢查專案裡所有需要檢查的檔案囉！