【初心者向け】VSCodeのおすすめ拡張機能！！

皆さんはVSCode使っていますか？もちろん僕は毎日使っています！
VSCodeは一般的にコードエディタとして認知されていますが、拡張機能を導入することで図を書いたり、csvファイルを編集したり、APIクライアントとして利用できたりなどとにかく色々なことができます！今回はその中でも自分がおすすめする選りすぐりの拡張機能を紹介していきます！

Edit csv

インストール数：155万　⭐️：4.5

VSCodeで開発していてcsvファイルを開く際、テキスト形式で編集したり別アプリを起動してcsvファイルを編集している方は多いんじゃないでしょうか？

自分もその一人でした。VSCode上からcsvファイルのファイルパスを確認し、そのファイルパスをもとに他のアプリからcsvファイルを起動して、、、などとやっていると日が暮れてしまいます（言い過ぎ）

しかし！この拡張機能があればcsvファイルをvscode上で表形式で編集することが可能です。

ソートやヘッダを固定する機能もあります。また画面左上にある「＞」ボタンを押すと選択したセルの数や数値の合計などを計算してくれます。

関数などはありませんが「ちょっと確認したいな〜」というときに活躍してくれるため、最低限の編集やファイルの閲覧であればこちらのツールで完了してしまいます。

Draw.io Integration

インストール数：237万　⭐️：5

ER図、フローチャート、シーケンス図、クラス図などなど毎日じゃないんだけど、何かと図を書くケースがあるエンジニアの方は多いんじゃないでしょうか？

そんなときはDraw.ioの出番です。そもそもDraw.ioとは先ほど例に上げた図を作成することができるエンジニア御用達のツールです。主にWebアプリ版やデスクトップアプリ版が有名ですがなんとVSCode上でも動作させることもできます。

こちらの拡張機能をインストールした後、.drawioという拡張子をつけてファイルを開くと….

こんな感じでdraw.ioのアプリケーションが起動します！

めちゃめちゃ手軽です。

ちなみに自分は個人でコードを書く際、ER図やフローチャートなどのdrawioで作図してから実装します（たまにですが）。そのあと実装したコードをこのdraw.ioのファイルと一緒にgithubのリポジトリに上げています。

そうすることで外部ツールをなどを利用することなく、一つのリポジトリで図とコードを参照できるため管理が非常に楽になります。

Postman

インストール数：93万　⭐️：3.5

APIクライアントツールでは言わずと知れたPostmanもVScode上で利用できます！

そもそもPostmanとはAPIをテストするツールです。入力フォームにパラメータを設定することで簡単にテストを行うことができます。自分は外部のAPIを利用する際に先にレスポンスやヘッダ、ボディなどのパラメータの形式などを確認するためにPostmanを利用することが多いです！

こちらも使い方はシンプルで、拡張機能をインストールすると画面左側にPostmanのアイコンが表示されます。

そしてこのこのアイコンをクリックすると、、、

Postmanが起動します！

こちらの画像はJson PlaceholderのAPIを実行している画面です。

通常のPostmanと同様に左側のタブからプロジェクトごとにAPIを分割して管理することもできます。

Docker

インストール数：3694万　⭐️：4.5

こちらのツールはホストで立ち上がっているDockerコンテナの管理とDockerファイルのコード補完をしてくれる拡張機能となります。

（この拡張機能はDockerの実行環境を用意するためのものではありません。名前が少々紛らわしいですね、、）

こちらの拡張機能をインストールするとPostmanと同様、左側にDockerのアイコンが追加されます。

そしてクリックすると、、、Dockerコンテナの管理画面が出てきます！（自分はDockerが好きすぎるせいでコンテナが散らかっています）

上半分のCONTAINERSのブロックにはコンテナのステータスが、下半分のIMAGESのブロックには利用しているDocker Imageの一覧が表示されます。

Docker Composeで複数のコンテナを利用している場合は、複数のコンテナが並列で表示されます。

またコンテナに対し右クリックをするとこちらのメニューが表示されます。

こちらの機能の一部を解説します。

• View Logs

コンテナの実行中または過去のログ情報を表示することができます。またコンテナが立ち上がらなかった際もここからログを確認することができます。コンテナがエラーになった際の原因調査はいつもここからログを確認しています。

• Attach Shell

コンテナのターミナルを開くことができます。ホストの画面上でコンテナのシェルを操作できて便利。

• Attach Visual Studio Code

Dev Containerという拡張機能を追加でインストールすることで、現在実行中のコンテナ内でVSCodeを使ってコード編集やデバッグを行うことができます。個人的にはこの機能が一番便利だと思っています。

• Inspect

コンテナの設定情報などを確認できます。どのポートが開かれているか、どのボリュームがマウントされているか、環境変数なども確認できます。

• Open in Browser

コンテナ内で動作しているWebアプリケーションやサービスにブラウザでアクセスできます。わざわざポートを確認してブラウザで入力する必要がないため、スムーズにアクセスが可能です。

またDockerファイルのコード補完機能もあります。

通常の補完機能ではありますが、Dockerファイルを書く頻度はそこまで高くないのでこの機能も非常に助かります。

まとめ

いかがでしたでしょうか？

今回はVSCodeで自分のおすすめの拡張機能を紹介しました。VSCodeの世界は広くまだまだ面白い拡張機能がたくさんあります。またもし良い拡張機能があれば情シスナビで紹介していきます！

それでは良いエンジニアライフを！