あけましておめでとうございます！
皆様、お正月はどう過ごされましたか？
私は例年通りたのしく家にこもっていました。
さて、突然ですが皆様は何のテキストエディタを使ってコーディングを行っていますか？
DreamweaverやAtom、もしかしたらメモ帳を使っている方もいらっしゃるかもしれません。
かくいう私は、人生初の自作サイトはメモ帳で作りました。(十数年前です)
メモ帳でも勿論コーディングはできます。
しかし、テキストエディタの力を借りたほうが断然早くホームページ制作を行うことができます。
何故なら、コーディングを効率的に行えるように多くの拡張機能が用意されているからです。
今回の記事では私が使用している「Visual Studio Code」というテキストエディタの便利な拡張機能についてご紹介します。
※「Visual Studio Code」(VSCode)とは
Microsoftが開発したWindows、Linux、macOS用のソースコードエディタです。
無料でダウンロードできます。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
目次
拡張機能のインストール方法
サイドメニューにある赤丸で囲っているボタンをクリックして検索欄に拡張機能名を入力してインストールします。
Japanese Language Pack for Visual Studio Code
まずこれ！英語が苦手な方は最初にこの拡張機能をインストールしましょう！
メニューが日本語になります。
英語が得意な方、英語に慣れたい方はインストール不要です。
Auto Close Tag
閉じタグを自動的に入力してくれる拡張機能です。
自分で入力しなくて良いぶん楽できます。
Auto Rename Tag
開始タグ名を変更したとき、閉じタグ名も自動で変更してくれる拡張機能です。
例えば<p>タグを<div>タグに変更したいとき、開始タグの変更と同時に閉じタグの名前も変えてくれます。
Bracket Pair Colorizer
添付画像のように括弧を色分けしてくれます。
sassを書いているときに本当に本当にお世話になっています。
私になかではなくてはならない存在です。神。
indent-rainbow
上記「Bracket Pair Colorizer」の添付画像で列に色がついていますが、これです。
列を色分けしてくれる拡張機能です。
こちらも大変お世話になっています。神。
Highlight Matching Tag
ペアになっているタグを下線で教えてくれます。
コードが長くなってくるとどこに閉じタグがあるかわからなくなるのですが、それを解消してくれます。神。
EvilInspector
表示が崩れてるのに原因がわからない！結局原因は全角スペースだった…という経験はございませんか？
私はあります。そんな方に朗報です！なんとこの拡張機能、全角スペースを強調してくれます！
Insert<br>Tag
「shift + enter」で<br>タグを入力してくれます。いちいち自分で打たなくていいのでありがたい…
Beautify
コードをきれいにフォーマットしてくれます。
Color Highlight
カラーコードに色付けしてくれます。
どのタグにどんな色を指定したのかが、一目でわかります。
ちなみに我らがEmmet先輩ですが、な、な、なんと！VSCodeには標準搭載です！ありがとうございます！
以上、VSCodeの便利なパッケージのご紹介でした。
