Visual Studio Code + Reactをベースに開発環境を構築するプロセス

開発環境ウィンドウ

開発ツール Visual Studio Code

ノードのインストールとnpm

Windows に Node をインストールするには、Node の公式 Web サイトから直接ダウンロードし、通常のソフトウェアとしてインストールします。
インストールが完了したら、コンソールで node を実行して、インストールが成功したかどうかをテストできます。Win + r でcmdと入力し、ターミナルでnode -vを直接入力すると、バージョン番号とインストールが正常に行われたかどうかが出力されます。
現在、新しいバージョンの node には npm が付属しています ( npm は node とともにインストールされるパッケージ管理ツールです)。ここで node をインストールし、インストールが正常にテストされたら、コンソールでnpm -vと入力して、正常にインストールされたかどうかを確認できます。成功するとバージョン番号が出力されます。

Visual Studio Codeをインストールする

VSコードの通常のソフトウェアのインストールについては何も注意する必要はありません。ダウンロードしてインストールするだけです。

Reactをインストールする

VS Code での React JavaScript チュートリアルのドキュメントを参照してください。このドキュメントは非常に詳細なので、基本的にそれに従うだけで問題はありません。

ローカルフォルダー、つまりプロジェクトが保存されているフォルダーを作成し、フォルダー内のコンソールを開きます。ここでは git bash を使用します。フォルダー内で右クリックして git bash を見つけて起動します。
コンソールにnpm install -g create-react-appと入力して、npmを使用してcreate-react-appをインストールします。
create-react-app をインストールしたら、続けてcreate-react-app my-appと入力してプロジェクトを作成します。my my-appが作成された React プロジェクトです。しばらく待つと (ここでいくつかの依存パッケージをダウンロードする必要があります)、作成されたファイル構造全体を確認できます。

画像.png

コンソールディレクトリをプロジェクトディレクトリに切り替え、 npm startを実行して、現在のプロジェクトが正常に作成されたかどうかを確認します。通常、コマンドを入力すると、デフォルトのブラウザが直接開かれ、http://localhost:3000/ がプレビューされます。このとき、反応ページが表示されます。

画像.png

この時点で、新しく作成されたReactプロジェクトは正常に実行できます。
5. VS Codeでプロジェクトフォルダを開き、ファイル構造全体を確認します。

画像.png

すべてのファイルは VS Code を使用して直接変更できます。

Chrome用デバッガーをインストールする

1.VS Code は、Chrome カーネルデバッグの使用をサポートする Chrome 用デバッガープラグインを提供します。

画像.png

直接検索してインストールし、VS Codeをリロードします
2. デバッグにChrome用デバッガーを使用するには、プロジェクトの追加設定が必要です。

画像.png

ここで起動構成を設定します。元のドキュメントでは、新しいlaunch.jsonが作成されると述べています。ここにはlaunch.jsonファイルがすでにあるので、構成を直接追加できます。ここには構成ノードを直接追加するための [構成の追加] ボタンがあります。ここには Chrome 関連のノードが 2 つあり、1 つは Launch、もう 1 つは Attach であることに注意してください。

画像.png

2 つのノードを作成したら、 "request": "launch"というノードを見つけて、React プロジェクトを起動するために使用される URL ( http://localhost:3000/に設定します。他の構成ノードはデフォルトのままにしておき、疑問がある場合は変更します。変更後の構成は次のとおりです。

{
    // IntelliSense を使用して関連するプロパティについて学習します。 
    // マウスをホバーすると、既存のプロパティの説明が表示されます。
    // 詳細については、https://go.microsoft.com/fwlink/?linkid=830387 をご覧ください。
    "バージョン": "0.2.0",
    「構成」: [
        {
            "タイプ": "クロム",
            「リクエスト」: 「添付」、
            "name": "Chrome に添付",
            「ポート」: 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "タイプ": "クロム",
            「リクエスト」: 「起動」、
            "名前": "クロム",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "タイプ": "ノード",
            「リクエスト」: 「起動」、
            "名前": "ノード",
            "プログラム": "${workspaceFolder}\\start"
        }
    ]
}

プロジェクトnpm startを開始し、デバッグツールバーを開きます。

画像.png

開始するには、以前に追加したChromeノードを選択すると、新しいChromeページが開きます。

プロジェクトのソースコードでindex.jsファイルを見つけ、ブレークポイントを設定し、行番号の前の左ボタンをクリックしてページを更新し、エンドポイントに入ります。

画像.png

この時点で、デバッグは簡単になりました。

eslintをインストールする

eslint は、構成可能な JavaScript および JSX リンターです。構文エラーのチェックに使用できます。

コンソールにnpm install -g eslintと入力してeslintをインストールします。
VS Codeからeslintプラグインをインストールする

画像.png

3. VS Code のコマンドパネルを開いてビュー内で直接探すか、 Ctrl+Shift+Pを押して ESLint と入力し、 .eslintrc.jsonファイルを作成するオプションを見つけます。この時点で、プロジェクトのルートディレクトリに構成ファイルが作成されます。この時点で、プロジェクト内のいくつかの構文エラーが自動的に検出されます。

画像.png

参照ドキュメントにはセミコロンを構成するためのルールもあり、必要に応じて追加できます。

これで、Visual Studio Code + React 開発環境の設定に関するこの記事は終了です。vscode react 環境の設定の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: