私が使っているVscode拡張機能

最近書けてなかったので、とりあえずネタ箱コレを見つけて書いてみることにしました。

はじめに

VSCodeは、なんだかんだ言って非常に便利ですよね。
以前、SESとして働いていた頃はVisual StudioやEclipseを使う機会が多かったのですが、趣味やフリーランスの活動では、主にVSCodeを利用しています（拡張機能が豊富で、自分好みにカスタマイズできるのが大きな理由です）。
ただ、新しい拡張機能を探そうとすると、どの記事でも同じようなものばかりが紹介されがちではないでしょうか。
そこで今回は、普段あまり目にしないような拡張機能を中心に、おすすめのものをピックアップしてご紹介します。

この記事のターゲット

• これまであまり意識して拡張機能を導入したことがない方

• 新しい便利な拡張機能を探している方

• 初めてVSCodeを使う方

• この記事ではインストール方法や設定に関して詳しい説明は省きます

オススメ拡張機能

Project Manager

ローカルリポジトリの管理は、まずこれを入れましょう。

サイドバーに、以下のように「お気に入り」として登録したプロジェクトや、指定したフォルダ配下にあるGitリポジトリを一覧表示してくれます。
お気に入りは手動での登録が必要ですが、Gitリポジトリは指定した階層下のものを自動で検出してくれるため、非常に便利です。

同様のリポジトリ管理ツールは他にもありますが、この拡張機能の優れた点は、プロジェクト名にマウスオーバーするだけで「新しいウィンドウで開く」ボタンが表示される手軽さです。
欲を言えば、使用言語や依存関係などでフィルタリングできる機能があれば、さらに嬉しいところです。

SQLTools

「DBの中身を確認したいけど、そのためだけにツールを増やすのは面倒…」そんな願いをVSCodeで叶えます。

主要なSQL系データベースのほとんどに、この拡張機能一つでアクセスできます。
プロジェクトごとに接続情報を保存してくれる上に、クエリの実行履歴やINSERT文の自動生成まで備えた優れものです。
なお、使用するデータベースに対応した「Driver拡張機能」を別途インストールする必要があります。

quicktype

「JSONから手作業で型定義ファイルを作るのが面倒！」という方に。

コマンド一つで、JSONデータから各種プログラミング言語の型定義を生成してくれます。
APIのレスポンスから型を作成する際などに非常に役立つので、これまで手動で型定義を作成していた方は、ぜひ試してみてください。

Tailwind CSS IntelliSense

「Tailwind CSSのクラス名を覚えるのが大変…」という悩みを解決。

おなじみのIntelliSense（入力補完）を、Tailwind CSSで利用できるようにする拡張機能です。
地味ながら、色の候補をアイコンで分かりやすく表示してくれる点も便利なポイントです。

Todo Tree

「後で修正しよう」と思った箇所を、忘れないようにメモしたい時に。

// TODO: memo

上記のように特定のキーワード（TODO, FIXMEなど）を含んだコメントを記述すると、サイドバーに一覧表示してくれます。
後でリファクタリングしたい箇所などに目印を付けておけば、「あれ、どこを直すんだっけ？」と迷うことがなくなり、作業の抜け漏れを防げます。

Version Lens

package.jsonファイルを開くと、dependenciesやdevDependenciesに記載された各パッケージの最新バージョンをインラインで表示してくれます。
もちろんnpm-check-updatesのようなコマンドラインツールも便利ですが、パッケージごとに細かくバージョンを調整したい時には、エディタ上で直接確認できるこの拡張機能が重宝します。

vscode-pdf

VSCodeでPDFを直接見たい、そんなあなたに。

Adobe Readerをインストールするほどではないけれど、たまにPDFを確認する必要がある。
かといって、その都度ブラウザで開くのも少し手間…。
そんな思いから導入しました。
理由はただそれだけです。

Regex Previewer

面倒な正規表現のチェックを、手軽に。

正規表現を記述している際に、IntelliSenseからプレビュー画面を呼び出し、リアルタイムでマッチング結果を確認できます。
地味な機能ですが、様々な場面で必要になる正規表現のデバッグが格段に楽になります。

Rainbow CSV & Edit csv

「CSVを編集したいけどExcelは持っていない…、Google Driveにアップロードするのも面倒…」という場合に。

前者はCSVの各列を色分けして視認性を高めてくれる拡張機能、後者はスプレッドシート形式で直接編集を可能にする拡張機能です。
最近はCSVを扱う機会も減りましたが、Excelを持っていない身としては、たまに必要になった際に非常に助かります。

GitHub Pull Requests and Issues & GitHub Actions

ブラウザを開かずに、Issueやプルリクエスト、Actionsの状況を確認。

GitHub公式が提供している拡張機能です。vscode-pull-request-githubを使えば、プルリクエストだけでなくIssueの確認や、さらにはコードレビューまでVSCode上で完結できます。
また、vscode-github-actionsのお気に入りポイントは、ブラウザからだと少しアクセスが面倒なSecretやVariableを、エディタ上から直接編集できる点です。

Code Spell Checker

コード内のスペルミスを自動で指摘。

言わずと知れた有名な拡張機能ですが、やはり欠かせません。変数名やコメント内のスペルミスを検知して波線で教えてくれます。
プロジェクト固有の単語など、辞書に登録されていない固有名詞はユーザー辞書に追加することも可能です。とりあえず入れておいて損はないでしょう。

ErrorLens

「エラー内容を確認するために、いちいちマウスオーバーするのは面倒！」を解消。

エラーや警告の内容を、該当する行の右側に直接表示してくれます。
一行に複数のエラーがある場合は少しごちゃごちゃすることもありますが、コードの問題点がひと目で分かる視認性の高さが魅力です。

Log File Highlighter

見づらいログファイルを、カラフルで見やすく。

.logファイルなどを開いた際に、ログレベル（INFO, WARN, ERRORなど）に応じて色付けをしてくれる拡張機能です。
私は趣味でVRChatをよくプレイするのですが、そのログファイルを確認する機会が多いため、地味に助かっています。

Console Ninja

「console.logの結果、いちいちブラウザやターミナルで確認するの面倒…」を解決する神ツール

デバッグの際、console.logを仕込んでブラウザのデベロッパーツールやターミナルとにらめっこ…なんて経験は誰にでもありますよね。
この拡張機能は、そんな手間を過去のものにします。

なんと、console.logの出力結果やランタイムエラーを、エディタ上のコードのすぐ隣に直接表示してくれるのです。

どのログがコードのどの部分に対応しているかが一目瞭然で、アプリケーションを動かしながらリアルタイムに値の動きを追うことができます。
エディタとコンソールを行き来する必要がなくなるため、デバッグのサイクルが劇的に速くなります。

特にNode.jsやフロントエンドのJavaScript/TypeScript開発では絶大な効果を発揮します。
「百聞は一見に如かず」とはまさにこのこと。
一度この体験をすると、もう元の環境には戻れなくなるかもしれません。
デバッグ効率を上げたいすべての方に、心からおすすめします。

Pretty TS Errors

「TypeScriptの型エラー、長すぎて何が何だか分からない！」を解消

複雑な型定義やジェネリクスを多用したコードで発生するTypeScriptのエラーメッセージ。何行にもわたって表示され、どこが本質的な問題なのか読み解くのに苦労した経験はありませんか？

この拡張機能は、そんな複雑で読みにくいTypeScriptのエラーを、人間が理解しやすいように整形して表示してくれます。

デフォルトのエラー表示では一直線に連なっていた型情報が、適切にインデントされたコードブロックのように表示されるため、どの型がどこで一致していないのか（ミスマッチしているのか）を視覚的に素早く把握できます。

特に、ライブラリの型定義が絡んだり、複数の型を組み合わせたりした際に発生する難解なエラーの解読時間を大幅に短縮してくれます。
「型と格闘する時間」を減らし、本来のロジック開発に集中できるようになる、非常にありがたい拡張機能です。

Postman for VS Code

「APIのテストのために、いちいちPostmanアプリに切り替えるのが面倒…」を解決

バックエンド開発やAPIを利用したフロントエンド開発において、APIクライアントツールの「Postman」はもはや必須アイテムですよね。
しかし、コーディングの途中で動作確認をするたびに、VSCodeからPostmanのデスクトップアプリへウィンドウを切り替える作業を、面倒に感じていませんでしたか？

なんと、あのPostmanの主要機能がVSCode上で直接使えるようになります。

この拡張機能を使えば、エディタのサイドバーから使い慣れたPostmanの画面を呼び出し、APIリクエストの作成・送信、コレクションの管理、環境変数の設定といった一連の作業がすべて完結します。

これにより、アプリケーションの切り替えによる思考の分断を防ぎ、コーディングからテストまでの流れをシームレスに行うことができます。
わざわざ別のアプリを立ち上げることなく、コードを書いているその場所でAPIの挙動をすぐにテストできる快適さは、一度味わうと手放せなくなるでしょう。
APIを扱うすべての開発者におすすめです。

YAML by Red Hat

もうインデントで悩まない！CI/CDやk8sの設定に必須の拡張機能

GitHub Actions、Kubernetes、Docker Compose... 今や設定ファイルを書く場面でYAMLは避けて通れない存在です。
しかし、そのシンプルな見た目とは裏腹に、「スペース2つだったか4つだったか...」「このインデントであってる？」といった、わずかな構文の間違いでエラーになり、時間を溶かしてしまった経験はありませんか？

このRed Hat製の拡張機能は、そんなYAMLに関する悩みを解決してくれる、もはやデファクトスタンダード（事実上の標準）と言えるツールです。

VSCodeにインストールするだけで、主に以下の強力なサポートが受けられます。

• リアルタイム構文チェック: 間違ったインデントや不正な構文を即座に検知し、問題のある箇所をハイライトしてくれます。

• オートコンプリート（入力補完）: Kubernetesなどのスキーマを自動で認識し、利用可能なキーや値をサジェストしてくれます。ドキュメントと見比べる手間が大幅に削減されます。

• フォーマット機能: ファイル全体を正しいインデント構造に自動で整形してくれます。

言ってしまえば「入れておいて当たり前」の拡張機能ですが、もし導入していない方がいれば、今すぐインストールすることをおすすめします。
YAMLを手書きする際のあらゆるストレスからあなたを解放してくれる、縁の下の力持ちです。

Prisma

Prismaスキーマの編集が驚くほど快適に。定義からマイグレーションまでをスムーズに。

Node.jsやTypeScriptでデータベースを扱う際の強力な選択肢である「Prisma ORM」。
その中核となるのが、データベースのモデルやリレーションを定義するschema.prismaファイルです。
しかし、独自の構文を持つこのファイルを素のVSCodeで編集するのは、少し心許ないですよね。

このPrisma公式の拡張機能は、そんなスキーマファイル作成の体験を劇的に向上させます。インストールするだけで、VSCodeがPrismaのための専用IDEに早変わりします。

• シンタックスハイライト: モデル、型、属性などが色分けされ、視覚的に構造を把握しやすくなります。

• フォーマット機能: 保存時などに自動でコードを整形し、一貫性のあるきれいな状態を保ちます。

• 入力補完（オートコンプリート）: @idや@defaultといった属性や、リレーションを定義する際に、利用可能な候補を賢くサジェストしてくれます。

• リアルタイムエラーチェック（リンティング）: 間違った型や不正なリレーション定義をその場で検知し、教えてくれます。

prisma migrateコマンドを叩く前に、エディタ上でほとんどのミスに気づけるようになります。
Prismaを使うのであれば、開発効率を上げるために絶対にインストールしておくべき必須の拡張機能です。

ESLint & Prettier - チーム開発の必須ペア

コードの品質と"見た目"を自動で統一！もう規約で悩まない。

「このインデントはタブ？スペース？」「使っていない変数が残っている」…コードレビューが、ロジックとは関係ないスタイルや単純なミスの指摘で溢れていませんか？
この2つの拡張機能は、そうした問題を解決する現代Web開発の最強タッグです。

ESLintは、コードの品質を守る「ルール番長」。
バグにつながりそうなコードや、チームで決めた規約に反する箇所をリアルタイムで警告してくれます。

一方、Prettierは、コードの見た目を整える「凄腕スタイリスト」。
インデントやセミコロンの有無などを、保存するたびに一瞬で美しく整形してくれます。

この2つを連携させ、「品質チェックはESLint、見た目の整形はPrettier」と役割分担させるのがベストプラクティス。
コードのスタイルに関する不毛な議論をなくし、開発者が本来の機能開発に集中できる環境を整えてくれる、必須の拡張機能ペアです。

Jest & Vitest - テストの実行とデバッグをVSCodeで完結

ターミナルでのコマンド実行はもう不要！エディタ上で快適なテスト体験を。

ユニットテストや結合テストを書く際、テストの実行やデバッグのためにターミナルとエディタを行き来するのは地味に面倒な作業です。
これらの拡張機能は、代表的なテストフレームワークであるJestとVitestをVSCodeに深く統合し、その手間を解消してくれます。

これらの拡張機能を導入すると、以下のような快適なテスト環境が手に入ります。

• インラインでの結果表示: itやtestブロックの横に、テストが成功したか失敗したかを示すアイコンが直接表示されます。

• ワンクリックで実行・デバッグ: 各テストの横に表示されるボタンをクリックするだけで、特定のテストケースのみを実行したり、デバッグを開始したりできます。

• テストエクスプローラー: サイドバーにテストファイルの一覧が表示され、プロジェクト全体のテスト状況を簡単に把握できます。

「修正して、ターミナルでテスト実行して、結果を見て…」というサイクルを、すべてエディタ上で完結できるようになります。
テストを書くすべての開発者にとって、デバッグの効率を飛躍的に向上させてくれる必須の拡張機能です。

おわりに

いかがだったでしょうか。
気がついたらかなり有名どころも混じっていますね....
この他にも愛用している拡張機能はたくさんありますが、今回はその中でも「あまり見かけないけれど便利」なものを中心にご紹介しました。
（今、気になって数えてみたら73個も入っていました…）

今後も便利なツールを見つけたら、また紹介していきたいと思います。
それでは、また次の機会に。