jsconfig.json

jsconfig.json とは？

ディレクトリにjsconfig.jsonファイルが存在することは、そのディレクトリがJavaScriptプロジェクトのルートであることを示します。jsconfig.jsonファイルは、JavaScript言語サービスによって提供される機能のためのルートファイルとオプションを指定します。

ヒント: JavaScriptを使用しない場合、jsconfig.jsonについて心配する必要はありません。

ヒント: jsconfig.jsonは、TypeScriptの構成ファイルであるtsconfig.jsonの子孫です。jsconfig.jsonは、"allowJs"属性がtrueに設定されたtsconfig.jsonです。

jsconfig.json ファイルが必要な理由

Visual Studio CodeのJavaScriptサポートは、2つの異なるモードで動作します。

• ファイルスコープ - jsconfig.jsonなし: このモードでは、Visual Studio Codeで開かれたJavaScriptファイルは独立した単位として扱われます。a.jsファイルがb.tsファイルを明示的に参照しない限り（importまたはCommonJS モジュールのいずれかを使用しない限り）、両ファイル間に共通のプロジェクトコンテキストはありません。

• 明示的なプロジェクト - jsconfig.jsonあり: JavaScriptプロジェクトは、jsconfig.jsonファイルを通じて定義されます。ディレクトリにそのようなファイルが存在することは、そのディレクトリがJavaScriptプロジェクトのルートであることを示します。ファイル自体は、オプションでプロジェクトに属するファイル、プロジェクトから除外されるファイル、およびコンパイラオプション（下記参照）をリストできます。

ワークスペースにプロジェクトコンテキストを定義するjsconfig.jsonファイルがある場合、JavaScriptエクスペリエンスが向上します。このため、新しいワークスペースでJavaScriptファイルを開くと、jsconfig.jsonファイルの作成を促すヒントが表示されます。

jsconfig.json の場所

コードのこの部分、つまりウェブサイトのクライアントサイドを、jsconfig.jsonファイルを作成することでJavaScriptプロジェクトとして定義します。以下に示すように、ファイルをJavaScriptコードのルートに配置してください。

より複雑なプロジェクトでは、ワークスペース内に複数のjsconfig.jsonファイルが定義されている場合があります。これは、あるプロジェクトのコードが別のプロジェクトのコードのIntelliSenseとして提案されないようにするためです。以下に、clientフォルダーとserverフォルダーを持つプロジェクトを示し、2つの独立したJavaScriptプロジェクトであることを説明します。

例

デフォルトでは、JavaScript言語サービスはJavaScriptプロジェクト内のすべてのファイルを分析し、IntelliSenseを提供します。適切なIntelliSenseを提供するためには、除外または含めるファイルを指定する必要があります。

"exclude"プロパティの使用

exclude属性（グロブパターン）は、ソースコードの一部ではないファイルを言語サービスに伝えます。これにより、パフォーマンスが維持されます。IntelliSenseが遅い場合は、excludeリストにフォルダーを追加してください（VS Codeは遅延を検出した場合、これを行うように促します）。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

ヒント: ビルドプロセスによって生成されたファイル（例: distディレクトリ）をexcludeするようにしてください。これらのファイルは、提案が二重に表示され、IntelliSenseを遅くする原因となります。

"include"プロパティの使用

あるいは、include属性（グロブパターン）を使用して、プロジェクト内のファイルを明示的に設定できます。include属性が存在しない場合、これはデフォルトで、含まれるディレクトリおよびサブディレクトリ内のすべてのファイルを含みます。include属性が指定されている場合、それらのファイルのみが含まれます。以下は、明示的なinclude属性の例です。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

ヒント: excludeおよびinclude内のファイルパスは、jsconfig.jsonの場所からの相対パスです。

jsconfig のオプション

以下は、JavaScript言語サポートを設定するためのjsconfigの"compilerOptions"です。

ヒント: JavaScriptには実際のコンパイルは必要ないため、compilerOptionsに惑わされないでください。この属性は、jsconfig.jsonがTypeScriptのコンパイルに使用されるtsconfig.jsonの子孫であるため存在します。

利用可能なcompilerOptionsについては、TypeScriptのcompilerOptionsドキュメントで詳しく読むことができます。

webpack エイリアスの使用

IntelliSenseがwebpackエイリアスで動作するためには、pathsキーをグロブパターンで指定する必要があります。

例えば、エイリアス'ClientApp'の場合

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
}

そしてエイリアスを使用するには

import Something from 'ClientApp/foo';

ベストプラクティス

可能な限り、プロジェクトのソースコードの一部ではないJavaScriptファイルを含むフォルダーを除外する必要があります。

ヒント: ワークスペースにjsconfig.jsonがない場合、VS Codeはデフォルトでnode_modulesフォルダーを除外します。

以下は、一般的なプロジェクトコンポーネントと、除外を推奨されるインストールフォルダーをマッピングした表です。

JavaScriptプロジェクトが大きくなりすぎてパフォーマンスが低下する場合、それはnode_modulesのようなライブラリフォルダーが原因であることがよくあります。VS Codeがプロジェクトが大きくなりすぎていることを検出した場合、excludeリストの編集を促します。