React

React - TypeScript、ESLint、Prettier 環境建置

React

React - TypeScript、ESLint、Prettier 環境建置

使用 create-react-app 建立專案

這篇文章在教你如何使用 create-react-app 建立的專案搭配 TypeScript、ESLint、Prettier，所建立起來的環境。
還會教你如何在 git commit 的時候自動檢查專案的程式碼。

  1. 使用create-react-app建立專案
    使用create-react-app建立專案，chat-app為專案名稱，–template typescript專案使用TypeScript撰寫

    1
    npx create-react-app chat-app --template typescript

  2. 刪除 src 資料夾內的所有檔案

  3. 新增 index.tsx
    支援IE11以上的瀏覽器需要做調整，需要增加第3行和第4行。
    reset.css
    使用 https://meyerweb.com/eric/tools/css/reset/，然後做一些變動。

    1
    2
    3
    4
    5
    6
    7
    8
    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';
    import './reset.css';
    import App from './App';

    ReactDOM.render(<App />, document.getElementById('root'));

  4. 新增 app.tsx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import React from 'react';

    interface Props { }

    interface State { }

    class App extends React.Component<Props, State> {

        render() {

            return (
                <div>第一個React網站</div>
            )
        }
    }

    export default App;

  5. 新增 config-overrides.js
    自行定義資料夾縮寫，因為使用create-react-app創建的專案，作者將webpack設定已經設定好，不希望再去做更動，如果想要做更動，有幾個方法，以下提供2種方法。

    1. 執行 npm react-scripts eject，就可以自行設定webpack，不過他是單向執行的，當你執行完畢就無法再封裝回去了。
    2. 安裝 npm install react-app-rewired react-app-rewire-alias –save
    3. 新增 config-overrides.js，內容如下
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      const { alias } = require('react-app-rewire-alias')

      module.exports = function override(config) {

          alias({
              '@static': 'static',
          })(config)

          return config
      }

  6. 開啟 package.json
    因為使用了react-app-rewired，所以要將scripts的內容更改。

    1. 第2~4行，原本是react-scripts改為react-app-rewired。
    2. 在production和development 輸入 ie 11。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      "scripts": {
          "start": "react-app-rewired start",
          "build": "react-app-rewired build",
          "test": "react-app-rewired test",
          "eject": "react-scripts eject"
        }
      "browserslist": {
          "production": [
            ">0.2%",
            "not dead",
            "not op_mini all",
            "ie 11"
          ],
          "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version",
            "ie 11"
          ]
        }

  7. 開啟 tsconfig.json
    新增 “baseUrl”: “src”，這樣import檔案時，就可以從src底下開始尋找。

    1
    2
    "jsx": "react",
    "baseUrl": "src"

  8. 重新安裝模組，這樣當build，才會支援IE11
    記得要先刪除node_modules資料夾，再執行 npm

    1
    npm install

安裝 ESLint 套件

  1. 安裝 ESLint 套件
    ESLint的作用在於統一JavaScript的寫法
    1. 安裝 VSCode 中的 ESLint 套件
    2. npm install -g eslint
    3. 開啟 Terminal 後，輸入 eslint –init
    4. 看圖片操作

安裝 Prettier 套件

  1. 設置 Prettier 兩種方法
    Prettier的作用在於統一代碼風格
    存檔時自動編碼

    1. 安裝 VSCode 中的 Prettier - Code formatter 套件。
2. 到 VSCode 工作區設定 settings.json，專案資料夾會多出.vscode資料夾，增加完畢重新開啟 VSCode。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
        "editor.formatOnSave": true,
        "prettier.singleQuote": true,
        "prettier.semi": true,
        "prettier.printWidth": 120,
        "prettier.trailingComma": "es5",
        "prettier.tabWidth": 4,
        "prettier.jsxSingleQuote": false
    }

  2. 第二種使用npm套件
    執行 npm install prettier eslint-config-prettier eslint-plugin-prettier -D
    開啟.eslintrc.js
    新增第10行、28~35行。
    第27行開始是ESLint的規則，”prettier/prettier”則是統一代碼風格的規則。
    規則使用說明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    module.exports = {
        env: {
            browser: true,
            es6: true,
        },
        extends: [
            'eslint:recommended',
            'plugin:react/recommended',
            'plugin:@typescript-eslint/eslint-recommended',
            'plugin:prettier/recommended',
            'react-app',
        ],
        globals: {
            Atomics: 'readonly',
            SharedArrayBuffer: 'readonly',
        },
        parser: '@typescript-eslint/parser',
        parserOptions: {
            ecmaFeatures: {
                jsx: true,
                tsx: true,
            },
            ecmaVersion: 2018,
            sourceType: 'module',
        },
        plugins: ['react', '@typescript-eslint'],
        rules: {
            "prettier/prettier": [
                'error',
                {
                    semi: true,
                    singleQuote: true,
                }
            ],
            'no-var': 2,
        },
    };

安裝 husky 套件

  1. 使用 husky，提交檢查
    npm install husky –save
    開啟package.json，新增第6、第7行和9~13行。
    當commit時出現錯誤，可以執行npm run lint:fix，這時檔案就會自動編譯成正確的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject",
        "lint": "eslint src/**/*.tsx",
        "lint:fix": "eslint --fix src/**/*.tsx"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint"
        }
    }

  2. 如果有問題的話就先刪除node_modules資料夾，再執行一次 npm

    1
    npm install

  3. 附上我的github配置連結
    https://github.com/funfish22/initialization-react

    1
    git@github.com:funfish22/initialization-react.git
分享到