拡張機能のインストール方法
まずは基本的なインストール方法を確認しましょう。
- VSCodeの左側にある拡張機能アイコン(四角が4つ並んでいるマーク)をクリック
- 検索窓に拡張機能名を入力
- 「インストール」ボタンをクリック
ショートカットキー Ctrl + Shift + X (Mac: Cmd + Shift + X) でも拡張機能パネルを開けます。
それでは、おすすめの拡張機能を見ていきましょう。
1. Japanese Language Pack for Visual Studio Code
できること
VSCodeのインターフェースを日本語化してくれる、説明不要な神拡張機能です。
VSCodeをインストールしたら最初に入れましょう。
使い方
- 拡張機能のインストール後、VSCodeを再起動
- コマンドパレット(
Ctrl + Shift + P)を開く - 「Configure Display Language」と入力
- 「日本語」を選択
これでVSCodeが日本語化されます。
2. Error Lens
できること
下の画像のように、エラーや警告をコード上にインラインで表示してくれる拡張機能です。
おすすめポイント
通常、VSCodeではエラーがある箇所に赤い波線が表示されるだけで、詳細を確認するにはカーソルを合わせるか、問題パネルを開く必要があります。
Error Lensを使えば、エラー内容が該当行の右端/下側に直接表示されるため、一目でエラーの原因がわかります。
注意点
エラーが多いプロジェクトでは画面が賑やかになりすぎる場合があります。その場合は、特定のプロジェクトでのみ無効化することも可能です。
カスタマイズ例
設定で行番号横にアイコンを表示できます。
{
"errorLens.gutterIconsEnabled": true
}
絵文字を使ってより目立たせることも可能です。
{
"errorLens.gutterIconsEnabled": true,
"errorLens.gutterIconSet": "emoji",
"errorLens.gutterEmoji": {
"error": "💀",
"warning": "😞",
"info": "🆗",
"hint": "🍏"
}
}
3. indent-rainbow
できること
インデント(字下げ)を色分けして見やすくしてくれる拡張機能です。
おすすめポイント
ネストが深いコードを書いているとき、今どの階層にいるのかが一目でわかるようになります。
JavaScriptやPythonなど、インデントが重要な言語を使う場合は特に便利です。
カスタマイズ例
虹色のデフォルト設定から、モノクロなど好みの色に変更することもできます。
{
"indentRainbow.colors": [
"rgba(64,64,64,0.1)",
"rgba(96,96,96,0.1)",
"rgba(128,128,128,0.1)",
"rgba(160,160,160,0.1)"
]
}
4. zenkaku
できること
全角スペースを灰色の四角でハイライト表示してくれる拡張機能です。
それだけ？と思うかもしれませんが、これがなかなか便利なんですね。
↓グレーの四角いやつが全角スペースです。
おすすめポイント
誰しも一度は遭遇するのが、知らないうちに全角スペースを入力してしまい、コードが動かないという問題です。
全角スペースは見た目では判別しづらいため、この拡張機能で可視化することで、無駄なデバッグ時間を削減できます。
使い方
- 拡張機能をインストール
- コマンドパレット(
Ctrl + Shift + P)を開く - 「Enable Zenkaku」と入力して実行
最新バージョンでは、一度有効化すれば再起動後も設定が維持されるようになっています。
5. Prettier - Code formatter
できること
コードを自動整形してくれる拡張機能です。HTML、CSS、JavaScript、TypeScriptなど、多くの言語に対応しています。
おすすめポイント
保存時に自動でコードを整形してくれるため、常にコードを綺麗な状態に保てます。
チーム開発では、メンバー間でコードスタイルを統一できるため、レビューの負担が減ります。
設定方法
settings.jsonに以下を追加することで、ファイル保存時に自動整形が実行されます。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
カスタマイズ例
settings.jsonで整形ルールをカスタマイズできます。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.useTabs": true,
"prettier.tabWidth": 4
}
動作例
例えば下のような信じられないくらい汚いコードがあるとします。
保存するだけで、インデントがきれいに整形されました！
6. ESLint
できること
JavaScriptやTypeScriptのコード品質をチェックし、潜在的なバグやコーディング規約違反を指摘してくれる拡張機能です。
おすすめポイント
構文エラーだけでなく、使われていない変数や推奨されないコーディングパターンなども検出してくれます。
Prettierと併用することで、ESLintはコード品質のチェック、Prettierは整形という役割分担ができます。
設定例
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
これにより、保存時にESLintで自動修正可能なエラーが修正されます。
7. Live Server
できること
HTMLファイルをローカルサーバーで表示し、ファイルを変更すると自動的にブラウザをリロードしてくれる拡張機能です。
おすすめポイント
MAMPなどの環境構築が不要で、右下の「Go Live」を選ぶだけで、すぐにプレビューを確認できます。
Web制作初心者にとって、最も手軽に始められるプレビュー方法です。
使い方
- VSCodeでHTMLファイルを開く
- 右下の「Go Live」をクリック
注意点
Live Serverを使用するには、ファイルがフォルダ内に入っている必要があります。単体のHTMLファイルだけでは動作しないので注意しましょう。
8. Auto Rename Tag
できること
HTMLやXMLの開始タグを変更すると、自動的に対応する閉じタグも変更してくれる拡張機能です。
おすすめポイント
HTMLのタグを変更する際、開始タグと閉じタグの両方を変更し忘れるミスを防げます。
特にネストが深いHTMLを編集する際に威力を発揮します。
動作例
<div> を <section> に変更すると、閉じタグの </div> も自動で </section> に変わります。
リアルタイムで変更が反映されるため、違和感なく使えます。
補足
Auto Close Tag(開始タグを入力すると閉じタグを自動生成)は、VSCodeのデフォルト機能として既に組み込まれているため、別途インストールする必要はありません。
9. GitLens
できること
Git機能を強化し、コードの履歴や変更者を可視化してくれる拡張機能です。
おすすめポイント
各行にカーソルを合わせると、誰がいつその行を変更したかが表示されます。
チーム開発で「この処理を書いたのは誰？」を簡単に追跡できるため、コードレビューや問題の原因調査が効率化されます。
主な機能
- コード行ごとのGit Blame(変更履歴)表示
- ファイルの変更履歴の可視化
- コミットの詳細情報の表示
- リポジトリの統計情報
注意点
機能が豊富な分、VSCodeの動作が若干重くなる場合があります。不要な機能は設定でオフにすることをおすすめします。
10. Highlight Matching Tag
できること
HTMLのタグ同士のつながりをハイライトし、タグがどこからどこまで囲っているのかをわかりやすくしてくれます。
下の画像で言うと、titleタグの黄色い下線と左右の緑のカッコがこの拡張機能によるものです。
例えば、かなり長いstyleタグにフォーカスすると、右のミニマップ上でタグがどこからどこまであるのかを明るい緑色で示してくれます。
おすすめポイント
ネストが深いHTML、長いHTMLなど、開発でよく遭遇する若干読みづらいHTMLの可読性を向上できます。
設定もかなり細かくできるため、ぜひ、ご自身の好みに合わせてカスタムしてください！
使い方
- 拡張機能をインストール
特に設定をしなくても、インストールするだけでHTMLのタグハイライトが機能します。
より目立たせたい場合にはカスタマイズが必要です。
カスタマイズ例
"[html]": {
// ペアタグだけは強調したいので matchBrackets は残す
"editor.matchBrackets": "always",
// 同じ単語のすべてのハイライトを無効化
"editor.occurrencesHighlight": "off"
},
"[twig]": {
// ペアタグだけは強調したいので matchBrackets は残す
"editor.matchBrackets": "always",
// 同じ単語のすべてのハイライトを無効化
"editor.occurrencesHighlight": "off"
},
"highlight-matching-tag.styles": {
"opening": {
"name": {
"underline": "rgb(204, 255, 0)",
"highlight": "rgba(255, 255, 0, 0.1)"
},
"left": {
"custom": {
"borderWidth": "0 0 0 2px",
"borderStyle": "solid",
"borderColor": "rgb(29, 255, 138)",
"borderRadius": "9px",
"overviewRulerColor": "rgb(29, 255, 138)"
}
}
},
"closing": {
"name": {
"underline": "rgb(204, 255, 0)",
"highlight": "rgba(255, 255, 0, 0.1)"
},
"right": {
"custom": {
"borderWidth": "0 2px 0 0",
"borderStyle": "solid",
"borderColor": "rgb(29, 255, 138)",
"borderRadius": "9px",
"overviewRulerColor": "rgb(29, 255, 138)"
}
}
}
}
まとめ
私自身がフロント側での作業が多いため、紹介したものも若干フロント寄りの拡張機能が多くなってしまいました...
しかし、今回紹介した10個の拡張機能を入れるだけで、VSCodeの使い勝手が劇的に向上するのは間違いありません。
特に、以下の5つは本当におすすめです！
- Japanese Language Pack(日本語化)
- Error Lens(エラー表示)
- indent-rainbow(インデント可視化)
- zenkaku(全角スペース可視化)
- Prettier(コード整形)
これらを入れるだけで、コーディング中のストレスが大幅に減り、効率的に学習や開発を進められるようになります。
VSCodeには他にも数多くの便利な拡張機能があるので、自分の開発スタイルに合わせて少しずつ追加していきましょう。
ただし、拡張機能を入れすぎるとVSCodeの動作が重くなるため、本当に必要なものだけを厳選することが大切です。