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

JavaScript の操作

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

IntelliSense

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

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

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

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

型付けと自動型取得

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

多くの一般的なライブラリには型付けファイルが同梱されているため、自動的に IntelliSense が得られます。型付けが含まれていないライブラリの場合、VS Code の「自動型取得」によって、コミュニティがメンテナンスしている型付けファイルが自動的にインストールされます。

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

lodash typings

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript プロジェクト (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 の記述

以下は、JavaScript の target を ES6 に、exclude 属性で node_modules フォルダーを除外する、jsconfig.json ファイルの簡単なテンプレートです。このコードを jsconfig.json ファイルにコピーして貼り付けることができます。

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

exclude 属性は、言語サービスにどのファイルがソースコードの一部ではないかを伝えます。IntelliSense が遅い場合は、exclude リストにフォルダーを追加してください (VS Code は遅い補完を検出すると、これを実行するように促します)。ビルドプロセスによって生成されたファイル (dist ディレクトリなど) は exclude する必要があります。これらのファイルは、提案が2回表示される原因となり、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 のドキュメントを参照してください。

JavaScript の型チェック

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

Using type checking and Quick Fixes in a JavaScript file

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

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: TypeScript バージョンを選択 コマンドを実行して確認してください。このコマンドを実行するには、エディタで .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 - Property 'webkitNotifications' does not exist on type 'Window'.
  2. Line 2 - Cannot find name 'CAN_NOTIFY'.
  3. Line 3 - Property 'webkitNotifications' does not exist on type 'Window'.

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

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

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

次に、VS Code をリロードして変更が適用されたことを確認します。jsconfig.json の存在は、JavaScript ファイルがより大きなプロジェクトの一部であることを TypeScript に知らせます。

次に、ワークスペース内のどこかに 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 言語サポートを提供するためにのみ使用されます。

タスクの使用

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 に変換します。ワークスペースの .vscode フォルダーにある tasks.json ファイルに以下の設定を追加することで、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 オプションを使用しています。

JavaScript サポートの無効化

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

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

TypeScript and JavaScript Language Features extension

部分 IntelliSense モード

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

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

08/07/2025