Visual Studio Code の JavaScript

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

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

IntelliSense

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

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

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 - シンボル定義のソース コードに移動します。
• 定義を 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" - 保存時の自動修正は、1 回のラウンドですべての可能な修正 (ESLint を含むすべてのプロバイダーの場合) を計算します。
• "fixAll.eslint" - ESLint のみの自動修正。
• "addMissingImports" - 保存時にすべての不足しているインポートを追加します。

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

コードの提案

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

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

AI で補完を強化する

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

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 リンターの拡張機能がマーケットプレイスで利用できます。

型チェック

通常の JavaScript ファイルでも、TypeScript の高度な型チェックおよびエラー報告機能を活用できます。これは、一般的なプログラミングエラーを捕捉する優れた方法です。これらの型チェックは、不足しているインポートの追加や不足しているプロパティの追加など、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 をサポートしています。React/JSX と React Native の IntelliSense は、npmjs 型宣言ファイルリポジトリから自動的にダウンロードされる型宣言 (型定義) ファイルから取得できます。さらに、人気の 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 が機能しない

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

ES6 スタイルの import が機能しない。

ES6 スタイルの import を使用したいが、一部の型宣言 (型定義) ファイルがまだ ES6 スタイルの export を使用していない場合は、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 サポートの無効化」を参照してください。