【React×TypeScript】環境構築メモ

ホーム
BLOG
【React】, 【TypeScript】, 【環境構築】
【React×TypeScript】環境構築メモ

【環境構築】
2022.12.31

【React×TypeScript】環境構築メモ

1. 概要

React・TypeScriptのプロジェクトでESLintやPrettierの環境構築を行う方法についてのメモです。

2. 環境

WSL2 Ubuntu20.04
Visual Studio Code

3. 作業内容

3-1. Node.js周りの環境構築

【Node.js】環境構築メモこちらの記事を参照。

3-2. Reactのプロジェクトを作成する

作業用のディレクトリを作成したら、その中で以下のコマンドを実行しReactとTypeScriptのプロジェクトを生成しましょう。

npx create-react-app . --template typescript

Node.jsをインストールするとnpmも自動でインストールされるのですが、npm5.2.0以降であればnpxもプリインストールされます。

npmではpackage.jsonにscriptを定義したり、コマンドをグローバルインストールして実行する必要がありましたが、 npxを利用することで、定義していないコマンドやインストールしていないコマンドの検索・実行・削除を自動で行ってくれます。

3-3. ESLintとPrettierを導入する

生成したプロジェクトのルートディレクトリに移動し、以下を実行しましょう。

npm i --save-dev eslint prettier eslint-config-prettier

ESlintはJavascriptの静的解析ツールです。
コードを実行する前に不具合を教えてくれたり、コードのスタイルを整えたりしてくれる便利なやつ。

Prettierはコードフォーマッターです。
Eslintよりも優れたコード整形機能があり、デフォルトでコード整形に関するルールが存在しているので、細かくルールを設定する必要があるESLintよりも手軽に扱えるため、併用するプロジェクトが多いです。

ESLintとPrettierを併用するときにはeslint-config-prettierも導入することで、ESLint側のコード整形に関するルールを無効化します。
こうすることで、コード整形に関するルールの競合をなくし静的解析とコード整形の役割を分けることができます。

3-4. ESLintの設定ファイルを用意

以下を実行しESLintの設定ファイルを生成しましょう。

npx eslint --init

どのような設定ファイルを作るかを聞かれるので今回は以下のように回答していきます。

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

Q. How would you like to use ESLint? · problems
ESLintがチェックする対象を選択します。
前述した通り、静的解析とコード整形を分けているため今回は To check syntax and find problems を選択しました。

Q. What type of modules does your project use? · esm
モジュール化する際に、CommonJSで記述するかESモジュールで記述するかを選択します。
現在ではESモジュールでコードを記述するのが一般的なのでESモジュールを選択しました。

// ex. CommonJS
module.exports.hoge = () => console.log('hoge')
const { hoge } = require('./hoge.js') 

// ex. ESモジュール
export const hoge = () => console.log('hoge')
import { hoge } from './hoge.js'

Q. Which framework does your project use? · react
利用するフレームワークを選択します。
Reactを使っているのでReactを選択しました。

Q. Does your project use TypeScript? · Yes
TypeScriptを利用するか否かを選択します。
TypeScriptを使っているのでYesを選択します。

Q. Where does your code run? · browser
コードの実行環境を選択します。
Webアプリのプロジェクトなのでbrowserを選択しました。

Q. What format do you want your config file to be in? · JavaScript
設定ファイルのファイル形式を選択します。
コメントを記述したり動的な処理を書きたい場合があるのでJavascriptを選択しました。

Q. Would you like to install them now? · Yes
必要なライブラリをインストールするか否かを選択します。
インストールしたライブラリの情報はpackage.jsonのdevDependenciesに追加されるためYesを選択しました。

Q. Which package manager do you want to use? · npm
どのパッケージマネージャーを使ってインストールするかを選択します。
今回はnpmを使用しているのでnpmを選択しました。

ここまでの質問に回答することで、以下のような設定ファイルが生成されます。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

あとはプロジェクトに合わせて設定を追加してくだけです。
今回は最低限必要そうな設定のみを以下のように追記しました。

module.exports = {
    // 適用範囲の制限
    "root": true,
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        // create-react-appが生成したESLintの設定をpackage.jsonから転記
        "react-app",
        "react-app/jest",
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        // ESLintのフォーマットを無効化する（設定を上書きするためextendsの最後に記述すること）
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

3-5. Prettierの設定ファイルを用意

Prettierの設定ファイルである .prettierrc.json をプロジェクトのルートディレクトリに作成しましょう。

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}

上記の内容でセミコロンの有り無しやシングルクォートのみの使用などを設定しています。

3-6. VScodeの設定ファイルを用意

ここまでの設定を記述した後、package.json に実行するためのスクリプトを記述することで静的解析とコード整形を実行することができるのですが、作業の度に毎回実行するのは非常に面倒なので、VSCodeの拡張機能を使用して保存時に自動で適用するようにしていきたいと思います。

.vscode ディレクトリを作成し、配下に extensions.json を作成します。

{
  "recommendations": [
   "esbenp.prettier-vscode",
   "dbaeumer.vscode-eslint",
 ]
}

上記の内容を記載し、プロジェクトを再読み込みすることで Prettier と ESLintの拡張機能がレコメンドされるので追加しておきましょう。

次に同じく.vscode 配下に settings.json を作成しましょう。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.fixAll.esslint"
  ]
}

上記内容を記述することで、先程追加した拡張機能を使ってファイル保存時のコード整形処理と静的解析が走るようになります。