こんにちは、Syuu（ @syuu_n18）です。
みなさんは普段どのコードエディターを使っていますか？
この記事ではエンジニアがよく使うコードエディターである「Visual Studio Code」のおすすめ拡張機能について紹介していきます。
Visual Studio Code とは？
Visual Studio Code 通称 VSCode とは Microsoft が提供している無料で使用できるコードエディターです。
エンジニアの間で使いやすさと拡張性の高さから人気が高く、実際私の周りでもほとんどの人が VSCode を使用しています。
今回はそんな Visual Studio Code で使用できる拡張機能の中でもカテゴリ別におすすめのものをご紹介します。
ビジュアル系
Material Theme
最初にご紹介するのは「
Material Theme」です。
これは Visual Studio Code のテーマ（カラー）を変更する拡張機能で、変更するだけでガラッとエディターの雰囲気が変わるためお気に入りのテーマを選びコーディング時のテンションを上げていきましょう！
Material Theme が提供しているテーマにはいくつか種類があり、以下に画像とともにリストを記載しますのでご自身が気に入ったテーマを探す参考になれば幸いです。
Material Theme
青色をメインとした落ち着いた雰囲気の Material Theme のデフォルトテーマです。
Material Theme Darker
Darker という名前の通り背景が黒になっているテーマです。
文字がくっくりと見えるためコードの可読性が上がり、また夜に使用する場合でも目に優しいです。
Material Theme Ocean
紫っぽい雰囲気かつ暗めのテーマです。
Darker よりも更にコードが目立つ感じがしますね。
Material Theme Palenight
palenight とは「薄光」という意味で、Ocean よりも更に紫かつ明るめとった雰囲気になっています。
Material Icon Theme
「 Material Icon Theme」はエディター左側のファイル一覧に表示されるアイテムのアイコンを変更する拡張機能です。
先程の Material Theme と同じ Material Design にもとづいて作られているため一緒に使うことで統一感のあるエディターになります。
アイコンの数が多く、全ては記載できないため各アイコンは以下の公式リンクからご確認ください。
ユーティリティ系
Bracket Pair Colorizer
ユーティリティ系の最初の拡張機能としてご紹介するのは「 Bracket Pair Colorizer」という拡張機能です。
コーディングをしていて、「この括弧はどことつながっている括弧だったかな...」となることは多々あると思います。
その時に Bracket Pair Colorizer を入れていると以下のように括弧をそれぞれハイライトしてくれるため、それがどこにつながっているのかをひと目で確認することができるためオススメです。
indent-rainbow
「
indent-rainbow」は各インデント（スペース）をレインボーにハイライトしてくれる拡張機能です。
こちらも Bracket Pair Colorizer と同じように入れているだけでインデントのズレなどをすぐに把握でき、快適にコーディングできるようになります。
Auto Rename Tag
HTML を書いている時にあとからタグをリネームしようとしてタグと閉じタグを編集するのは手間ですよね。
そんな時にこの「
Auto Rename Tag」をいれていると、片方のタグを編集するともう片方のタグを自動的にリネームしてくれます。
CSS Peek
次にご紹介するのは「 CSS Peek」という HTML のクラス名をホバーすることで適用されている CSS の情報を瞬時に取得できる拡張機能です。
「あのクラスに適用されている CSS はどれだったか...」という手間を減らせすことができるため便利です。管理している CSS の量が膨大になっていて適用されている CSS を探すのに時間がかかってしまう時に重宝しますね。
Emmet
最後にご紹介する「 Emmet」はHTMLやCSSを効率よくコーディングするための拡張機能です。
例えば通常であれば h1 タグを書く場合に <h1></h1> と入力しないといけませんが、Emmet を使うと h1 と入力し Tab を押すだけで自動的に <h1></h1> というタグを挿入してくれます。
他にも html:5 と入力することで以下のような HTML の雛形を素早く作成することができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
他にも様々なショートカットが存在しますが全て紹介すると長くなってしまうため、ここでは省略させていただきます。
以下のサイトでわかりやすくまとめられていました。
まとめ
いかがだったでしょうか？
今回は Visual Studio Code を使う上でいれておくと便利な拡張機能をご紹介しました。
このように様々な拡張機能を取り入れることで自分だけの快適なコードエディターを作ることができます。
本当に様々なものがあり、ここでは紹介しきれなかったものもありますが、快適なコーディングライフのお役に立てれば幸いです！
ここまで読んでいただきありがとうございました！
