【入門】VSCodeでReact＋TypeScriptの開発環境を作る

Visual Studio Code（以降、VSCode）は使ったことあるけど、React+TypeScriptの開発環境を作成したことがない…

React初心者向けにcreate-react-appを使用してプロジェクトを作成し、ESLintとPrettierを導入する手順を解説します

プロジェクトの作成

Reactのプロジェクトを作成するには次の２つの方法があります

ReactのサイトによるとCreate React Appは学習者やSPA（シングルページアプリケーション）を作成するのに向いている

Next.jsはサーバ環境としてNode.jsの利用を想定したSSR（サーバーサイドレンダリング）を作成するのに向いている

ということですので、今回はCreate React Appを使用してプロジェクトを作成していきます

次のコマンドをプロジェクトを作成したい場所で実行します

npx create-react-app [プロジェクト名] --template typescript

Happy hacking!と表示されれば完了です

作成されたプロジェクトについて簡単に説明します

プロジェクト配下で次のコマンドを実行すると画面が表示されます

npm start

ESLintの導入

ESLintを導入する手順を解説します

ESLintとは？

ESLintとは、JavaScriptやTypeScriptなどの静的解析ツールです。単純な構文エラーやプロジェクト固有のコーディング規約を定義することができます。厳密なルールを定義すればチームで開発する場合でもシステム全体のコードの一貫性を維持することができます

次のコマンドでローカル環境にインストールします

npm install --save-dev eslint

バージョンが表示されれば完了です（執筆時点ではv.8.35.0）

npx eslint -v

次にESLintの設定ファイルを作成します

npx eslint --init

コマンドを実行すると選択肢が表示されるので次のように選択します

√ How would you like to use ESLint? · To check syntax and find problems
√ What type of modules does your project use? · JavaScript modules (import/export)
√ Which framework does your project use? · React
√ Does your project use TypeScript? · Yes
√ Where does your code run? · Browser
√ What format do you want your config file to be in? · JavaScript

CommonJSとは？

What type of modules does your project use?の質問時に選択肢に表示されるCommonJS。これは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトのことです。Node.jsはデフォルトで全てのモジュールをCommonJSで扱いますが、最近のバージョンではES Modulesに対応するなどしていて、潮流はES Modulesに流れつつあります

完了すると.eslintrc.jsファイルが作成されます

ESLintのルールを個別に設定していくこともできますがあまりにも数が多いため、ルールをひとつひとつ調べて導入していくのは大変です

そこで、オススメなのがShareable config（第三者が公開している規約）の活用です

代表的なShareable configには次のようなものがあります

これらをGoogle トレンドで調べてみるとAirbnbの人気が高いようです

そこで今回はAirbnbのShareable configをインストールすることにします

npm install --save-dev eslint eslint-config-airbnb eslint-config-airbnb-typescript

完了したら.eslintrc.jsを次のように修正します

extends: [
  "airbnb", //追加
  "airbnb-typescript", //追加
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:@typescript-eslint/recommended"
],
"parserOptions": {
  "ecmaVersion": "latest",
  "sourceType": "module",
  "project": "tsconfig.json" //追加
},

ESLintでindex.tsxをチェックしてみます

npx eslint ./src/index.tsx

結果、２つのエラーがあることが分かります

   8:49  error  Missing trailing comma  @typescript-eslint/comma-dangle
  13:22  error  Missing trailing comma  @typescript-eslint/comma-dangle

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

–fixのオプションを付けることで修正できるので実行してみます

npx eslint ./src/index.tsx --fix

ファイル名をフォルダ名に変更することで一括でチェック or 修正を行うこともできます

ですが、コマンドを毎回実行するのも手間です…

そこで自動的にチェック／修正してくれるようにESLintの拡張機能をインストールします

インストール後にApp.tsxを表示すると赤の波線でエラー箇所が分かるようになっています

次に保存時に自動的に修正してくれるようにVSCodeの設定を変更します

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Airbnbの1 行に1つのJSX要素に制限するルールに準ずるように修正されたのですが…

このルールを無視したい場合もあると思います

そのような時は.eslintrc.jsを修正することで対応できます

"rules": {
  "react/jsx-one-expression-per-line": "off" //追加
}

最後にファイル単位でチェックを無視する方法を紹介します

ESLintの拡張機能をインストールすると.eslintrc.jsにエラーが出るようになっています

.eslintrc.jsにignorePatternsを追加することで特定のファイルやフォルダを無視することができます

"ignorePatterns": [ //追加
  ".eslintrc.js"
]

他にも.eslintignoreファイルを追加することでも対応できますがここでは説明を省略します

Prettierの導入

Prettierを導入する手順を解説します

Prettierとは？

Prettierとはソースコードの整形ツールです。 Node.js上で動作するので、ユーザーの環境に依存せずに、コードのフォーマットを開発者間で統一することができます。 JavaScriptだけでなくJSX、TypeScript、html、cssなどの様々な言語に対応しています

ESLintはフォーマット規則とコード品質に関する２つのルールがあります

ですが、フォーマットに関してはPrettierの方が優れているのです

そのため、フォーマットはPrettier、バグ検出はESLintという使い分けがされています

次のコマンドでローカル環境にインストールします

npm install --save-dev prettier eslint-config-prettier

バージョンが表示されれば完了です（執筆時点では2.8.4）

npx prettier -v

コマンドで整形後の結果を出力することもできますが、拡張機能を使った方が便利です

拡張機能をインストールしたら保存時に自動で整形されるようにVSCodeの設定を変更します

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

このままですとESLintと競合して正しく動作しないことがありますので.eslintrc.jsの設定を変更します

extends: [
  "airbnb",
  "airbnb-typescript",
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:@typescript-eslint/recommended",
  "prettier", //追加
],

ここまで設定が完了したらindex.tsxを保存して整形してみます

そうすると引用符がシングルクォートからダブルクォートに変換されてしまいました

これはPrettierのデフォルト値がダブルクォートを使用するようになっているためです

.prettierrc.jsを作成し、引用符にはAirbnbのルールに準じてシングルクォートを使用するように設定します

module.exports = {
  singleQuote: true,
};

これで再度保存をすればシングルクォートに変換されます

AirbnbとPrettierの設定値との違いは他にもtrailingCommaなどがありますが、好きな方を選択すればよいかと思います