Visual Studio Code における JavaScript

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

これらの機能のほとんどはすぐに動作しますが、最適なエクスペリエンスを得るために基本的な構成が必要になる場合があります。このページでは、VS Code に同梱されている JavaScript 機能について概説します。VS Code マーケットプレース の拡張機能は、これらの組み込み機能のほとんどを拡張または変更できます。これらの機能の動作方法と構成方法の詳細なガイドについては、JavaScript の操作 を参照してください。

IntelliSense

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

VS Code は、JavaScript プロジェクト内、React、lodash、express などの多くの npm ライブラリ、および node、serverless、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 に設定して無効にします。

より特殊なコードフォーマットスタイルについては、マーケットプレース から JavaScript フォーマット拡張機能のいずれかをインストールしてみてください。

JSX とタグの自動閉じ

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

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

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

JSX タグの閉じを無効にするには、"javascript.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+.)) を押して、使用可能なリファクタリングを表示します。

使用可能なリファクタリングには、次のようなものがあります。

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

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

さらに、コードアクションウィジェット: 近傍のクイックフィックスを含める (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",
}

現時点では、次の enum がサポートされています。

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

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

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

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

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

コードサジェスト

VS Code は、promise での .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 用の組み込みデバッガーや、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 インポートステートメントを有効にするには、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/*"]
}

minify/uglify された 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サポートを無効にする を参照してください。