iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 30
2

前言

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 上,歡迎各位參考:)


結尾

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


上一篇
Day28 | 最強聯名款 TSX 上市-SCSS 篇
下一篇
Day30 | Component 後, TypeScript 的定位在哪?
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31

尚未有邦友留言

立即登入留言