コラム

おすすめのVScode拡張機能

マナビト
マナビト
こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。

実務を経験してから9ヶ月が経ち、エンジニア未経験の頃に紹介したVScodeの拡張機能も大分アップデートしました。

VScode おすすめの拡張機能 今回はテキストエディタの中でも人気の高いVScodeについて、個人的に入れてよかった拡張機能について紹介します。 ...

ですので、おすすめするVScodeの拡張機能をあらためて紹介していきたいと思います。

Bookmarks

Bookmarksは文字通り、後から見直したい場所をブックマークとして保存が出来る拡張機能です。

使用方法はシンプルでブックマークとして保存したい箇所で左クリックをするとBookmarksタグが出てくるので保存するだけです。

自分はソースデビューをお願いするときに、特に確認して欲しい箇所を保存しておき、確認もれがない様にしています。ただ何故かデバックをしている時、ブックマークしている箇所にブレークポイントを置くことが出来ず、いちいち解除しなければならないのが難点です。

gitLens

gitLensはGithubのリポジトリと連携してくれる拡張機能で、複数人で開発作業をしていた場合、誰がどのソースコードをどの様に変更したか表示してくれる機能です。もし不明なソースコードがあった際は直ぐに開発した人物に聞くことが出来るので、普段かなり重宝してます。

Jest Runner

Jest RunnerはJestで記載されたテストコードをVScode上でデバックすることが出来る拡張機能です。

この拡張機能を入れておくと、Jestで記載されたファイルを作成した際、自動で「Run | Debug」が生成され、個別にテストを実施することが可能です。

Jestに関連したもので「Jest Test Explorer」という拡張機能があり、Jest Runnerを一覧で実行することが出来ます。テストを実施する際に合わせて使用すると便利かと思います。

Rest Client

Rest Clientを使用して、HTTPリクエストとレスポンスの中身を簡単に確認することが出来ます。

リクエストとレスポンスを確認する用のファイルを準備して、URL等を記載して「Send Request」でリクエストを送信することが出来ます。HTTPリクエスト/レスポンスを確認するツールとして「Postman」が有名ですが、サッと中身を確認したいだけであれば、Rest Clientの方が有用かと思います。

XML Tools

XML ToolsはXMLで記載されたコードを整形してくれるツールです。

SOAP、XML通信を取り扱っているAPIのリクエスト/レスポンス等を確認時に重宝してます。

PlantUML

VScodeでシーケンス図を記載したい時に便利なのがPlantUMLです。

VScodeでシーケンス図を記載することが出来ます。

本日はここまでとなります。

COMMENT

メールアドレスが公開されることはありません。