ツール  /  VSCode  /  環境構築

VSCode — JavaScript・その他言語の Plugin

JavaScript / TypeScript・HTML / CSS・Go・Rust・Shell Script など、 各言語の VSCode 開発環境を整えるための必須・便利拡張機能をまとめます。 また、言語を問わず役立つ汎用プラグインも合わせて紹介します。

VSCode JavaScript TypeScript ESLint Prettier Go Rust ⏱ 20 min

1. JavaScript / TypeScript

VSCode は JavaScript / TypeScript のサポートを内蔵しているため、 追加拡張なしでも型チェック・補完・リファクタリングが動作します。 以下の拡張を加えることでさらに快適な開発環境になります。

Plugin 名種別役割
ESLint 必須 JavaScript / TypeScript の静的解析ツール。 保存時にルール違反を検出・自動修正する。 プロジェクトの .eslintrc.* / eslint.config.js を読み込み、 チームの規約を強制できる。
Prettier - Code formatter 必須 設定不要のコードフォーマッター。JS・TS・HTML・CSS・JSON・Markdown など幅広い形式に対応。 保存時に自動整形され、レビューでのスタイル議論を排除できる。
JavaScript (ES6) code snippets 便利 clg → console.log()、imp → import 文など ES6+ のよく使うコードパターンをスニペットで展開。入力効率が大幅に上がる。
Auto Rename Tag 便利 JSX / HTML タグの開きタグを変更すると閉じタグが自動追随する。 React 開発での JSX 操作が格段に楽になる。
Import Cost 便利 import / require したパッケージのバンドルサイズをインラインで表示。 ライブラリ選定時のバンドルサイズ意識に役立つ。
npm Intellisense 便利 import / require の補完時に node_modules のパッケージ名を自動提案。タイポを防ぎ入力が速くなる。
Volar（Vue - Official） 便利 Vue 3 の公式 VSCode 拡張。.vue ファイルの型補完・テンプレートの IntelliSense・リファクタリングをサポート。

ESLint + Prettier の settings.json 設定例

JSON — settings.json 
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
      "source.organizeImports": "explicit"
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "eslint.format.enable": false,   // フォーマットは Prettier に任せる
  "typescript.preferences.importModuleSpecifier": "relative"
}

2. HTML / CSS

Plugin 名種別役割
Live Server 必須 HTML ファイルを保存するたびにブラウザが自動リロードするローカルサーバーを起動。 静的サイト・HTML + CSS + JS の開発で必須。 右クリック → 「Open with Live Server」または右下のアイコンから起動。
HTML CSS Support 必須 HTML の class / id 属性を入力する際に、リンクされた CSS ファイルのクラス名・ID を補完する。 スタイルと HTML の整合性を保つのに役立つ。
IntelliSense for CSS class names in HTML 便利 ワークスペース内の CSS・SCSS・Tailwind CSS など全ファイルのクラス名を横断的に補完する。大規模プロジェクトで効果大。
Tailwind CSS IntelliSense 便利 Tailwind CSS のユーティリティクラスをホバー表示・補完する公式プラグイン。 Tailwind を使うプロジェクトでは必須レベル。
CSS Peek 便利 HTML の class / id から CSS の定義へジャンプ（F12）・インライン表示（Ctrl+Shift+F12）できる。
Color Highlight 便利 CSS / JS ファイル内の color コード（#fff・rgb()・hsl()）をその色でハイライト表示する。

3. Go

Plugin 名種別役割
Go (golang.go) 必須 Google 製の公式 Go 拡張。gopls（Go Language Server）をバックエンドに使い、 コード補完・型情報・定義ジャンプ・リファクタリング・テスト実行・デバッグに対応。 Go 開発には必ずインストールすること。
Go Test Explorer 便利 Go のテストをサイドバーにツリー表示・個別実行できる。テストの網羅確認やカバレッジ確認に便利。
💡 Go 拡張のインストール後の操作
Go 拡張を初めてインストールすると「Install All」を促すダイアログが表示されます。 クリックすると gopls・dlv（デバッガー）・staticcheck など 必要なツールが自動インストールされます。

4. Rust

Plugin 名種別役割
rust-analyzer 必須 Rust の公式言語サーバー実装。コード補完・型情報・エラー表示・定義ジャンプ・インライン型ヒントが非常に高精度。 旧来の「Rust」拡張（RLS）の後継として公式推奨。
Even Better TOML 便利 Cargo.toml などの TOML ファイルのシンタックスハイライト・バリデーション・補完に対応。 Rust 開発では Cargo.toml を頻繁に編集するため入れておくと快適。
CodeLLDB 便利 LLDB ベースのデバッガー。Rust のデバッグ実行に対応。 launch.json に設定を追加するとブレークポイントやステップ実行が可能になる。

5. Shell Script

Plugin 名種別役割
ShellCheck 必須 Shell スクリプト（bash / sh / ksh / dash）の静的解析ツール。 変数引用忘れ・クォート漏れ・ポータビリティ問題などを波線で警告する。 サーバー管理・CI スクリプトの品質を大幅に向上させる。
shell-format 便利 shfmt を使って Shell スクリプトを自動整形する。 インデント幅・スペースの統一などを保存時に自動適用。
Bash IDE 便利 Bash Language Server をバックエンドとした補完・定義ジャンプ・ホバー情報表示。ShellCheck とシームレスに統合できる。

6. 言語共通の便利 Plugin

言語に依存せず、どんな開発にも役立つ汎用プラグインをまとめます。

Git・バージョン管理

Plugin 名種別役割
GitLens 便利 行レベルの blame 表示・ファイル変更履歴・ブランチ比較など git の情報をエディタ上で可視化。チーム開発では特に有用。
Git Graph 便利 ブランチ・コミット履歴をグラフィカルに表示する。ブランチの分岐状況やマージの流れを視覚的に把握できる。

コード品質・生産性

Plugin 名種別役割
Error Lens 便利 エラー・警告・情報メッセージを行末にインライン表示。問題パネルを開かなくてもその場で原因を把握できる。全言語に効果的。
Bracket Pair Colorizer 2 便利 対応するカッコのペアを色分けして視認性を高める。現在は VSCode 標準機能（bracketPairColorization）で代替可能。
indent-rainbow 便利 インデントレベルごとに背景色を変えて可視化する。Python・YAML など空白に意味がある言語で特に有効。
TODO Highlight 便利 コメント内の TODO:・FIXME:・HACK: をハイライト表示し、見落としを防ぐ。
Better Comments 便利 !（警告）・?（質問）・TODO・*（重要）など プレフィックスに応じてコメントの色を変えて意図を明示する。
Path Intellisense 便利 文字列リテラル内のファイルパスを補完。import・require・open() など言語を問わず機能する。

コンテナ・インフラ

Plugin 名種別役割
Docker 便利 Dockerfile / docker-compose.yml の補完・シンタックスハイライト。サイドバーからコンテナ・イメージ・ボリュームの管理も可能。
YAML (Red Hat) 便利 YAML ファイルのバリデーション・スキーマ補完・フォーマット。 Kubernetes マニフェスト・GitHub Actions・docker-compose.yml の編集が格段に楽になる。
Kubernetes 便利 kubectl コマンドのラッパー。クラスタのリソース一覧・ログ確認・マニフェスト適用を VSCode から実行できる。

AI コーディング支援

Plugin 名種別役割
GitHub Copilot 便利 AI によるコード補完・テスト生成・コメント生成。コメントを書くとその仕様に沿ったコードを提案してくれる。 有料プランまたは GitHub 学生向け無料プランが必要。
Tabnine AI Code Completion 便利 ローカル AI モデルも利用可能な AI 補完ツール。GitHub Copilot の代替として完全オフライン環境でも使える。

7. settings.json 設定例

JavaScript / TypeScript + ESLint + Prettier

JSON — settings.json 
{
  // ── JavaScript / TypeScript ──────────────────────
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
      "source.organizeImports": "explicit"
    }
  },

  // ── HTML / CSS ────────────────────────────────────
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

  // ── Go ────────────────────────────────────────────
  "[go]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": { "source.organizeImports": "explicit" }
  },
  "go.lintTool": "staticcheck",
  "go.useLanguageServer": true,

  // ── Rust ──────────────────────────────────────────
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer",
    "editor.formatOnSave": true
  },
  "rust-analyzer.checkOnSave.command": "clippy",

  // ── Shell Script ──────────────────────────────────
  "[shellscript]": {
    "editor.defaultFormatter": "foxundermoon.shell-format",
    "editor.formatOnSave": true
  },
  "shellformat.useEditorConfig": true,
  "shellcheck.enable": true,

  // ── 共通 ──────────────────────────────────────────
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "errorLens.enabledDiagnosticLevels": ["error", "warning"]
}

8. まとめ

言語・用途必須 Plugin便利 Plugin
JavaScript / TypeScript ESLint・Prettier Import Cost・Auto Rename Tag・npm Intellisense
HTML / CSS Live Server・HTML CSS Support Tailwind CSS IntelliSense・Color Highlight・CSS Peek
Go Go (golang.go) Go Test Explorer
Rust rust-analyzer Even Better TOML・CodeLLDB
Shell Script ShellCheck shell-format・Bash IDE
汎用 Error Lens・GitLens indent-rainbow・TODO Highlight・Docker・YAML
AI 補完 — GitHub Copilot・Tabnine
✅ 拡張機能の有効化 / 無効化をワークスペース単位で管理
拡張機能はグローバルに有効化する他、ワークスペースごとに有効 / 無効を切り替えられます。 言語や用途が全く異なるプロジェクトが複数ある場合は、 ワークスペース単位で有効にすることでエディタのパフォーマンスを維持できます。