ディレクター業務で使える！おすすめVSCode拡張機能

本記事は【Advent Calendar 2023】 3日目の記事です。
🎄 2日目 ▶▶ 本記事 ▶▶ 4日目 🎅

はじめに

はじめまして！入社3年目の後藤です。

突然ですが、みなさんはVisual Studio Code(以下VSCode)を使ったことはありますか？私は1年目でWebサイト制作を行っており、日々VSCodeを使ってコードを書いていました。

2年目以降Webディレクターとしての業務が中心になった今でもVSCodeはよく使用しています。そこで今回は、ディレクター業務でもVSCodeで活用できる便利な拡張機能とその使い方をいくつかご紹介していきたいと思います！

はじめに
VSCode 拡張機能のインストール方法
おすすめ拡張機能その1：GitLens
おすすめ拡張機能その2：Partial Diff
おすすめ拡張機能その3：Bookmarks
おすすめ拡張機能その4：Peacock
おまけ：vscode-pets
おわりに

VSCode 拡張機能のインストール方法

最初に、拡張機能のインストール方法について説明します。
まずVSCodeを開いて、左側に並んでいるアイコンのうち、赤枠のアイコンをクリックします。クリックすると検索フォームが表示されるので、インストールしたい拡張機能の名前を検索します。

検索結果の一覧から、自分がインストールしたいものを選択しインストールを行うことで、拡張機能の追加が完了します。

それでは次から、本題となるおすすめの拡張機能についてご紹介します。

おすすめ拡張機能その1：GitLens

一つ目に紹介するGitLensは、Gitの履歴をVSCode上で視覚的に確認できるようにする拡張機能です。
コードの各行にカーソルを合わせると、誰がいつコードを変更したのか、変更内容等を簡単に確認することができます。コードが変更された時期や背景等の調査を行う際に便利です。

おすすめ拡張機能その2：Partial Diff

Partial Diffは選択した文字列同士で差分チェックができる拡張機能です。
最初に比較したい文字列を選択した後、右クリックで「Select Text for Compare」を選択します。続いて、もう一つの比較したい文字列については「Compare Text with Previous Selection」を選択します。

すると新しいタブ上で選択した2つの箇所の差分を確認することができます。

同じエディタ内で比較したいコードや文言がある場合、上記のように簡単に確認できます。他にも、別のアプリ等でコピーしてクリップボードに入っている文字列との比較も可能なのでおすすめです。

おすすめ拡張機能その3：Bookmarks

Bookmarksは特定の行に対してブックマークを追加することができる拡張機能です。
ブックマークしたい行を右クリックし、Bookmarksの「Toggle」または「Toggle Labeled」を選択することでブックマークを追加します。

左側にある赤枠のアイコンをクリックすると追加したブックマークの一覧を確認することができ、特定の行へ素早く行き来することが可能です。あとで修正や確認が必要な箇所を忘れないようブックマークしたり、よくアクセスする部分に印をつけておくことで効率的に作業を進めることができます。

おすすめ拡張機能その4：Peacock

PeacockはVSCodeのウィンドウの色を変更できる拡張機能です。
コマンドパレットから「Peacock:Change to a Favorite Color」を選択することで、元から登録してある数種類の色から選ぶことができます。自分の好きな色に変更したい場合は「Peacock: Enter a Code」を選択し、カラーコードを入力します。

VSCodeで複数ウィンドウを開いている場合、ワークスペースごとに色分けしておくとウィンドウを間違えることがなくなるのでおすすめです。

おまけ：vscode-pets

最後に...業務では全く役に立たないおすすめの拡張機能を紹介します。
vscode-petsはVSCode上でペットが飼える拡張機能です。
コマンドパレットで「Pet Coding:Start coding session」を選択した後「Pet Coding: Spawn additional pet」を選択して、動物の種類や色、名前を指定すると可愛い動物が現れます。