Visual Studio Code での JavaScript

Visual Studio Code には、JavaScript の IntelliSense、デバッグ、フォーマット、コードナビゲーション、リファクタリング、その他多くの高度な言語機能が組み込まれています。

これらの機能のほとんどはすぐに使用できますが、最高の体験を得るために基本的な設定が必要な場合があります。このページでは、VS Code に同梱されている JavaScript 機能の概要を説明します。VS Code Marketplace の拡張機能を使用すると、これらの組み込み機能のほとんどを拡張または変更できます。これらの機能の仕組みや設定方法についての詳細なガイドについては、「Working with JavaScript」を参照してください。

IntelliSense

IntelliSense は、インテリジェントなコード補完、ホバー情報、シグネチャ情報を提供するため、より速く正確にコードを書くことができます。

VS Code は、JavaScript プロジェクト内や、React、lodash、express などの多くの npm ライブラリ、および node、サーバーレス、IoT などの他のプラットフォームに対して IntelliSense を提供します。

VS Code の JavaScript IntelliSense、その設定方法、一般的な IntelliSense の問題のトラブルシューティングについては、「Working with JavaScript」を参照してください。

JavaScript プロジェクト (jsconfig.json)

jsconfig.json ファイルは、VS Code における JavaScript プロジェクトを定義します。jsconfig.json ファイルは必須ではありませんが、以下のような場合には作成することをお勧めします。

• ワークスペース内のすべての JavaScript ファイルが単一の JavaScript プロジェクトの一部とみなされるべきではない場合。jsconfig.json ファイルを使用すると、IntelliSense に表示されないように特定のファイルを除外できます。
• ワークスペース内の JavaScript ファイルのサブセットが単一のプロジェクトとして扱われるようにする場合。これは、依存関係に imports ではなく暗黙的なグローバル依存関係を使用するレガシーコードを扱う場合に便利です。
• フロントエンドとバックエンドの JavaScript コードなど、複数のプロジェクトコンテキストがワークスペースに含まれる場合。マルチプロジェクトのワークスペースでは、各プロジェクトのルートフォルダに jsconfig.json を作成してください。
• TypeScript コンパイラを使用して JavaScript ソースコードをダウンレベルコンパイルしている場合。

基本的な JavaScript プロジェクトを定義するには、ワークスペースのルートに jsconfig.json を追加します。

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

より高度な jsconfig.json の設定については、「Working with JavaScript」を参照してください。

スニペット

VS Code には、入力中に提案される基本的な JavaScript スニペットが含まれています。

Redux や Angular などの人気フレームワーク用のスニペットを含め、追加のスニペットを提供する拡張機能が多数あります。また、独自のスニペットを定義することも可能です。

JSDoc のサポート

VS Code は多くの標準的な JSDoc アノテーションを理解し、それらのアノテーションを使用して豊富な IntelliSense を提供します。オプションで、JSDoc コメントの型情報を利用して JavaScript の型チェックを行うこともできます。

関数宣言の前に /** を入力し、JSDoc comment スニペットの提案を選択することで、関数の JSDoc コメントを素早く作成できます。

JSDoc コメントの提案を無効にするには、setting(js/ts.suggest.jsdoc.enabled) 設定を無効にしてください。

ホバー情報

JavaScript のシンボルにマウスホバーすると、その型情報や関連するドキュメントをすぐに確認できます。

⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) キーボードショートカットで、現在のカーソル位置のホバー情報を表示できます。

シグネチャヘルプ

JavaScript の関数呼び出しを書くと、VS Code は関数のシグネチャに関する情報を表示し、現在入力中のパラメータをハイライトします。

シグネチャヘルプは、関数呼び出し内で ( または , を入力したときに自動的に表示されます。⇧⌘Space (Windows, Linux Ctrl+Shift+Space) を押すと、手動でシグネチャヘルプを起動できます。

自動インポート

自動インポートは、プロジェクト全体とその依存関係にある利用可能な変数を提案することでコーディングを高速化します。これらの提案のいずれかを選択すると、VS Code は自動的にファイルの先頭にそのインポートを追加します。

入力を開始するだけで、現在のプロジェクトで使用可能なすべての JavaScript シンボルの 提案が表示されます。自動インポートの提案には、どこからインポートされるかが表示されます。

これらの自動インポートの提案を選択すると、VS Code はそのインポートを追加します。

この例では、VS Code は material-ui から Button をインポートするコードをファイルの先頭に追加します。

自動インポートを無効にするには、"js/ts.suggest.autoImports" を false に設定します。

貼り付け時にインポートを追加

エディター間でコードをコピーして貼り付けると、VS Code はコードが貼り付けられたときに自動的にインポートを追加できます。未定義のシンボルを含むコードを貼り付けると、プレーンテキストとして貼り付けるか、インポートを追加するかを選択できる貼り付けコントロールが表示されます。

この機能はデフォルトで有効になっていますが、setting(js/ts.updateImportsOnPaste.enabled) 設定を切り替えることで無効にできます。

ペーストコントロールを表示せずにインポート付きのペーストをデフォルトの動作にするには、 ... 設定を構成します。text.updateImports.jsts または text.updateImports を含めると、ペースト時に常にインポートが追加されます。

インポートの整理

インポートの整理 (Organize Imports) ソースアクションは、JavaScript ファイル内のインポートを並べ替え、使用されていないインポートを削除します。

「ソース アクション」コンテキスト メニューから、またはキーボード ショートカット `⇧⌥O` (Windows、Linux `Shift+Alt+O`) を使用して、「インポートの整理」を実行できます。

インポートの整理は、JavaScript ファイルの保存時に自動的に実行するように設定することもできます。

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

ファイル移動時のインポート更新

JavaScript プロジェクト内の他のファイルからインポートされているファイルを移動または名前変更すると、VS Code はその移動されたファイルを参照しているすべてのインポートパスを自動的に更新できます。

setting(js/ts.updateImportsOnFileMove.enabled) 設定でこの動作を制御します。有効な設定値は以下の通りです。

• `"prompt"` - デフォルト。各ファイル移動のパスを更新するかどうかを尋ねます。
• "always" - 常に自動的にパスを更新します。
• "never" - 自動的にパスを更新せず、プロンプトも表示しません。

フォーマット

VS Code の組み込み JavaScript フォーマッタは、合理的なデフォルト値で基本的なコードフォーマットを提供します。

js/ts.format.* 設定で組み込みフォーマッタを構成します。組み込みフォーマッタが不要な場合は、"js/ts.format.enable" を false に設定して無効にします。

より特殊なコードフォーマットスタイルが必要な場合は、Marketplace から JavaScript フォーマット拡張機能をインストールしてみてください。

JSX と自動終了タグ

VS Code のすべての JavaScript 機能は JSX でも動作します。

JSX 構文は、通常の *.js ファイルと *.jsx ファイルの両方で使用できます。

VS Code には、JSX タグの自動クローズなど、JSX 特有の機能も含まれています。

JSX タグのクローズを無効にするには、"js/ts.autoClosingTags" を false に設定します。

コード ナビゲーション

コードナビゲーションを使用すると、JavaScript プロジェクト内を素早く移動できます。

• **定義に移動** F12 - シンボルの定義のソースコードに移動します。
• **定義をピーク** ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - シンボルの定義を示すピークウィンドウを表示します。
• **参照に移動** ⇧F12 (Windows, Linux Shift+F12) - シンボルのすべての参照を表示します。
• **型定義に移動** - シンボルを定義する型に移動します。クラスのインスタンスの場合、インスタンスが定義されている場所ではなく、クラス自体が表示されます。

コマンド パレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) の **シンボルに移動** コマンドを使用して、シンボル検索でナビゲートできます。

• **ファイル内のシンボルに移動** ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• **ワークスペース内のシンボルに移動** ⌘T (Windows, Linux Ctrl+T)

名前の変更

F2 を押すと、カーソル下のシンボルの名前を JavaScript プロジェクト全体で一括変更できます。

リファクタリング

VS Code には、JavaScript 用の便利なリファクタリング機能（関数の抽出や定数の抽出など）が含まれています。抽出したいソースコードを選択し、余白の電球アイコンをクリックするか、（⌘. (Windows, Linux Ctrl+.)）を押して利用可能なリファクタリングを確認してください。

利用可能なリファクタリングには以下が含まれます：

• メソッドまたは関数への抽出。
• 定数への抽出。
• 名前付きインポートと名前空間インポートの変換。
• 新しいファイルへの移動。

リファクタリングとその個々のリファクタリングのキーボード ショートカットの構成方法の詳細については、「リファクタリング」を参照してください。

さらに、コードアクションウィジェット: 近隣のクイックフィックスを含める ( ... ) 設定はデフォルトで有効になっており、カーソルの位置に関係なく、⌘. (Windows, Linux Ctrl+.) (コマンド ID editor.action.quickFix) からその行の最も近いクイックフィックスをアクティブにします。

このコマンドは、リファクタリングまたはクイック修正で修正されるソースコードを強調表示します。通常のコードアクションおよび非修正リファクタリングは、カーソル位置で引き続きアクティブにできます。

未使用の変数と到達不能なコード

常に真である if 文の else ブロックや参照されていないインポートなど、未使用の JavaScript コードはエディタ内で薄く表示されます。

カーソルを合わせてクイック修正コマンド（⌘. (Windows, Linux Ctrl+.)）をトリガーするか、電球アイコンをクリックすることで、この未使用コードを素早く削除できます。

未使用コードの薄い表示を無効にするには、"editor.showUnused" を false に設定します。JavaScript においてのみ未使用コードの表示を無効にすることも可能です。

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

保存時のコード アクション

editor.codeActionsOnSave Open in VS Code Open in VS Code Insiders 設定を使用すると、ファイルを保存したときに実行される一連のコードアクションを構成できます。例えば、保存時にインポートの整理を有効にするには以下のように設定します。

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

現在、次の列挙がサポートされています。

• `explicit` (デフォルト): 明示的に保存されたときにコード アクションをトリガーします。`true` と同じです。
• `always`: 明示的に保存されたとき、およびウィンドウまたはフォーカス変更からの自動保存時にコード アクションをトリガーします。
• `never`: 保存時にコード アクションをトリガーしません。`false` と同じです。

また、 editor.codeActionsOnSave Open in VS Code Open in VS Code Insiders を、順番に実行するコードアクションの配列に設定することもできます。

以下にソース アクションをいくつか示します。

• `"organizeImports"` - 保存時にインポートを整理できるようにします。
• `"fixAll"` - 保存時にすべてを自動修正します。すべてを一度に修正します（ESLint を含むすべてのプロバイダー）。
• `"fixAll.eslint"` - ESLint のみを自動修正します。
• `"addMissingImports"` - 保存時に不足しているすべてのインポートを追加します。

詳細については、「Node.js/JavaScript」を参照してください。

コード候補

VS Code は、Promise の `.then` 呼び出しのチェーンを `async` および `await` を使用するように変換するなど、いくつかの一般的なコードの簡略化を自動的に提案します。

提案を無効にするには、"js/ts.suggestionActions.enabled"をfalseに設定します。

AI による補完機能の強化

GitHub Copilot は、AI を活用したインライン提案を提供し、より高速かつスマートにコードを書くサポートをします。GitHub Copilot は多数の言語や幅広いフレームワークに対して提案を行い、特に Python、JavaScript、TypeScript、Ruby、Go、C#、C++ で非常にうまく機能します。VS Code での Copilot の利用開始方法についてさらに詳しく学びましょう。

新しいファイルを作成する - コマンドパレット（F1）の File: New File コマンドを使用できます。

JavaScript ファイル内で、以下の関数ヘッダーを入力します。

function calculateDaysBetweenDates(begin, end) {

Copilot は以下のような提案を行います - Tab キーを使用して提案を受け入れます。

インレイ ヒント

Inlay Hints は、コードを理解しやすくするために、ソース コードにインラインで追加情報を提供します。

パラメーター名 Inlay Hints は、関数呼び出しでパラメーター名を表示します。

これにより、各引数の意味を一目で理解するのに役立ちます。特に、ブールフラグを取る関数や、混同しやすいパラメーターを持つ関数に役立ちます。

パラメータ名のヒントを有効にするには、js/ts.inlayHints.parameterNames を設定します。3つの値が指定可能です。

• `none` — パラメーター Inlay Hints を無効にします。
• `literals` — リテラル（文字列、数値、ブール値）に対してのみ Inlay Hints を表示します。
• `all` — すべての引数に対して Inlay Hints を表示します。

**変数型インレイヒント** は、明示的な型注釈がない変数の型を表示します。

設定: setting(js/ts.inlayHints.variableTypes.enabled)

**プロパティ型インレイヒント** は、明示的な型注釈がないクラスプロパティの型を表示します。

設定: setting(js/ts.inlayHints.propertyDeclarationTypes.enabled)

**パラメーター型ヒント** は、暗黙的に型付けされたパラメーターの型を表示します。

設定: setting(js/ts.inlayHints.parameterTypes.enabled)

**戻り値の型インレイヒント** は、明示的な型注釈がない関数の戻り値の型を表示します。

設定: setting(js/ts.inlayHints.functionLikeReturnTypes.enabled)

参照 CodeLens

JavaScript の参照 CodeLens は、クラス、メソッド、プロパティ、エクスポートされたオブジェクトの参照回数をインラインで表示します。

参照 CodeLens を有効にするには、"js/ts.referencesCodeLens.enabled" を true に設定します。

参照数をクリックすると、参照リストをすばやく参照できます。

リンター

リンターは、疑わしいコードに対して警告を提供します。VS Code には組み込みの JavaScript リンターはありませんが、Marketplace で多くの JavaScript リンター拡張機能を利用できます。

型チェック

TypeScript の高度な型チェックやエラー報告機能の一部を、通常の JavaScript ファイルでも活用できます。これは一般的なプログラミングミスを見つけるための素晴らしい方法です。これらの型チェックにより、欠落しているインポートの追加や欠落しているプロパティの追加など、エキサイティングなクイック修正も可能になります。

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

JavaScript の型チェックはオプションの選択制です。ESLint などの既存の JavaScript 検証ツールを組み込みの型チェック機能と併用することも可能です。

デバッグ

VS Code には、JavaScript 用の優れたデバッグサポートが付属しています。ブレークポイントの設定、オブジェクトの検査、コールスタックのナビゲーション、デバッグコンソールでのコード実行などが可能です。詳細については、「デバッグ (Debugging)」トピックを参照してください。

クライアントサイドのデバッグ

ブラウザデバッガー（Edge や Chrome 用の組み込みデバッガー、または Debugger for Firefox など）を使用してクライアントサイドコードをデバッグできます。

サーバーサイドのデバッグ

VS Code で組み込みデバッガーを使用して Node.js をデバッグします。セットアップは簡単で、Node.js デバッグのチュートリアルが役立ちます。

人気の拡張機能

VS Code には JavaScript のための優れたサポートが組み込まれていますが、拡張機能を通じてデバッガー、スニペット、リンター、その他の JavaScript ツールを個別に追加インストールすることも可能です。

次のステップ

詳細については、以下をお読みください。

• Working with JavaScript - VS Code の JavaScript サポートと一般的な問題のトラブルシューティングに関する詳細情報。
• jsconfig.json - jsconfig.json プロジェクトファイルの詳しい説明。
• IntelliSense - IntelliSense についてと、それを言語で効果的に使用する方法を学びます。
• デバッグ - アプリケーションのデバッグをセットアップする方法を学びます。
• Node.js - Express Node.js アプリケーションを作成するチュートリアル。
• TypeScript - VS Code は TypeScript を強力にサポートしており、JavaScript コードに構造と強力な型安全性をもたらします。

よくある質問

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}