Visual Studio で React 開発の初期環境を整えたメモ

Visual Studio のプロジェクトテンプレート React.js での ASP.NET Core から開発を始めた際の初期環境構築メモ。

この記事ではフロント側の対応のみ記載する。

環境

• Visual Studio 2019
• Node.js 16.15.0
• npm 8.5.5
  • パッケージとして sass のみ追加
  • TypeScript は最初から入っている 3.9.10 を使う

整えた内容

TypeScript のコンフィグ設定

Visual Studio では tsconfig.json ではなく、プロジェクトの ProjectName.csproj で TypeScript のコンフィグを設定する。

tsconfig.json を設置／編集しても設定内容が反映されず、 tsconfig.json 目線で検索してもなかなか情報が出てこないので、かなり、わかりにくい罠だと思う。

設定メニューから

まずは GUI ベースで設定する。

初期状態では ProjectName.csproj に TypeScript 系の項目が一切なくなんだか触りづらいため、まずは GUI にて設定。

1. Visual Studio のメニューから、 プロジェクト → プロジェクト名 のプロパティ を開く
2. TypeScript ビルド を開く
3. TypeScript コンパイラ出力をディレクトリにリダイレクトする に ClientApp/dist を設定する
4. 保存

これで出力先ほか、諸々の設定が ProjectName.csproj に書き出される。

直接

GUI で設定できない項目は ProjectName.csproj をソリューションエクスプローラ等から開いて、直接設定を記述する。

項目の参考は以下。

• Compiler Options in MSBuild

設定内容

ProjectName.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptSkipLibCheck>True</TypeScriptSkipLibCheck><!-- *.d.ts ファイルのエラー出力避け。 -->
  </PropertyGroup>
</Project>

.gitignore

GitHub の gitignore リポジトリ を使う。

以下を拝借し、ソリューションのルートに配置。

• VisualStudio.gitignore

追記

TypeScript のコンパイル先フォルダとして指定した ProjectName/ClientApp/dist を追加する。

消さないと Git のコミット候補に出てくるのでうっとうしい。

.gitignore 設置前に無視ファイルをコミットしている場合

git rm --cached で消す。

プロジェクト除外

外部ファイルや、コンパイル後のファイルはプロジェクトから除外する。

除外しないと移動用の検索で、開発者が直接触ることのないコードが引っかかってしまう。

ProjectName.csproj の編集

ソリューションエクスプローラからファイルやフォルダを右クリックして「プロジェクトから除外」しても消えないときがあるので、 ProjectName.csproj を直接編集する。

ProjectName.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
-   <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
+   <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**;$(SpaRoot)dist\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
-   <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
+   <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**;$(SpaRoot)dist\**" />
  </ItemGroup>
</Project>

入れ子設定の編集

Visual Studio にはファイルの入れ子設定がある。

プロジェクトテンプレートから始めたての状態だと、例えば以下の入れ子関係が用意されている。

• App.js → App.test.js
• packcage.json → packcage-lock.json

ソリューションエクスプローラ利用時、親の側にファイルが隠れるので便利だ。

設定の流れ

1. ソリューションエクスプローラ上部から、 入れ子っぽいアイコン右側の ▼ → カスタム設定の追加 を開く
2. ファイル名を入力し、テンプレートに Web を選択し、 OK 押下
3. 内容を好きに編集する
4. 保存

Windows ユーザーの場合、ユーザープロファイル内に保存される。

足した設定

*.filenesting.json

{
  "dependentFileProviders": {
    "add": {
      "pathSegment": {
        "add": {
          ".*": [
            ".ts",
          ]
  // 略
      "extensionToExtension": {
        "add": {
          ".module.scss": [
            ".jsx",
            ".tsx"
          ],
  // 略
}

コンポーネント単位で CSS を管理したいため。

グローバルな設定は src/globals/css 的な場所に置く。