こんにちは、現在フリーランスのエンジニアとして2年ほど活動しているしょーごと申します。
みなさんプログラミングをする際のエディターは恐らくVSCodeをお使いだと思いますが、初期設定をしてからそのまま使い続けていないでしょうか？
今回はweb制作エンジニアとして2年ほど活動している私の使用しているプラグインをご紹介したいと思います。
VSCodeでのおすすめのプラグインが一気にわかる
- すでにVSCodeを使っていて、プラグインを見直したい
- これからVSCodeを使うので、おすすめプラグインを脳死で選びたい
両方のニーズに答えていきます。
- Japanese Language Pack for Visual Studio Code
- Live Server
- HTML CSS Support
- Auto Rename Tag
- HTMLHint
- Highlight Matching Tag
- Bracket Pair Colorizer
- CSSTree validator
- indent-rainbow
- Easy Sass（またはLive Sass Compiler ）
- zenkaku
- WordPress Snippet
- PHP Intelephense
- GitLens
- Material Icon Theme
- background-cover【物好き専用】
- VSCodeをプラグインで貴方好みの仕様にしよう！！
Japanese Language Pack for Visual Studio Code
これはすでに導入している方も多いかもですが、「VSCodeの文章を日本語化するプラグイン」です。
デフォルトでは英語なので、必ず導入しておきます。
Live Server
簡易ローカルサーバーを起動し、HTMLやCSSの更新を検知してライブプレビューしてくれます。
もう少しわかりやすく言うと、例えばローカルサーバーを使わないと
- HTMLファイルをブラウザにドラッグアンドドロップ
- 変更点が出たら修正保存し、もう一度ブラウザにHTMLファイルをドラッグアンドドロップ
という手順を踏まなくてはなりません。他にもサーバーを建てないと色々機能制限されます。
しかしLive Serverでローカルサーバーを立てれば
- ファイルを変更保存
- 自動でブラウザが立ち上がり変更点を反映し表示する
と、ブラウザへの表示を自動化してくれます。
従来この「ローカルサーバーを立てる」という行為はとてもめんどくさかったのですが、このLive Serverによって革命的に簡単になりました。
レビューをしていると、たまにこの「Live Server」を立てずに作業をしている人がいるので、必ず「ローカルサーバーを立てて作業しましょう」
HTML CSS Support
class名、id名を入力するときに、補完してくれる拡張機能です。
特に同じクラス名を入力すときにわざわざ同じクラス名を打つのは面倒なので、このように補完が出てくれるのはありがたいですね。
Auto Rename Tag
開始タグを修正したとき、終了タグも修正してくれます。
これの恩恵を一番受けるのは、大量の子孫要素をラップした親要素のタグを変えるときでしょう。
例えばform-wrapperのdivタグを、sectionに変えたい場合。
終了タグを探すのはとてもめんどうです。下までスクロールしなければなりません。
しかしこのプラグインなら、開始タグだけ変更すれば終了タグも同時に変更してくれるため、閉じタグを触る必要は金輪際なくなります。
HTMLHint
HTMLのミスを教えてくれます。
例えば
<footer></footer>と書かなければならないところを
<footer><footer>などと記述してしまうと、エラーとヒントメッセージが出てくるようになります。
プログラミングはエラーメッセージと仲良くすることが自走できるエンジニアになるための必須条件なので、まずエラー文が出てくるようにしましょう。
Highlight Matching Tag
Highlight Matchingは、HTMLの開始タグと対応する終了タグをわかりやすく表示してくれるプラグインです。
HTMLは終了タグが離れた位置にあるとき、どの開始タグに対応したタグなのかがわかりにくくなります。
とくに<div> タグなんかは、</div>地獄になります。
div地獄で迷わないために、必ず入れておきましょう！！
Bracket Pair Colorizer
ペアになる ( ) や { } に色をつけて分かりやすくしてくれます。
これの威力は、SassやJavaScriptで確認できます。
どのカッコがどことペアかわかりやすいと思います。
CSSTree validator
CSSTree validatorは、CSSファイルがW3Cに準拠しているかVALIDATIONしてくれる拡張機能です。
「W3C」はウェブの標準規格のこと（WEB世界のルール）。
「VALIDATION」は入力チェック（エラーチェック）のことです。
つまり、自分独自のルールではなく、WEB世界の標準のルールに沿った書き方がされているか勝手にチェックしてくれる拡張機能ということです。
※この拡張機能は入れておくだけでOKです！
indent-rainbow
その名の通りで、インデントがレインボーになり、インデントが見やすくなります。
Easy Sass（またはLive Sass Compiler ）
Easy SassもLive Sass CompilerもSassを自動でコンパイルするプラグインになります。
SassはCSSの上位互換言語で現在Web制作でもフロントエンドでもSassがほとんどですが、CSSじゃないとブラウザは理解することができません。
なので、CSSに変更する（コンパイル）必要があり、このプラグインを使えばそれがファイル保存するだけで簡単に行えるということなのです。
zenkaku
コード中の全角スペースを教えてくれます。
プログラミングでは全角スペースはエラーの元で、基本的には半角スペース以外は許容されません。
また、駆け出し期にあるあるなのが、
という状況だったりします。とても時間ロスなので、ぜひこの機会に入れておきましょう。
WordPress Snippet
WordPressの関数（テンプレートタグ）の入力補完プラグインになります。
例えばWordPressにおいて画像を表示させるとき、よく
get_template_directory_uri();と入力しなければならないのですが、ちょっと長くてめんどくさいですよね。
このプラグインを入れれば保管してくれるので
候補を出してくれて、入力が楽になります。
PHP Intelephense
PHP IntelephenseはPHPのコード補完やらコードチェックをしてくれるもので、PHPで開発する際に大活躍するプラグインです。
WordPressでも素のPHPコードを打つことはたくさんあるので、Web制作者であればぜひ入れておきたいですね。
GitLens
これはWeb制作案件でGitを用いないと有用性が分かりづらいかもしれません。
ただGitを用いた個人開発、特にチーム開発では必須級のプラグインです。
- いつ誰がcommitしたコードなのかを表示する
- マウスオーバー時に直前のcommitとの差分を表示する
- 履歴や変更内容を示す
など様々ありますが、個人でGitでプロジェクト管理する場合でも
いつ、どういう目的でコードを書いたのか分かる
のが大きいかなと思います。
Material Icon Theme
Material Icon ThemeはVSCodeのディレクトリ、ファイルアイコンをとても素晴らしい見た目にしてくれるプラグインです。
なお「このプラグインええやん」的なツイートをした折に、開発者の方からメッセージを頂きました。
ありがとう。
background-cover【物好き専用】
VSCodeの背景を変更できる革命的なプラグインです。
自分の好きな画像に変更すれば、プログラミングのやる気も倍増します。
ライフハックすぎますね…
VSCodeをプラグインで貴方好みの仕様にしよう！！
個人的に入れて一番満足しているのは「background-cover」です笑
自分専用にカスタマイズしている感じがして、いいんですよね。
よく「仕事道具にはお金をかけろ」と言いますね。
仕事で長く使うことになるのだから、愛着湧くように手を入れると普段の作業も身が入っていいのではと思います。
僕は「background-cover」で背景画像を設定するようになってから、毎日が楽しいです。
あなたもぜひお気に入りの一枚を〜
ps:おすすめの拡張機能の記事も参考になるはずです↓
HTML初心者からWordPress実案件レベルまでのコーディング教材をnoteで公開しています。
XDデザインデータからのコーディング経験を積むことができ、ポートフォリオとして活用していただくことも可能です。
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
マガジンでまとめて購入していただくとお得になります。
書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
