必要な拡張機能 | Visual Studio Codeの設定 | JavaScript 超完全入門基本から発展までのすべて

INDEX

Visual Studio Codeにおける拡張機能とは？

Visual Studio Code（VS Code）は、そのままでも高機能なコードエディタですが、拡張機能（Extensions）を追加することで、自分の開発スタイルに合わせた環境を構築できます。

JavaScript開発では、コード補完、構文チェック、自動整形、デバッグ支援などを行う拡張機能を導入することで、開発効率を大きく向上させることができます。

JavaScript開発で特によく利用される拡張機能を紹介します。

拡張機能名	説明
ESLint	JavaScriptやTypeScriptの構文エラーやコーディングルール違反をリアルタイムで検出します。
Prettier - Code formatter	コードを一定のルールで自動整形します。保存時に自動フォーマットすることもできます。
JavaScript (ES6) code snippets	ES6以降のJavaScriptコードをスニペットで素早く入力できます。
Live Server	ローカルサーバーを起動し、HTMLやJavaScriptの変更をブラウザへ自動反映できます。
Path Intellisense	ファイルパスを自動補完し、入力ミスを防ぎます。
Error Lens	エラーや警告をコード上へ直接表示し、問題を見つけやすくします。
GitLens	Gitの変更履歴やコミット情報をVS Code内で確認できます。

以前はDebugger for ChromeやBracket Pair Colorizerが広く利用されていました。

しかし、現在ではこれらの機能の多くはVS Code本体に統合されています。

そのため、新しくVS Codeを利用する場合は、これらの拡張機能をインストールする必要はほとんどありません。

ここでは、特によく利用される拡張機能について紹介します。

ESLintは、JavaScriptの文法ミスやコーディングルール違反を見つけるための代表的なツールです。

現在のESLintでは、Flat Config（eslint.config.js）が推奨されており、新しいプロジェクトではこちらを利用するケースが増えています。

Prettierは、コードの見た目を自動的に整えてくれるツールです。

保存時の自動整形を有効にするには、設定画面で次のように設定します。


{
    "editor.formatOnSave": true
}

ESLintとPrettierを組み合わせることで、「コード品質」と「コード整形」の両方を自動化できます。

HTML・CSS・JavaScriptを学習する際は、Live Serverが非常に便利です。

JavaScriptを修正するたびにブラウザを手動で更新する必要がないため、学習効率が向上します。

画像やJavaScriptファイルなどへのパスを入力すると、自動補完を行ってくれます。

入力ミスによる「ファイルが見つからない」というエラーを減らせるため、初心者にもおすすめの拡張機能です。

Gitを利用している場合は、GitLensも便利です。

誰がいつコードを変更したかや、コミット履歴などをVS Code内で簡単に確認できます。

JavaScriptを学習する場合は、まず次の4つを導入すれば十分です。

慣れてきたら、GitLensやError Lensなどを追加すると、さらに快適な開発環境になります。