はじめに
こんにちは！アドカレの季節がやってきましたね🎄
筆者はフロントエンドエンジニアとして働いていますが、
作業効率を上げてくれる拡張機能やツールの存在って大きいな〜と感じております。
この記事では、開発時に役立つ便利な拡張機能やツールのご紹介をしていきたいと思います！
Visual Studio Code拡張機能
indent-rainbow
インデントに色付けをして視認性を高めてくれる機能です。
コードを書き進めていくとネストが深くなっていってインデントが分かりにくくなってしまうことがありますが、これを導入することでインデントのずれが気付きやすくなります。
Trailing Spaces
意図せぬスペースが入り込んでしまうとなかなか気付きにくいと思いますが、
Trailing Spacesを入れておけば末尾の不要なスペースを赤くハイライトして知らせてくれます。
Todo Tree
プロジェクト内のTODO:のついたコメントの一覧を出力してリスト状にしてくれる機能です。
リファクタリングしたいけど一旦別の作業を進めたいような時に便利で、
後から対応すべきコード位置まで辿ることができます。
Auto Close Tag
名前の通り、自動的にHTMLの閉じタグをセットしてくれる機能です。
閉じタグを自力で書かずに済むので楽ですし、閉じタグ忘れも防止することができます。
Auto Rename Tag
入れ子になっている要素のHTMLタグ名を修正する時、階層が深いと対となる閉じタグが分かりにくく、対応するタグを間違えてしまったり、修正忘れをしてしまう懸念がありますよね。
Auto Rename Tagをインストールしておけば、対となるタグも同時に修正してくれます。
自動的にもう一方も修正してくれるので、書く手間も省けて楽ですね！
GitLens
ファイルのコミット履歴を確認できる機能です。
履歴を確認したい行にカーソルを当てると、編集者・コミット日時・コミットメッセージが表示されます。
Chrome拡張機能
OneTab
業務中、いつの間にかタブを開きすぎていることがないでしょうか？
こちらを使うと、ブラウザで開いているタブを1つのタブグループとしてまとめて管理してくれます。
1つにまとめるには、OneTabのアイコンをクリックすればOKです！
まとめるとリストが表示されます。
このタブグループには名前を付けて置くこともできます。
タブグループをすべて復元するには「すべて復元する」を、
特定の１つのタブのみ復元したい場合は、復元したいページをクリックすると再表示されます。
Text Blaze
ブラウザ用のスニペット登録機能です。
コードレビュー時、PRにmustやimoのようなラベルをつけ、指摘事項に対する対応要否の温度感をわかりやすくしている現場も多いのではないでしょうか。
私の所属するチームでは画像バッジをコメントに添えるようにしています。
Text Blazeの便利なところは、/imoと入力すれば上記のMarkdownに補完するような設定ができることです。
PerfectPixel
ピクセルパーフェクトを実現するために、デザインデータとコーディング内容の差分を可視化してくれるツールです。
コーディングしたページの上に画像化したデザインカンプを重ねることで、双方のズレを確認できます。
Window Resizer
Window Resizerはchromeのウィンドウサイズをワンクリックで指定のサイズに調整してくれる機能です。ウィンドウサイズをデザインと同じ値に合わせて確認したい時などに便利です。
デフォルトで7つのプリセットが用意されており、
1920 * 1080や375 * 667など、よく使用されるデバイスサイズが登録されています。
それ以外にオリジナルのサイズを登録しておくことも可能です。
ato-ichinen
Google検索で新しい情報だけに絞って検索したい時、有益だけども更新日時がかなり古い記事が上位に表示されることがあり、欲しい情報を探すのに時間がかかることはないでしょうか。
そんな時に便利なのがato-ichinenです。
拡張機能をインストールすると「1」のアイコンが表示され、アイコンをクリックすることで1年以内に更新されたページのみに絞って検索結果を表示してくれます。
終わりに
今回ご紹介した機能はいずれも有名なものが多いのでご存じの方も多いかもしれないですが、使ったことがないものがあったら是非インストールして使ってみてください！
我が物顔で紹介してしまいましたが、ほとんどが仕事をしていく中で先輩や同僚から教えて頂いたものです。本当にありがたいですね。
この記事がまた別の誰かのお役に立てることを祈っております🌈