LoginSignup
2

More than 1 year has passed since last update.

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

Posted at

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 をソリューションエクスプローラ等から開いて、直接設定を記述する。

項目の参考は以下。

設定内容

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

.gitignore

GitHub の 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 的な場所に置く。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2