VS Code 向け JavaScript 拡張機能

Visual Studio Code は、JavaScript および Node.js 開発向けの多くの機能をサポートしています。ダウンロードされた製品に付属する機能は、デバッグ、IntelliSense、コードナビゲーションなどのコア機能です。

これらのコア機能に加えて、VS Code に JavaScript 開発用の機能を追加するための多数の高品質な拡張機能をインストールできます。

ヒント: 拡張機能のインストールと管理方法については、拡張機能のドキュメントを参照してください。

拡張機能を探す

JavaScript 拡張機能は、拡張機能ビューの検索バーにJavaScriptと入力して見つけることができます。または、"tag:javascript" というタグを使用して JavaScript 拡張機能を見つけることもできます。VS Code 内またはMarketplaceで、より多くの拡張機能を検索してください。

さらに、Node.js拡張機能を検索することもできます。

ヒント: 上記の拡張機能は動的にクエリされます。拡張機能タイルをクリックして説明とレビューを読み、自分にとって最適な拡張機能を決定してください。詳細はMarketplaceをご覧ください。

推奨される拡張機能

使い始めたばかりの方のために、お勧めする拡張機能をご紹介します。

ESLint

Marketplace - ESLint

公開元 - Microsoft

ESLintをプロジェクトに簡単に統合できます。ESLint がお気に入りのリンターでない場合は、JSHint、JSCS、JS Standardを含む、さまざまな他のリンター拡張機能から選択してください。

JavaScript リンターの設定については、VS Code のドキュメントで詳しく読むことができます。

SonarLint

Marketplace - SonarLint

公開元 - SonarSource

SonarLint は、コードの記述中にバグやセキュリティの問題を見つけて修正するのに役立ちます。この拡張機能はバックグラウンドで実行され、スペルチェッカーのようにコーディングの問題を強調表示します。SonarLint は問題が何であるかを伝えるだけでなく、問題が有害である理由と関連する例を交えて修正方法について状況に応じたガイダンスを提供します。この拡張機能は200以上の JS/TS ルールをサポートし、コーディングの問題を自動的に処理するためのいくつかのQuick Fixesを含んでいます。

VS Code Marketplaceで「SonarLint」を検索してインストールします。設定は不要です。ほとんどのユーザーに合うデフォルトのプロファイルから始め、特定のニーズに合わせてカスタマイズできます。

JavaScript (ES6) コードスニペット

Marketplace - JavaScript (ES6) code snippets

公開元 - charalampos karypidis

VS Code には、多くの組み込みコードスニペットが付属しています。JavaScript (ES6) code snippets拡張機能は、ES6 (ECMAScript 6) 構文用のスニペットを追加します。この拡張機能が提供するスニペットのほんの一部を以下に示します。このパックが提供する数十のスニペットについては、拡張機能のREADMEを参照してください。

JavaScript スニペットの詳細については、VS Code のドキュメントで読むことができます。Angular 1、Angular 2、Bootstrap 3、ReactJs、jQueryなどの追加のスニペットパックについては、Marketplace のスニペットカテゴリを確認してください。

npm IntelliSense

Marketplace - npm IntelliSense

公開元 - Christian Kohler

この拡張機能は、importまたはrequireを使用する際に npm モジュールに対する IntelliSense を提供します。