⚛️

TypeScriptとReactの開発環境構築の備忘録

2023/02/27に公開

React

概要

TypeScriptとReact開発環境についての備忘録です。
類似の記事も多数あり何番煎じかも分かりませんが、自分でまとめないと毎回ツールや設定方法を検索する羽目になりそうなので、未来の自分のためにメモを残します。

プロジェクト作成

ReactのWEBサイトで推奨されていたので、Create React App(CRA)を選びました。
もしかしたら近い将来はViteなどを使うかもしれませんが、一旦はCRAにしました。
CRAのWEBサイトを参考にTypeScriptテンプレートを使ってプロジェクトを作ります。

mkdir foo
cd foo
npx create-react-app . --template typescript

リンター

ReactのEditor Setupに記載があったので、ESLintを選びました。

インストール

ESLintのGetting Startedとこちらの記事を参考にしました。

npm init @eslint/config

このコマンド実行時に聞かれる質問には、下記で答えました。

How would you like to use ESLint?

To check syntax, find problems, and enforce code style
What type of modules does your project use?

JavaScript modules
Which framework does your project use?

React
Does your project use TypeScript?

Yes
Where does your code run?

Browser
How would you like to define a style for your project?

Use a popular style guid
Which style guide do you want to follow?

Airbnbを選んでいる記事が多かったのですが、私が実行したときは選べなかったので、Standardにしました。
What format do you want your config file to be in?

JSON

設定後は下記コマンドでリンターを実行できます。

# --fixをつけると一部自動で修正する。
npx eslint --fix .

また、VSCodeと連携する場合はこちらの拡張機能をインストールします。

設定

設定内容は.eslintrc.jsonという名前のファイルに書かれています。
インストール直後のファイルをベースに下記を変更しました。

実行時のエラー対処

.eslintrc.jsonの抜粋

{
    "parserOptions": {
        "project": "./tsconfig.json",
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

ビルドファイルの除外
.eslintrc.jsonの抜粋
```
{
    "ignorePatterns": ["build/"]
}
```

prettierとの競合回避

extendsの最後に記述します。

.eslintrc.jsonの抜粋

{
    "extends": [
        "other extends",
        "prettier"
    ],
}

React Hook関連のルール追加

ReactのWEBサイトに案内がありました。
設定はこちらを参考にしました。

.eslintrc.jsonの抜粋

{
    "plugins": ["react-hooks"],
    "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn"
    }
}

上記の変更を加えたことで最終的に以下の内容になりました。

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:react/recommended", "standard-with-typescript", "prettier"],
    "ignorePatterns": ["build/"],
    "overrides": [],
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "./tsconfig.json",
        "sourceType": "module"
    },
    "plugins": ["react", "react-hooks"],
    "rules": {
        "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
        "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
    },
    "settings": {
        "react": {
        "version": "detect"
        }
    }
}

フォーマッター

ReactのEditor Setupに記載があったので、Prettierを選びました。

インストール

PrettierのWEBサイトとこちらの記事を参考にしました。
また、ESLintと同時に使う場合は競合回避のための設定が必要で、こちらを参考にしました。

# prettier本体
npm install --save-dev --save-exact prettier

# ESLintとの競合を防ぐためのモジュール
npm install --save-dev eslint-config-prettier

設定後は下記コマンドでフォーマットできます。

npx prettier --write .

また、VSCodeと連携する場合はこちらの拡張機能をインストールします。

設定

設定全般は.prettierrc.jsonに、フォーマット対象外のファイルは.prettierignoreに書きます。
それぞれ下記のように設定しました。

.prettierrc.json

列数を GitHub のコードレビュー画面のデフォルトに合わせて変更。
.prettierrc.json
```
{
    "printWidth": 119
}
```
.prettierignore

ビルドファイルなどフォーマット不要なものを追加。
```
# Ignore artifacts:
build
coverage
```

まとめ

TypeScriptとReact開発環境をしたときの備忘録を書きました。
未来の自分や皆さんの参考になれば幸いです。

GitHubで編集を提案

概要

プロジェクト作成

リンター

インストール

設定

フォーマッター

インストール

設定

まとめ

Discussion