ホームページ制作に欠かせないVisual Studio Code 拡張機能
ホームページ制作に欠かせない作業、コーディングをする際に使うエディタ。過去、メモ帳 → Dreamweaver → bracketsとエディタを渡り歩いてきましたが、現在は「Visual Studio Code」に落ち着いています。
使っている理由ですが、無料で高機能、みんなが使っているというよりも、なんとなく肌にあったといったところです。感覚的なことなで、実際に触ってみてフィーリングがあうエディタを使うことをオススメします。
弊社では、コーディングエディタについて強制はなく各自使いたいエディタを使って良いことになっていますので、自分が使いやすいエディタを使えることはすごく幸せです。
こういったエディタはソースが見やすく、拡張機能で作業の効率化が測れるのでなくてはならないツールの一つです。
今回は、エディタの使い方ではなく、拡張機能で私がインストールしている一部を紹介したいと思います。
Japanese Language Pack for Visual Studio Code
Visual Studio Codeは基本英語ですので、安心の日本語にローカライズ。
英語はちょっとって方は必須ですね。
Japanese Language Pack for Visual Studio Code
Material Icon Theme
ソースファイルのアイコンを見やすくする拡張です。
パッと見てphpファイルだ、SCSSファイルがカラフルなアイコンでファイルやフォルダが認識しやすくなります。いろいろアイコンを変える拡張がありますが、個人的に見やすいので、気に入って使っています。
Material Icon Theme
Prettier – Code formatter
保存時に自動的にフォーマットしてくれる拡張です。
空きすぎた無駄なスペースを自動的に削除していい感じにフォーマットしてくれます。親側のソースを削除したときとか便利です。
prettier – Code formatter
Bracket Pair Colorizer 2
（）の括りを色分けしてわかりやすくする拡張です。
JSやSCSSを書き込んでいくとこのカッコの始まりと終わりがわかりにくくなりますが、この拡張を入れいると色付きでわかりやすく表示されるので迷うことが少なくなります。
Bracket Pair Colorizer 2
V1とV2（Beta)がありますが、僕はV2を使っています。
indent-rainbow
インデントを色付けしてわかりやすくする拡張です。
入れ子が多いとインデントも多くなりますが、インデントに４つのカラーが繰り返しつくので分かりやすくなります。
indent-rainbow
Auto Rename Tag
タグの書き換えを楽にする拡張です。
先頭のタグを書き換えると自動的に閉じタグも書き換えてくれる拡張機能。書き換えが１回で済むので作業効率が上がります。
Auto Rename Tag
zenkaku
全角スペースを視覚的にわかりやすくしてくれる拡張です。
コーディングは基本半角ですが、誤って全角を入れてしまった場合にわかりやすく表示してくれます。
zenkaku
Visual Studio Codeもバージョンアップ毎に機能が追加されているので、今は拡張でしか提供されていない機能が、標準になったりすることもあるので、アップデート情報を確認しつつ、自分好みのエディタに育てていくのがいいのではないでしょうか？
自分好みのエディタで日々のコーディングワークを快適にしていきましょう！
