お気に入りの拡張機能の紹介

はじめに

株式会社ジークス 3年目の竹村です。
前回のターミナルツールの投稿に続き、今回はお気に入りの拡張機能について紹介したいと思います。
主にVS Codeのものと、最近、バックエンドの作業で使用しているChromeのツールを紹介できたらと思います。

VS Codeの拡張機能

Console Ninja

VS Code上でコンソールログの内容を見れる優れものです。
ログの履歴がその場に全て表示されるのが推しポイント！
useEffectの実行タイミングなんかもモニタリングしやすいです。
中身のチェックなんかもとても便利。
無料プランだと、最新のViteで作ったプロジェクトだとしばらくは使えないのでそこだけ注意です！
https://console-ninja.com/

Code Spell Checker

実装時によく綴りミスをしてしまうことがあると思いますが、存在しない単語を変数名に設定すると青波線を出して教えてくれます。
キャメルケーススネークケースにも対応しているので、実装時のいわゆるタイポを無理なく防げます。
（コンソールの横に表示されているのはConsole Ninjaの内容）
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Auto Rename Tag

HTMLやXMLなど、開始タグと終了タグのセットで修正できる便利な拡張機能です。
キャプチャのようなJSXを使用するReactなどを実装していると、タグ名を変更することも多いですが、数が多いと閉じタグの修正が煩わしくなります。
そんなストレスを解消してくれます。
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Project Dashboard

複数のプロジェクトのディレクトリを並行して取り扱うことも多いですが、そんな時に便利なのがこの機能です。
ディレクトリを登録しておくと、選択するだけでプロジェクトを開くことができます。
グループ化することもできるので、関連のあるプロジェクトをまとめると見つけやすくて便利ですね。
https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard

GitLens

誰がいつコミットしたのか表示してくれる拡張機能です。
いつの修正なのかが一目でわかるところがとても便利です。
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Rainbow CSV

バックエンドの実装をしているとCSVファイルを扱う機能も多いですが、CSVを確認したり記述する際、あくまでもテキストデータなので見づらいかと思います。
そこでこの拡張機能を使うと、CSVファイルをカラムごとに色をつけて表示してくれます。
歯抜けになっている項目にも対応しているので、わかりやすいです。
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

Color Hitghlight

CSSなどでカラーコードを指定することも多いですが、その色をエディタ上でプレビューしてくれる拡張機能になります。
はっきりと色を確認できるので、見やすいです。
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

Chromeの拡張機能

Boomerang - SOAP & REST Client

APIのテストに使用ツールです。
GETでリクエストする際にはクエリパラメータを使用しますが、クエリパラメータを含んだURLと、GUIのフォームが連携していて、いずれの手段でも設定することができて便利です。
最近だと、Chat GPTにリクエストパラメータの内容を指示すると、クエリパラメータもサクッと作ってくれるので、URLから目に見える入力フォームに変換してくれるのは便利です。
POSTの際はJSONをフォームに貼り付ける形になります。
https://chromewebstore.google.com/detail/boomerang-soap-rest-clien/eipdnjedkpcnlmmdfdkgfpljanehloah?hl=ja&utm_source=ext_sidebar

おわりに

今回は、拡張機能という括りで、紹介させていただきました。
まだまだ効率化できるツール見つけていきたいですね。
次は何の記事を書こうか・・