VS Code 用 JavaScript 拡張機能

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

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

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

拡張機能を見つける

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

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

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

おすすめの拡張機能

まだ始めたばかりの場合は、試してみることをお勧めする拡張機能を以下に示します。

ESLint

Marketplace - ESLint

Publisher - Microsoft

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

JavaScript リンターの設定の詳細については、VS Code ドキュメントを参照してください。

SonarLint

Marketplace - SonarLint

Publisher - SonarSource

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

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

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

Marketplace - JavaScript (ES6) code snippets

Publisher - charalampos karypidis

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

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

npm IntelliSense

Marketplace - npm IntelliSense

Publisher - Christian Kohler

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