【Day 04】引入 React + ESLint

第 11 屆 iThome 鐵人賽

DAY 4

Modern Web

TypeScript + React + 雜七雜八系列第 4 篇

11th鐵人賽

小馬彬

2019-09-19 21:57:39

5140 瀏覽

分享至

大家好，今天的篇章一開始，我要先兌現【Day 02】從一個空白資料夾開始提到的將專案給打包成 production，其實只欠一個小小小的步驟，因為 webpack 都也給它設置好了

如果沒有參與到從空白資料夾開始建置的過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day2-setup-ts-loader

打包成 production

再次觀察到 package.json 的這一行

那個小小小步驟就是直接輸入這行指令

npm run build

就會打包到 dist/ 目錄底下去了

html-webpack-plugin 會很貼心的幫你把 output 的 bundle.js 路徑寫進去，直接點開 dist/index.html 就可以看到打包好的成果了

修改 webpack 設置

好，接下來要回到主題了，要安裝 React 及 ESLint

因為進入點要從 .ts 換成 .tsx，會先對 webpack 的設置做點小改動

config/webpack.common.js，修改 entry 為 index.tsx

/* config/webpack.common.js */

const path = require('path');

module.exports = {
  // entry: path.join(__dirname, '../src/index.ts'),
  entry: path.join(__dirname, '../src/index.tsx'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '../dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
    ],
  },
};

src 的檔案刪除一個，新增一個

- src/index.ts
+ src/index.tsx

新增的 index.tsx 程式碼內容如下

/* src/index.tsx */

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello Typescript + React </h1>, document.querySelector('#app'));

安裝 React 相關的函式庫

npm i react react-dom

npm i -D @types/react @types/react-dom

上面的 @types 是為了安裝 TypeScript 需要看的 .d.ts

.d.ts 不專業敘述，筆者沒有自己寫過 .d.ts XD，簡言之就是為了型別檢查系統能運作或是說能讓第三方函式庫有定義一些更完整的型別來完善的利用 TypeScript 功能

TypeScript 有一個在 github 上的專案有專門管理這些定義檔，只要是比較熱門的函式庫，大部分都有提供這些 .d.ts 可以直接下載使用，順便附上連結可以參考看看
https://github.com/DefinitelyTyped/DefinitelyTyped

安裝完畢後就啟動 webpack-dev-server

npm run dev

執行結果畫面

完成，這樣就能開始撰寫你的 component 了。

安裝 ESLint、eslint-config-airbnb

ESLint 簡單說就是可以提升你撰寫的程式碼品質的工具，不僅僅只是要拿來規範空白幾格縮版幾格，就連型別沒定義（部分情況可以不定義型別），也會要求你一定要定義，否則...它也只能給你警告，還有 jsx 的寫法，以及 a11y，都能用 ESLint 來幫你檢查程式碼品質。

安裝 ESLint extensions

首先要先將你的編譯器，安裝 ESLint 的 extensions，筆者已經先偷裝好了

然後有一個重要的設置要改，按下 Ctrl + Shift + P，然後輸入 setting.json，選擇第一個開啟 喜好設定: 開啟設定 (JSON)，開啟 setting.json

設置 eslint 的檢查檔案類型，如果不設定這項 ESLint 是不會去檢查 .tsx 檔的

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
],

附上加入後的截圖，參雜了一些我歷史的痕跡

安裝 eslint-config-airbnb

筆者都是用 airbnb 釋出的 ESLint 規範來直接繼承
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
參考 eslint-config-airbnb 提供的文件，輸入指令

npx install-peerdeps --dev eslint-config-airbnb

執行這段會安裝以下這麼多，不只是規範 js，jsx 亦或是 hooks 的語法也通通規範起來

+ eslint-plugin-import@2.18.2
+ eslint-config-airbnb@18.0.1
+ eslint-plugin-jsx-a11y@6.2.3
+ eslint-plugin-react-hooks@1.7.0
+ eslint-plugin-react@7.14.3
+ eslint@6.1.0

再來是 TypeScript parser 及 TypeScript eslint-plugin

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

都安裝完畢後，在工作目錄新增一個 .eslintrc.js

+ .eslintrc.js

內容如下

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
    'react-hooks/exhaustive-deps': 'warn',
    '@typescript-eslint/indent': ['error', 2],
    'linebreak-style': ['error', 'windows'],
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

將所有要繼承的規範或 plugin，還有特殊需求的 rule 都填上，就完成了！

從此刻開始，只要是工作區目錄中的檔案都無一倖免，得遭受 ESLint 嚴格的檢查！

以下示範用指令的方式來檢查，在 package.json 增加一條 script 的指令

"scripts": {
  "dev": "webpack-dev-server --progress --color --config ./config/webpack.dev.js",
  "build": "webpack --config config/webpack.prod.js",
  "lint": "eslint ./**/*"
},

馬上執行指令看看