More than 3 years have passed since last update.

Windows10で、VSCode+React+TypeScriptの開発環境構築手順(2021.08) ※ついでにeslint,prettier,prop-typesもインストール

Last updated at 2021-08-28Posted at 2021-08-20

概要

" VSCode React TypeScript"で、ググると結構、出てくるのですが、なぜか、僕の環境だと上手くいきませんでした。

なので、僕なりの上手くいった方法を残しておきます。
※Chrome、VSCode、Node.jsはインストール済を前提にしています。

内容

VSCode上に、React+TypeScriptの開発環境を構築し、
デバッグするまでを目指します。

前提

　・プロジェクトは、D:\Develop\react001 に作成します。

手順

1. Reactプロジェクトのテンプレート作成

以下を、コマンドプロンプトで実行。

コマンドプロンプト

mkdir D:\Develop\react001
cd D:\Develop\react001
d:
npx create-react-app ./ --template typescript

以下の様に、Happy hacking!が表示されれば正常に作成できてます。

2.eslintを設定

Eslintは、静的解析ツールです。
上記のプロジェクト生成が成功した時点でeslintのインストールは完了しているので、
eslintを初期化します。

コマンドプロンプト

npx eslint --init
√ 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?
 → Yesを選択
√ Where does your code run?
 → browserを選択
√ What format do you want your config file to be in?
 → JavaScriptを選択
√ Would you like to install them now with npm?
 → Yesを選択

3.Prettierをローカルインストール

prettierは、ソースコードを整形してくれるツールですね。
便利なので入れておきます。

コマンドプロンプト

npm install --save-dev --save-exact prettier

4.eslint-config-prettier をインストール

PrettierとEslintは喧嘩するので、それを解決するツールを入れます。

コマンドプロンプト

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

5.eslint-config-prettier の設定ファイルを修正。

.eslintrc.json

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
+       "prettier"
    ],

6.prettierの設定ファイル".prettierrc"を手で作成

D:\Develop\react002 配下に作成する。

.prettierrc

# 中身を下記にする。
+{
+  semi : true,
+}

7.VSCodeのデバッグ設定

VSCodeでデバッグを行うために、構成ファイルを作成します。

構成ファイルの新規作成

1.で作成したフォルダをVSCodeで開く → 実行メニュー → 構成の追加

Chromeを選択。

launch.jsonを修正

launch.jsonが開くので、上記の様に修正。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
-           "url": "http://localhost:8080",
+           "url": "http://localhost:3000",
-           "webRoot": "${workspaceFolder}"
+           "webRoot": "${workspaceFolder}",
+           "sourceMaps": true,
+           "sourceMapPathOverrides": {
+               "webpack:///./*": "${webRoot}/src/*"
+           },
        }
    ]
}