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 コードのルートに配置します。

より複雑なプロジェクトでは、1つのワークスペース内に複数の 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 ドキュメントを参照してください。

webpack エイリアスの使用

webpack エイリアスで IntelliSense を機能させるには、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 リストを編集するように促します。