【Web制作向け】VSCodeおすすめプラグインと設定一覧【超快適】

こんにちは、現在フリーランスのエンジニアとして2年ほど活動しているしょーごと申します。

みなさんプログラミングをする際のエディターは恐らくVSCodeをお使いだと思いますが、初期設定をしてからそのまま使い続けていないでしょうか？

今回はweb制作エンジニアとして2年ほど活動している私の使用しているプラグインをご紹介したいと思います。

しょーご

ちなみに最近はRailsやVue,Nuxt,Pythonを触る機会がありそれ関連の拡張機能も色々いれていますが、今回は「Web制作者」にターゲットを絞ってお話しますので、「Web制作に関連したものだけ」あくまで紹介していこうと思います。

Japanese Language Pack for Visual Studio Code

これはすでに導入している方も多いかもですが、「VSCodeの文章を日本語化するプラグイン」です。

デフォルトでは英語なので、必ず導入しておきます。

Live Server

簡易ローカルサーバーを起動し、HTMLやCSSの更新を検知してライブプレビューしてくれます。

もう少しわかりやすく言うと、例えばローカルサーバーを使わないと

という手順を踏まなくてはなりません。他にもサーバーを建てないと色々機能制限されます。

しかし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」で背景画像を設定するようになってから、毎日が楽しいです。

あなたもぜひお気に入りの一枚を〜

おすすめのChrome拡張機能もぜひ

web制作におすすめの拡張機能トップ10【生産性アップ】 こんにちは、現在フリーランスのweb制作者として2年ほど活動しているしょーごと申します。 皆さん、Chromeの拡張機能は何を使...

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング教材をnoteで公開しています。

1. XDデザインからのコーディング
2. 2回の表示確認特典
3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！

マガジンでまとめて購入していただくとお得になります。

書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！

コーディング教材販売ページへ

各教材の解説ページへ