ツール / VSCode / 環境構築

VSCode — JavaScript・その他言語の Plugin

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

VSCode JavaScript TypeScript ESLint Prettier Go Rust ⏱ 20 min

JavaScriptを書く日もあればGoやRustを触る日もある。言語が変わるたびに拡張機能を検索し直すのは地味に時間を食うので、普段使っている構成を一箇所にまとめておくことにしました。

1. JavaScript / TypeScript

図1: VS Code JS/TS/Go環境 — ESLint+Prettier・Live Server・gopls設定

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