VS Codeのエージェントモードを拡張するには、を試してください！

JavaScript の操作

このトピックでは、Visual Studio Code がサポートするJavaScriptの高度な機能のいくつかについて説明します。TypeScript 言語サービスを使用することで、VS Code はスマートな補完機能 (IntelliSense) とJavaScriptの型チェック機能を提供できます。

IntelliSense

Visual Studio Code の JavaScript IntelliSense は、インテリジェントなコード補完、パラメーター情報、参照検索、その他多くの高度な言語機能を提供します。JavaScript IntelliSense は、TypeScript チームによって開発された JavaScript 言語サービスによって提供されます。IntelliSense は、ほとんどの JavaScript プロジェクトで設定なしで動作するはずですが、JSDoc を使用するか、jsconfig.json プロジェクトを設定することで、IntelliSense をさらに便利にすることができます。

型推論、JSDoc アノテーション、TypeScript 宣言、および JavaScript と TypeScript プロジェクトの混在に基づく JavaScript IntelliSense の動作の詳細については、JavaScript 言語サービスのドキュメントを参照してください。

型推論が意図した情報を提供しない場合、型情報は JSDoc アノテーションを使用して明示的に提供できます。このドキュメントでは、現在サポートされている JSDoc アノテーションについて説明します。

JavaScript IntelliSense ウィンドウは、オブジェクト、メソッド、プロパティに加えて、ファイル内のシンボルに対する基本的な単語補完も提供します。

型定義と自動型取得

JavaScript ライブラリとフレームワークの IntelliSense は、TypeScript 型宣言 (typings) ファイルによって提供されます。型宣言ファイルは TypeScript で記述されているため、パラメーターと関数のデータ型を表現でき、VS Code がパフォーマンスの高い方法で豊富な IntelliSense エクスペリエンスを提供できます。

多くの人気ライブラリには型定義ファイルが付属しているため、それらの IntelliSense は自動的に提供されます。型定義が含まれていないライブラリの場合、VS Code の自動型取得により、コミュニティによって管理されている型定義ファイルが自動的にインストールされます。

自動型取得には、npmjs (Node.js パッケージマネージャー) が必要です。これは Node.js ランタイムに含まれています。この画像では、人気の lodash ライブラリのメソッドシグネチャ、パラメーター情報、メソッドのドキュメントを含む IntelliSense を確認できます。

lodash typings

型宣言ファイルは、プロジェクトの package.json にリストされているパッケージ、または JavaScript ファイルにインポートするパッケージについて、Visual Studio Code によって自動的にダウンロードおよび管理されます。

{
  "dependencies": {
    "lodash": "^4.17.0"
  }
}

あるいは、型宣言ファイルを取得するパッケージを jsconfig.json に明示的にリストすることもできます。

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

ほとんどの一般的な JavaScript ライブラリは、宣言ファイルが付属しているか、型宣言ファイルが利用可能です。

自動型取得のための npm 未インストール警告の修正

自動型取得は、npm (Node.js パッケージマネージャー) を使用して、型宣言 (typings) ファイルをインストールおよび管理します。自動型取得が正しく機能するように、まず npm がマシンにインストールされていることを確認してください。

ターミナルまたはコマンドプロンプトからnpm --versionを実行して、npm がインストールされ利用可能であることを素早く確認します。

npm は Node.js ランタイムと一緒にインストールされます。Nodejs.org からダウンロードできます。現在の LTS (Long Term Support) バージョンをインストールすると、npm 実行可能ファイルがデフォルトでシステムパスに追加されます。

npm がインストールされているのに警告メッセージが表示される場合は、typescript.npm 設定を使用して、npm がインストールされている場所を VS Code に明示的に指定できます。これは、マシン上の npm 実行可能ファイルの完全パスに設定する必要があります。これは、ワークスペースでパッケージを管理するために使用している npm のバージョンと一致する必要はありません。typescript.npm は TypeScript 2.3.4 以降が必要です。

たとえば、Windows では、次のようなパスをsettings.jsonファイルに追加します

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

JavaScript projects (jsconfig.json)

ディレクトリに jsconfig.json ファイルが存在すると、そのディレクトリが JavaScript プロジェクトのルートであることを示します。jsconfig.json は、ルートファイルと、JavaScript 言語サービスによって提供される言語機能のオプションを指定します。一般的な設定では、jsconfig.json ファイルは必要ありませんが、jsconfig.json を追加したい状況もあります。

  • すべてのファイルが JavaScript プロジェクトに含まれるべきではありません (たとえば、IntelliSense の表示から一部のファイルを除外したい場合)。この状況は、フロントエンドコードとバックエンドコードでよく見られます。
  • ワークスペースに複数のプロジェクトコンテキストが含まれている場合。この状況では、各プロジェクトのルートフォルダーに jsconfig.json ファイルを追加する必要があります。
  • TypeScript コンパイラを使用して JavaScript ソースコードをダウンレベルコンパイルしている場合。

jsconfig.json の場所

コードを JavaScript プロジェクトとして定義するには、以下に示すように、JavaScript コードのルートに jsconfig.json を作成します。JavaScript プロジェクトは、プロジェクトのソースファイルであり、派生ファイルやパッケージ化されたファイル (dist ディレクトリなど) を含めるべきではありません。

jsconfig setup

より複雑なプロジェクトでは、ワークスペース内に複数の jsconfig.json ファイルを定義する場合があります。これは、あるプロジェクトのソースコードが別のプロジェクトの IntelliSense に表示されないようにするためです。

以下に示すのは、client と server フォルダーを持つプロジェクトで、2つの個別の JavaScript プロジェクトを示しています。

multiple jsconfigs

jsconfig.json の記述

以下は、jsconfig.json ファイルのシンプルなテンプレートです。これは、JavaScript の target を ES6 と定義し、exclude 属性は node_modules フォルダーを除外します。このコードを jsconfig.json ファイルにコピー＆ペーストできます。

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

exclude 属性は、言語サービスにどのファイルがソースコードの一部ではないかを伝えます。IntelliSense が遅い場合は、exclude リストにフォルダーを追加します (VS Code は、遅い補完を検出した場合にこれを行うよう促します)。ビルドプロセスによって生成されたファイル (dist ディレクトリなど) は除外することをお勧めします。これらのファイルは、候補が二重に表示される原因となり、IntelliSense を遅くします。

include 属性を使用して、プロジェクト内のファイルを明示的に設定できます。include 属性が存在しない場合、デフォルトでは、含まれるディレクトリとそのサブディレクトリ内のすべてのファイルが含まれます。include 属性が指定されている場合、それらのファイルのみが含まれます。

include 属性を明示的に指定した例を次に示します。

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

最良のプラクティスであり、エラーが最も少ない方法は、単一の src フォルダーを持つ include 属性を使用することです。exclude および include のファイルパスは、jsconfig.json の場所からの相対パスであることに注意してください。

詳細については、完全な jsconfig.json ドキュメントを参照してください。

TypeScript への移行

TypeScript と JavaScript のプロジェクトを混在させることは可能です。TypeScript への移行を開始するには、jsconfig.json ファイルの名前を tsconfig.json に変更し、allowJs プロパティを true に設定します。詳細については、JavaScript からの移行を参照してください。

注: jsconfig.json は tsconfig.json ファイルと同じですが、allowJs が true に設定されています。利用可能なその他のオプションについては、tsconfig.json のドキュメントをこちらで参照してください。

Type checking JavaScript

VS Code では、TypeScript の高度な型チェックおよびエラー報告機能の一部を通常の JavaScript ファイルで活用できます。これは、一般的なプログラミングミスを捕捉するのに最適な方法です。これらの型チェックにより、JavaScript のためのいくつか興味深いクイックフィックスも可能になり、それには不足しているインポートの追加や不足しているプロパティの追加が含まれます。

Using type checking and Quick Fixes in a JavaScript file

TypeScript は、.ts ファイルと同様に .js ファイルでも型を推論できます。型が推論できない場合は、JSDoc コメントを使用して指定できます。JavaScript ファイルの型チェックで、TypeScript が JavaScript の型チェックに JSDoc をどのように使用するかについて詳しく読むことができます。

JavaScript の型チェックはオプションであり、オプトインです。ESLint などの既存の JavaScript 検証ツールは、新しい組み込みの型チェック機能と併用できます。

必要に応じて、いくつかの異なる方法で型チェックを開始できます。

ファイルごと

JavaScript ファイルで型チェックを有効にする最も簡単な方法は、ファイルの先頭に // @ts-check を追加することです。

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

// @ts-check の使用は、いくつかのファイルで型チェックを試したいだけで、まだコードベース全体で有効にしたくない場合に良いアプローチです。

設定を使用する

コードを変更せずにすべての JavaScript ファイルで型チェックを有効にするには、ワークスペースまたはユーザー設定に "js/ts.implicitProjectConfig.checkJs": true を追加するだけです。これにより、jsconfig.json または tsconfig.json プロジェクトの一部ではない JavaScript ファイルの型チェックが有効になります。

ファイルの先頭に // @ts-nocheck コメントを追加することで、個々のファイルを型チェックの対象外にすることができます。

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

エラーの前の行に // @ts-ignore コメントを使用することで、JavaScript ファイル内の個々のエラーを無効にすることもできます。

let easy = 'abc';
// @ts-ignore
easy = 123; // no error

jsconfig または tsconfig を使用する

jsconfig.json または tsconfig.json の一部である JavaScript ファイルの型チェックを有効にするには、プロジェクトのコンパイラオプションに "checkJs": true を追加します。

jsconfig.json:

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

これにより、プロジェクト内のすべての JavaScript ファイルの型チェックが有効になります。ファイルごとに型チェックを無効にするには、// @ts-nocheck を使用できます。

JavaScript の型チェックには TypeScript 2.3 が必要です。ワークスペースで現在アクティブな TypeScript のバージョンが不明な場合は、TypeScript: Select TypeScript Version コマンドを実行して確認してください。このコマンドを実行するには、エディタで .js/.ts ファイルを開いている必要があります。TypeScript ファイルを開くと、バージョンが右下隅に表示されます。

グローバル変数と型チェック

グローバル変数や非標準の DOM API を使用するレガシー JavaScript コードを扱っているとします。

window.onload = function() {
  if (window.webkitNotifications.requestPermission() === CAN_NOTIFY) {
    window.webkitNotifications.createNotification(null, 'Woof!', '🐶').show();
  } else {
    alert('Could not notify');
  }
};

上記のコードで // @ts-check を使用しようとすると、グローバル変数の使用に関する多数のエラーが表示されます。

  1. Line 2 - 型 'Window' にプロパティ 'webkitNotifications' は存在しません。
  2. Line 2 - 名前 'CAN_NOTIFY' が見つかりません。
  3. Line 3 - 型 'Window' にプロパティ 'webkitNotifications' は存在しません。

// @ts-check の使用を継続したいが、これらがアプリケーションの実際の問題ではないと確信している場合は、これらのグローバル変数について TypeScript に知らせる必要があります。

まず、プロジェクトのルートに jsconfig.json を作成します。

{
  "compilerOptions": {},
  "exclude": ["node_modules", "**/node_modules/*"]
}

変更が適用されたことを確認するために、VS Code を再読み込みしてください。jsconfig.json が存在することで、TypeScript はあなたの JavaScript ファイルがより大きなプロジェクトの一部であることを認識します。

次に、ワークスペースのどこかに globals.d.ts ファイルを作成します。

interface Window {
  webkitNotifications: any;
}

declare var CAN_NOTIFY: number;

d.ts ファイルは型宣言です。この場合、globals.d.ts は、グローバルな CAN_NOTIFY が存在すること、および window に webkitNotifications プロパティが存在することを TypeScript に知らせます。d.ts の記述に関する詳細は、TypeScript のドキュメントで確認できます。d.ts ファイルは JavaScript の評価方法を変更せず、より良い JavaScript 言語サポートを提供するためにのみ使用されます。

Using tasks

TypeScript コンパイラの使用

TypeScript の主要な機能の1つは、最新の JavaScript 言語機能を使用し、それらの新しい機能をまだ理解していない JavaScript ランタイムで実行できるコードを出力する能力です。JavaScript も同じ言語サービスを使用することで、この同じ機能を活用できるようになりました。

TypeScript コンパイラ tsc は、JavaScript ファイルを ES6 から別の言語レベルにダウンレベルコンパイルできます。jsconfig.json を希望のオプションで構成し、次に -p 引数を使用して tsc に jsconfig.json ファイルを使用させます。たとえば、tsc -p jsconfig.json でダウンレベルコンパイルします。

ダウンレベルコンパイルのコンパイラオプションの詳細については、jsconfig ドキュメントを参照してください。

Babel の実行

Babel トランスパイラは、ES6 ファイルをソースマップ付きの読みやすい ES5 JavaScript に変換します。以下の設定を tasks.json ファイル (ワークスペースの .vscode フォルダーの下にあります) に追加することで、Babel をワークフローに簡単に統合できます。group 設定により、このタスクがデフォルトのタスク: ビルドタスクの実行のジェスチャーになります。isBackground は、VS Code にこのタスクをバックグラウンドで実行し続けるように指示します。詳細については、タスクを参照してください。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch",
      "command": "${workspaceFolder}/node_modules/.bin/babel",
      "args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
      "type": "shell",
      "group": { "kind": "build", "isDefault": true },
      "isBackground": true
    }
  ]
}

これを追加すると、⇧⌘B (Windows、Linux Ctrl+Shift+B) (ビルドタスクの実行) コマンドで Babel を起動でき、src ディレクトリから lib ディレクトリにすべてのファイルをコンパイルします。

ヒント: Babel CLI のヘルプについては、Babel の使用の指示を参照してください。上記の例では CLI オプションを使用しています。

Disable JavaScript support

Flow などの他の JavaScript 言語ツールがサポートする JavaScript 言語機能を使用したい場合は、VS Code の組み込み JavaScript サポートを無効にできます。これは、JavaScript 言語サポートも提供する組み込みの TypeScript 言語拡張機能 TypeScript and JavaScript Language Features (vscode.typescript-language-features) を無効にすることで行います。

JavaScript/TypeScript のサポートを無効にするには、拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+B)) に移動し、組み込み拡張機能 (... その他のアクションドロップダウンの組み込み拡張機能を表示) でフィルタリングし、「typescript」と入力します。TypeScript and JavaScript Language Features 拡張機能を選択し、無効にするボタンを押します。VS Code の組み込み拡張機能はアンインストールできませんが、無効にすることはでき、いつでも再有効化できます。

TypeScript and JavaScript Language Features extension

Partial IntelliSense mode

VS Code は、JavaScript および TypeScript のプロジェクト全体の IntelliSense を提供しようとします。これにより、自動インポートや定義へ移動などの機能が可能になります。ただし、VS Code が現在開いているファイルのみに限定され、JavaScript または TypeScript プロジェクトを構成する他のファイルを読み込めない場合があります。

これはいくつかの状況で発生します。

  • vscode.dev または github.dev で JavaScript または TypeScript コードを操作しており、VS Code がブラウザで実行されている場合。
  • 仮想ファイルシステムからファイルを開く場合 (例: GitHub Repositories 拡張機能を使用する場合)。
  • プロジェクトが現在読み込み中です。読み込みが完了すると、そのプロジェクト全体の IntelliSense が開始されます。

これらの場合、VS Code の IntelliSense は部分モードで動作します。部分モードは、開いている JavaScript または TypeScript ファイルに対して可能な限り IntelliSense を提供しようとしますが、制限があり、ファイル間をまたぐ IntelliSense 機能は提供できません。

影響を受ける機能は？

部分モードで無効になるか、機能が制限される機能の不完全なリストを以下に示します。

  • 開いているすべてのファイルは、単一のプロジェクトの一部として扱われます。
  • jsconfig または tsconfig の設定オプション (target など) は尊重されません。
  • 構文エラーのみが報告されます。セマンティックエラー (未知のプロパティへのアクセスや関数への誤った型の渡りなど) は報告されません。
  • セマンティックエラーに対するクイックフィックスは無効になります。
  • シンボルは現在のファイル内でのみ解決できます。他のファイルからインポートされたシンボルは、any 型として扱われます。
  • 定義へ移動やすべての参照の検索などのコマンドは、プロジェクト全体ではなく、開いているファイルでのみ機能します。これは、node_module にインストールしたパッケージからのシンボルが解決されないことも意味します。
  • ワークスペースシンボル検索は、現在開いているファイルからのシンボルのみを含みます。
  • 自動インポートは無効になります。
  • 名前変更は無効になります。
  • 多くのリファクタリングが無効になります。

vscode.dev と github.dev では、いくつかの追加機能が無効になります。

部分モードであるかどうかの確認

現在のファイルがプロジェクト全体の IntelliSense ではなく部分モード IntelliSense を使用しているかどうかを確認するには、ステータスバーの JavaScript または TypeScript 言語ステータス項目にカーソルを合わせます。

Partial mode status item

現在のファイルが部分モードの場合、ステータス項目には部分モードと表示されます。

07/09/2025