iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
1
Modern Web

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

【Day 04】引入 React + ESLint

大家好,今天的篇章一開始,我要先兌現 【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 ./**/*"
},

馬上執行指令看看

npm run lint

這樣就能一次看到所有不合規範的程式碼,不過有些檔案並不需要檢查,可以利用 .eslintignore 這個設置檔來指定不需要檢查的目標

+ .eslintignore

檔案內容

!.eslintrc.js
/dist
*.html
*.json

預設上 .eslintrc.js 會被忽略,但筆者想把它加進去,所以用了 !.eslintrc.js,第二行是忽略 /dist 目錄底下的所有檔案,接下來是 忽略所有 .html 及 .json

剩餘的規範不通過的部分我就直接修正,不贅述過程,修正完畢後再次執行 npm run lint

沒有顯示任何錯誤,代表所有程式碼都已經通過 ESLint 檢查

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day4-react-eslint


明天會簡單介紹 React 的 Hooks 們


上一篇
【Day 03】TypeScript 基本型別介紹
下一篇
【Day 05】React Hooks,useState 與 useEffect
系列文
TypeScript + React + 雜七雜八30

尚未有邦友留言

立即登入留言