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 の場所

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

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

例

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

"exclude" プロパティの使用

exclude 属性 (glob パターン) は、言語サービスにどのファイルがソースコードの一部ではないかを指示します。これにより、パフォーマンスを高いレベルに維持できます。IntelliSense が遅い場合は、exclude リストにフォルダーを追加します (VS Code は、速度低下を検出した場合にこれを行うように促します)。

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

ヒント: ビルドプロセスによって生成されたファイル (たとえば、dist ディレクトリ) を exclude することをお勧めします。これらのファイルは、候補が 2 回表示される原因となり、IntelliSense が遅くなります。

"include" プロパティの使用

または、include 属性 (glob パターン) を使用して、プロジェクト内のファイルを明示的に設定することもできます。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 エイリアスで動作させるには、glob パターンで 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 リストを編集するように促します。