前言

ESLint 一直是我們打程式的重要指標，它不但能夠替我們檢查語法風格中的問題，也避免某些問題可能會造成的程式錯誤，所以如果 ESLint 無法在 TypeScript 專案中替我們正確檢測語法問題，那是一件很可惜的事情，本篇會來解釋如何讓 ESLint 的配置適用於 TypeScript。

前置準備

1. 文中的專案會以 Day28 的專案架構繼續講解，如果未跟到前一天的進度，可以從 GitHub 上 Clone 下來。
2. 一顆擁有學習熱忱的心。

ESLint

如前言所說，ESLint 還不認識 TypeScript，因此仍然是使用 JavaScript 與 JSX 的模式在做檢測，例如在昨天編譯 SCSS 產生的 src/index.scss.d.ts 裡面就會出現以下語法問題：

因為 ESLint 就搞不懂冒號是在幹嘛，會認為它是多餘的語法。

安裝 Parse

首先替 ESLint 下載適用於 TypeScript 的檢查規則：

npm install eslint-plugin-typescript --save-dev
npm install @typescript-eslint/parser --save-dev

eslint-plugin-typescript 是依賴套件，@typescript-eslint/parser 是主要的 Parser。

配置 Parse

下載完後到 ESLint 的設定檔 .eslintrc.js ，加上以下的設定：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [
    'react',
    'typescript',
  ],
  /* 其餘省略 */
};

接下來重新打開編輯器，就會看見 src/index.scss.d.ts 中關於語法 : 的錯誤消失了，剩下就是平常我們在 JavaScript 中會出現的問題：

不過在我們打開 src/index.tsx 的時候，仍然會看到一片紅：

這裡有兩個原因，一個是因為在 import 的時候我們都習慣在目錄中加上 index.js 來預設 export，但是我們現在換成 .ts，就得另外設定預設匯出的副檔名，開啟 .eslintrc.js，加入以下設定：

module.exports = {
  /* 其餘省略 */
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
};

接下來是下方的 JSX 語法問題，ESLint 認為 JSX 只能在 .jsx 檔案內撰寫而已，這裡一樣是修改 .eslintrc.js，只需要在 rule 中將語法規則關掉：

module.exports = {
  /* 其餘省略 */
  rules: {
    'react/jsx-filename-extension': 'off',
  },
}

原本紅通通的畫面就正常啦：

然後這時候專案中應該會籠罩在轉換成 TypeScript 的語法問題氣氛中，像是有些變數我們都沒有指定型別，TypeScript 就會提醒我們：

但是不曉得大家有沒有發現，雖然 TypeScript 替程式檢查出了問題，但仍然可以在前兩章時通過編譯，原因是這個語法檢測很貼心，在專案裡有時候我們會想先簡單寫段程式來做測試，確認某些功能有沒有辦法實現，但這時候如果因為一些語法問題而無法編譯，就得再花時間解決那些語法問題，而現在只會在你想檢查的時候檢查，平常就是貼心提醒，但還是可以編譯就是了。

在 TypeScript 中，如果要常駐使用語法檢測可以輸入以下指令：

npm run tsc --watch

也可以將它加到 package.json 中：

{
  /* 其餘省略 */
  "scripts": {
    /* 其餘省略 */
    "tsc-w": "tsc --watch"
  },
  /* 其餘省略 */
}

不過開啟 --watch 前可要注意！要先在 tsconfig.json 中將 noEmit 的選項打開：

否則每次檢查都會產生一堆編譯過後的 JavaScript 檔案，檢查後就會將有問題的地方通通列出：

本文的範例程式碼會提供在 GitHub 上，歡迎各位參考：）

結尾

經過本章的處理後，專案頓時少了很多紅線錯誤，看起來就挺舒服的，如果文章中有任何問題，或是不理解的地方，麻煩再留言告訴我！謝謝大家！