Visual Studio Code での JavaScript

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

これらの機能のほとんどは、すぐに利用できますが、最高の体験を得るためには基本的な設定が必要なものもあります。このページでは、VS Code に搭載されている JavaScript 機能についてまとめます。VS Code Marketplace の拡張機能は、これらの組み込み機能のほとんどを拡張または変更できます。これらの機能の動作と構成方法の詳細については、「Working with JavaScript」を参照してください。

IntelliSense

IntelliSense は、インテリジェントなコード補完、ホバー情報、シグネチャ情報を表示し、コードをより速く正確に記述できるようにします。

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

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 コメントの提案を無効にするには、"javascript.suggest.completeJSDocs": false に設定します。

ホバー情報

JavaScript シンボルにカーソルを合わせると、その型情報と関連ドキュメントをすばやく確認できます。

The ⌘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のインポートを追加します。

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

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

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

この機能は既定で有効になっていますが、javascript.updateImportsOnPaste.enabled 設定を切り替えることで無効にできます。

貼り付けコントロールを表示せずに、インポートを伴う貼り付けを既定の動作にすることができます。editor.pasteAs.preferences 設定を構成することで、これを実現できます。貼り付け時に常にインポートを追加するには、text.updateImports.jsts または text.updateImports を含めます。

インポートの整理

インポートの整理 ソースアクションは、JavaScript ファイル内のインポートをソートし、未使用のインポートを削除します。

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

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

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

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

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

javascript.updateImportsOnFileMove.enabled 設定がこの動作を制御します。有効な設定値は次のとおりです。

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

フォーマット

VS Code の組み込み JavaScript フォーマッターは、妥当な既定値で基本的なコードの書式設定を提供します。

javascript.format.* 設定は、組み込みフォーマッターを構成します。または、組み込みフォーマッターが邪魔になる場合は、"javascript.format.enable" を false に設定して無効にしてください。

より専門的なコード書式設定スタイルが必要な場合は、Marketplace から JavaScript 書式設定拡張機能のいずれかをインストールしてみてください。

JSX と自動閉じタグ

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

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

VS Code には、JSX タグの自動閉じなどの JSX 固有の機能も含まれています。

JSX タグの閉じを無効にするには、"javascript.autoClosingTags" を false に設定します。

コード ナビゲーション

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

• 定義へ移動 F12 - シンボル定義のソース コードに移動します。
• 定義をPeek ⌥F12 (Windows は Alt+F12、Linux は Ctrl+Shift+F10) - シンボルの定義を表示する Peek ウィンドウを表示します。
• 参照へ移動 ⇧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+.)) を押すと、利用可能なリファクタリングが表示されます。

利用可能なリファクタリングには、次のものが含まれます。

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

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

さらに、コードアクション ウィジェット: 近隣のクイックフィックスを含める (editor.codeActionWidget.includeNearbyQuickFixes) は既定で有効になっている設定であり、その行のどこにカーソルがあっても、⌘. (Windows、Linux では Ctrl+.) (コマンド ID editor.action.quickFix) から行内の最も近いクイックフィックスをアクティブ化します。

このコマンドは、クイックフィックスでリファクタリングまたは修正されるソースコードをハイライト表示します。通常のコードアクションと修正以外のリファクタリングは、カーソル位置で引き続きアクティブ化できます。

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

常に true であるifステートメントの else ブロックや参照されていないインポートなど、未使用の JavaScript コードはエディターでフェードアウトされます。

この未使用のコードは、カーソルを合わせてクイック フィックス コマンド (⌘. (Windows、Linux では Ctrl+.)) をトリガーするか、電球アイコンをクリックすることで、すばやく削除できます。

未使用コードのフェードアウトを無効にするには、"editor.showUnused" を false に設定します。JavaScript のみで未使用コードのフェードアウトを無効にするには、次の設定を行います。

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

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

editor.codeActionsOnSave 設定を使用すると、ファイルを保存するときに実行される一連のコード アクションを構成できます。たとえば、次の設定で保存時のインポート整理を有効にできます。

// 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 を、順に実行するコード アクションの配列に設定することもできます。

ソース アクションの一部を次に示します。

• "organizeImports" - 保存時のインポート整理を有効にします。
• "fixAll" - 保存時の自動修正は、すべてのプロバイダー (ESLint を含む) の可能なすべての修正を一度に計算します。
• "fixAll.eslint" - ESLint のみ自動修正。
• "addMissingImports" - 保存時に不足しているすべてのインポートを追加します。

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

コードの提案

VS Code は、プロミスに対する一連の.then呼び出しをasyncおよびawaitを使用するように変換するなど、いくつかの一般的なコードの簡素化を自動的に提案します。

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

AI で補完を強化する

GitHub Copilot は、より速く、より賢くコードを書くのに役立つ AI 搭載のコード補完ツールです。VS Code でGitHub Copilot 拡張機能を使用して、コードを生成したり、生成されたコードから学習したりできます。

GitHub Copilot は、多数の言語とさまざまなフレームワークで提案を提供し、特に Python、JavaScript、TypeScript、Ruby、Go、C#、および C++ でうまく機能します。

Copilot の使用開始方法については、Copilot ドキュメントで詳しく学ぶことができます。

Copilot 拡張機能をインストールして有効にすると、JavaScript プロジェクトでテストできます。

新しいファイルを作成します。コマンド パレット (F1) でファイル: 新規ファイル コマンドを使用できます。

JavaScript ファイルに、次の関数ヘッダーを入力します。

function calculateDaysBetweenDates(begin, end) {

Copilot は次のような提案を提供します。提案を受け入れるにはTabを使用します。

インレイヒント

インレイ ヒントは、ソース コードに追加のインライン情報を追加して、コードの動作を理解するのに役立ちます。

パラメーター名のインレイ ヒント は、関数呼び出しのパラメーターの名前を表示します。

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

パラメーター名のヒントを有効にするには、javascript.inlayHints.parameterNames を設定します。次の 3 つの可能な値があります。

• none — パラメーターのインレイ ヒントを無効にします。
• literals — リテラル (文字列、数値、ブール値) のインレイ ヒントのみを表示します。
• all — すべての引数のインレイ ヒントを表示します。

変数型のインレイ ヒント は、明示的な型アノテーションを持たない変数の型を表示します。

設定: javascript.inlayHints.variableTypes.enabled

プロパティ型のインレイ ヒント は、明示的な型アノテーションを持たないクラス プロパティの型を表示します。

設定: javascript.inlayHints.propertyDeclarationTypes.enabled

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

設定: javascript.inlayHints.parameterTypes.enabled

戻り値の型インレイ ヒント は、明示的な型アノテーションを持たない関数の戻り値の型を表示します。

設定: javascript.inlayHints.functionLikeReturnTypes.enabled

参照 CodeLens

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

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

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

リンター

リンターは、疑わしいコードに対して警告を提供します。VS Code には組み込みの JavaScript リンターは含まれていませんが、多くの JavaScript リンターの拡張機能がマーケットプレイスで入手できます。

型チェック

TypeScript の高度な型チェックとエラー報告機能を通常の JavaScript ファイルでも活用できます。これは、一般的なプログラミングミスを検出するのに最適な方法です。これらの型チェックは、JavaScript のいくつかのエキサイティングなクイック フィックスも可能にし、その中には不足しているインポートの追加や不足しているプロパティの追加が含まれます。

TypeScript は、.ts ファイルと同様に.js ファイルでも型を推論しようとします。型が推論できない場合は、JSDoc コメントで明示的に指定できます。TypeScript が JavaScript の型チェックに JSDoc を使用する方法の詳細については、「Working with JavaScript」を参照してください。

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

デバッグ

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

クライアント側のデバッグ

クライアント側のコードは、Edge および Chrome 用の組み込みデバッガーや、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 コードに構造と厳密な型付けをもたらします。

よくある質問

VS Code は JSX と React Native をサポートしていますか?

VS Code はJSX と React Native をサポートしています。npmjs 型宣言ファイル リポジトリから自動的にダウンロードされた型宣言 (tyings) ファイルから、React/JSX および React Native の IntelliSense を取得できます。さらに、人気のReact Native 拡張機能を Marketplace からインストールできます。

React Native の ES6 インポート ステートメントを有効にするには、allowSyntheticDefaultImports コンパイラ オプションをtrueに設定する必要があります。これにより、コンパイラは合成既定メンバーを作成し、IntelliSense が機能します。React Native は、舞台裏で Babel を使用して、既定メンバーを持つ適切なランタイム コードを作成します。React Native コードのデバッグも行いたい場合は、React Native 拡張機能をインストールできます。

VS Code は Dart プログラミング言語と Flutter フレームワークをサポートしていますか?

はい、Dart と Flutter の両方の開発用の VS Code 拡張機能があります。Flutter.dev のドキュメントで詳細を確認できます。

外部ライブラリで IntelliSense が動作しません

Automatic Type Acquisition は、npm (package.json で指定)、Bower (bower.json で指定) によってダウンロードされた依存関係、およびフォルダー構造にリストされている多くの一般的なライブラリ (例: jquery-3.1.1.min.js) で機能します。

ES6 スタイルのインポートが機能しません。

ES6 スタイルのインポートを使用したいが、一部の型宣言 (typings) ファイルがまだ ES6 スタイルのエクスポートを使用していない場合は、TypeScript コンパイラ オプション allowSyntheticDefaultImports を true に設定します。

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

縮小化/難読化された JavaScript をデバッグできますか?

はい、できます。Node.js デバッグのトピックで、JavaScript ソース マップを使用してこれが機能することを確認できます。

非 ES6 構文を使用している場合、構文検証を無効にするにはどうすればよいですか?

一部のユーザーは、提案されているパイプライン (|>) 演算子のような構文構造を使用したいと考えています。しかし、これらは現在、VS Code の JavaScript 言語サービスではサポートされておらず、エラーとしてフラグが立てられます。これらの将来の機能を使用したいユーザーのために、javascript.validate.enable 設定を提供しています。

javascript.validate.enable: false を使用すると、すべての組み込み構文チェックが無効になります。これを行う場合は、ESLint などのリンターを使用してソース コードを検証することをお勧めします。

Flow などの他の JavaScript ツールを使用できますか?

はい、ただしFlow の型チェックやエラーチェックなどの一部の言語機能は、VS Code の組み込み JavaScript サポートと競合する場合があります。VS Code の組み込み JavaScript サポートを無効にする方法については、「JavaScript サポートの無効化」を参照してください。