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モジュールのいずれかを使用）、2つのファイル間に共通のプロジェクトコンテキストはありません。

• 明示的なプロジェクト - 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する必要があります。これらのファイルは提案が2回表示され、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 documentationを参照してください。

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リストを編集するように促します。