Visual Studio Code 拡張機能まとめ

VSCodeには便利な拡張機能がたくさんありますが、ここでは私がよく使用している拡張機能について3つほどまとめてみました。VSCode拡張機能については今後も定期的にまとめていきたいと思います。

Project Manager

Project ManagerはVSCodeで複数プロジェクトの開発をしている場合、簡単に切り替えることが出来る拡張機能です。

設定

設定方法は簡単で、インストール後にProject Manager拡張機能を開き、「Edit Projects」ボタン（鉛筆マーク）でプロジェクトの設定をJSONファイルで編集します。

設定項目

1. projects.json

name	プロジェクト名
rootPath	プロジェクトのパス
tags	タグ (配列で複数指定可能、検索で使用する)
enabled	有効フラグ (true or false)

設定例

[
  {
    "name": "laravel-project",
    "rootPath": "\\\\wsl.localhost\\Ubuntu\\home\\{username}\\laravel-project",
    "tags": [],
    "enabled": true
  },
  {
    "name": "test-project",
    "rootPath": "C:\\work\\test-project",
    "tags": [],
    "enabled": true
  }
]

イメージ

上記の例を保存して再度Project Managerを開くと、以下のように設定したプロジェクトが一覧表示されます。あとは任意のプロジェクトを選択するだけで、プロジェクトを切り替えることが出来ます。

Draw.io Integration

Draw.io Integrationは、VSCode上でDraw.ioを使ってフローチャートやDB関連図、クラス図などを作成することが出来ます。

設定などは特になく、拡張機能をインストールすればすぐに使うことが出来ます。

また、作成した図はsvgやpng形式でエクスポートすることが出来、エクスポートしたファイルはpngイメージであってもDraw.io上にインポートして再利用することが出来ます。

イメージ

Database manager for MySQL

Databaseのクライアント拡張機能についても様々なものがありますが、こちらの拡張機能が使いやすいと思いました。

設定項目

拡張機能のインストール後、左側のメニューからDatabaseを開き、右クリックからEdit Connection(DB接続設定)を入力します。

以下の例は、Docker上にビルドしたMySQLデータベースへ接続する例です。

イメージ