普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。
実務を経験してから9ヶ月が経ち、エンジニア未経験の頃に紹介した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でシーケンス図を記載することが出来ます。
本日はここまでとなります。
