Visual Studio Code での JavaScript

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

これらの機能のほとんどは初期設定のまま動作しますが、一部は最適なエクスペリエンスを得るために基本的な設定が必要な場合があります。このページでは、VS Code に付属する JavaScript の機能をまとめています。VS Code Marketplace の拡張機能を使用すると、これらの組み込み機能のほとんどを拡張または変更できます。これらの機能の仕組みや設定方法についてのより詳細なガイドは、JavaScript の操作を参照してください。

IntelliSense

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

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

VS Code の JavaScript IntelliSense、その設定方法、一般的な IntelliSense の問題のトラブルシューティングについては、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 の設定については、JavaScript の操作を参照してください。

スニペット

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

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

JSDoc サポート

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

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

JSDoc コメントの提案を無効にするには、"javascript.suggest.completeJSDocs": false を設定します。

ホバー情報

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

自動インポートを無効にするには、"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 でも動作します。

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

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

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

コード ナビゲーション

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

• 定義へ移動 F12 - シンボル定義のソース コードに移動します。
• 定義をここに表示 ⌥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" - 保存時の自動修正は、すべての可能な修正を 1 回で計算します (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 をどのように使用するかについては、JavaScript の操作で詳しく読むことができます。

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

デバッグ

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

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

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

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

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

人気の拡張機能

VS Code には JavaScript の優れたサポートが付属していますが、拡張機能を介してデバッガー、スニペット、リンター、その他の JavaScript ツールをさらにインストールできます。

次のステップ

さらに読む

• 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 の型定義ファイルリポジトリから自動的にダウンロードされた型定義 (typings) ファイルにより、React/JSX と React Native の IntelliSense を利用できます。さらに、マーケットプレイスから人気の React Native 拡張機能をインストールできます。

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

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

はい、Dart と Flutter 開発用の VS Code 拡張機能があります。詳細については、Flutter.dev のドキュメントをご覧ください。

外部ライブラリに対して IntelliSense が機能しません

自動型取得は、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 サポートの無効化を参照してください。