1. /
  2. /
  3. 汎用的に使える VS Code のおすすめ拡張機能 17 選

汎用的に使える VS Code のおすすめ拡張機能 17 選

このエントリーをはてなブックマークに追加
LINEで送る

こんにちは！
クラウドソリューション開発部の大川です。

今回は、開発効率が上がる VS Code の拡張機能を 17 個、ひとこと要約とこんな時に便利を添えてご紹介します。

この記事で紹介する拡張機能

# 拡張機能 ひとこと要約
1 Prettier – Code formatter 整形の“標準化”で見た目の議論を終わらせる
2 ESLint JS/TS の静的解析と自動修正の要
3 GitHub Copilot AI 補完で下書きを最速作成
4 GitHub Copilot Chat エディタ内で指示→修正→解説まで完結
5 Live Share リアルタイム共同編集・デバッグ
6 Tailwind CSS IntelliSense クラス補完・ホバーでタイポ激減
7 HTML CSS Support HTML の class/id に CSS から補完
8 Auto Rename Tag 開始・終了タグ名を同時変更
9 Path Autocomplete 相対パス/エイリアスの補完が快適
10 Live Server ローカル HTTP & ライブリロード
11 HTML Preview（George Alisson） / HTML Preview（tht13） エディタ内でサクッと HTML 確認
12 Markdown Preview Enhanced Mermaid/数式/PlantUML など“リッチな Markdown”
13 Swagger Viewer OpenAPI/Swagger を即プレビュー
14 YAML スキーマバリデーションで安全編集
15 Rainbow CSV 列色分け & SQL ライク抽出（RBQL）
16 SSH FS SSH でリモートを仮想ファイルシステムとして編集
17 vscode-icons ファイル/フレームワーク別アイコンで視認性 UP

 

1. Prettier – Code formatter

コード整形をルール化して、チーム全体で見た目を統一します。
保存時に自動整形をかければ、プルリクエストでのスタイル議論がほぼ消えます。

こんな時に便利

  • 複数人でコーディング規約を揃えたい
  • ESLint と役割分担（整形＝Prettier、品質＝ESLint）をしたい

2. ESLint

JS/TS の静的解析 & 自動修正をします。
未使用変数や import 整理など、保存時の一括修正が強力です。

こんな時に便利

  • 「動くけどキレイじゃない」を機械的に直したい
  • CI の前にローカルで簡易ゲートを作りたい

3. GitHub Copilot

コメントや数行のコードから、次の数行〜関数単位までを提案します。
雛形作成や反復処理の記述が高速化します。

こんな時に便利

  • テストコードやボイラープレートの生成
  • 既存コードのリファクタ案の叩き台づくり

4. GitHub Copilot Chat

  • エディタ内のチャットで解説・修正・補助コマンドまで。
  • 問題箇所を選択して「この意図で修正して」といった指示が通ります。

こんな時に便利

  • エラーの一次調査やリファクタ理由の説明
  • README 作成やスニペットの生成

5. Live Share

  • VS Code 上で同時編集/デバッグ/ポート共有。遠隔でのペアプロや緊急対応に最適です。

こんな時に便利

  • PR 前の対面レビュー代替
  • バグ再現環境を相手に“そのまま”見せたい

6. Tailwind CSS IntelliSense

Tailwind のクラス補完、ホバーでの説明、lint を提供。
タイポ防止とクラス設計の迷いを減らします。

こんな時に便利

  • clsx 等の文字列クラスを多用する UI 実装
  • ユーティリティクラスの学習コストを抑えたい

7. HTML CSS Support

CSS から HTML の class/id に双方向で補完が効くようになり、HTML コーディングの迷いが減ります。

こんな時に便利

  • 複数フォルダに散らばる CSS/HTML で補完が欲しい
  • クラス設計の整合性チェックを軽く回したい

8. Auto Rename Tag

HTML/XML の開始タグ変更に合わせて終了タグも自動でリネーム。
単純だけど事故を減らす定番です。

こんな時に便利

  • タグ名の一括変更時のミス防止
  • 手で閉じタグを追いかけたくない

9. Path Autocomplete

画像/リンク/import などのパス入力を高速化。
@/src などのエイリアス補完にも対応します。

こんな時に便利

  • 深い相対パスを毎回手打ちしている
  • monorepo で共通パスをよく参照する

10. Live Server

ローカルに HTTP サーバを立ててライブリロード。
静的サイトや簡単な UI 検証ループを短縮します。

こんな時に便利

  • HTML/CSS/JS の見た目・動作を素早く確認
  • ブラウザ検証ツールと併用して UI を詰めたい

11. HTML Preview

エディタ内ペインで HTML を軽量プレビュー。
動的挙動が不要な場面で素早く見た目を確認できます。

こんな時に便利

  • コードレビュー前の見た目の“崩れ”確認
  • ドキュメント用の静的 HTML を整える

12. Markdown Preview Enhanced

Mermaid 図、数式、PlantUML、PDF 出力などリッチな Markdown を VS Code で完結。

こんな時に便利

  • README/議事録/設計書/スライドを Markdown で作成
  • 図をコードで管理したい（差分レビューが容易）

13. Swagger Viewer

OpenAPI/Swagger 定義をその場でレンダリングして確認。
軽量な仕様確認に便利です。

こんな時に便利

  • API 仕様のレビュー・軽微な検証
  • フロント/モバイル実装時のパラメータ確認

14. YAML

スキーマ連携による補完・バリデーションで YAML のヒューマンエラーを削減。

こんな時に便利

  • GitHub Actions/Helm/K8s マニフェストなどを安全に編集
  • JSON Schema と紐付けて型安全にしたい

15. Rainbow CSV

CSV/TSV を列ごとに色分け。
RBQL（SQL ライク）でフィルタ/抽出もできます。

こんな時に便利

  • ちょっとした検証を表計算ソフトなしで済ませたい
  • ログ/エクスポートデータの目視チェック

16. SSH FS

SSH 経由でリモートを仮想ファイルシステムとして扱い、VS Code から直接編集。

こんな時に便利

  • ちょい修正やログ閲覧をサクッとやりたい
  • SCP/FTP を開かずに小規模運用を行いたい

17. vscode-icons

拡張子/フレームワーク別アイコンで視認性が向上。
複数プロジェクトをまたいでも迷いにくくなります。

こんな時に便利

  • 大規模リポジトリでファイルを一目で判別したい
  • フレームワーク別に雰囲気を掴みたい

付録：一括インストール用コマンド

code コマンドが PATH に通っている前提（VS Code の「Shell Command: Install ‘code’ command in PATH」）。

まとめ

拡張機能を賢く選んで、VS Code を“自分用の最速開発環境”に仕上げていきましょう！

拡張機能 効果
Prettier 整形の標準化でレビューが本質議論に集中
ESLint 静的解析と自動修正で品質の底上げ
Copilot / Copilot Chat ドラフト生成と対話的な修正で開発最短化
Live Share 遠隔レビュー・障害対応がリアルタイムに
Tailwind / HTML CSS Support 補完と説明で UI 実装の迷いを削減
Auto Rename Tag / Path Autocomplete 入力の手戻りと凡ミスを削減
Live Server / HTML Preview 確認ループを最短に
MPE / Swagger Viewer ドキュメント＆API 仕様の見える化
YAML / Rainbow CSV 運用まわりの“痒いところ”を楽に
SSH FS / vscode-icons 軽量運用＆視認性アップで迷子にならない

終わりに

エコモットでは一緒にモノづくりをしていく仲間を募集中です！
弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！