プログラミング

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

VSCodeおすすめプラグイン一覧

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

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

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

今回の記事で学べること

VSCodeでのおすすめのプラグインが一気にわかる

本記事の対象者
  • すでにVSCodeを使っていて、プラグインを見直したい
  • これからVSCodeを使うので、おすすめプラグインを脳死で選びたい

両方のニーズに答えていきます。

しょーご
しょーご
今回はweb制作やフロントよりのプラグイン紹介になります

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code

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

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

Live Server

Live Server

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

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

  1. HTMLファイルをブラウザにドラッグアンドドロップ
  2. 変更点が出たら修正保存し、もう一度ブラウザにHTMLファイルをドラッグアンドドロップ

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

しかしLive Serverでローカルサーバーを立てれば

  1. ファイルを変更保存
  2. 自動でブラウザが立ち上がり変更点を反映し表示する

と、ブラウザへの表示を自動化してくれます。

従来この「ローカルサーバーを立てる」という行為はとてもめんどくさかったのですが、このLive Serverによって革命的に簡単になりました。

レビューをしていると、たまにこの「Live Server」を立てずに作業をしている人がいるので、必ず「ローカルサーバーを立てて作業しましょう」

HTML CSS Support

HTML CSS Support

class名、id名を入力するときに、補完してくれる拡張機能です。

特に同じクラス名を入力すときにわざわざ同じクラス名を打つのは面倒なので、このように補完が出てくれるのはありがたいですね。

Auto Rename Tag

Auto Rename Tag

開始タグを修正したとき、終了タグも修正してくれます。

これの恩恵を一番受けるのは、大量の子孫要素をラップした親要素のタグを変えるときでしょう。

例えばform-wrapperのdivタグを、sectionに変えたい場合。

終了タグを探すのはとてもめんどうです。下までスクロールしなければなりません。

しかしこのプラグインなら、開始タグだけ変更すれば終了タグも同時に変更してくれるため、閉じタグを触る必要は金輪際なくなります。

HTMLHint

HTMLHint

HTMLのミスを教えてくれます。

例えば

<footer></footer>

と書かなければならないところを

<footer><footer>

などと記述してしまうと、エラーとヒントメッセージが出てくるようになります。

プログラミングはエラーメッセージと仲良くすることが自走できるエンジニアになるための必須条件なので、まずエラー文が出てくるようにしましょう。

Highlight Matching Tag

Highlight Matching Tag

Highlight Matchingは、HTMLの開始タグと対応する終了タグをわかりやすく表示してくれるプラグインです。

HTMLは終了タグが離れた位置にあるとき、どの開始タグに対応したタグなのかがわかりにくくなります。

とくに<div> タグなんかは、</div>地獄になります。

Highlight Matching

div地獄で迷わないために、必ず入れておきましょう!!

Bracket Pair Colorizer

Bracket Pair Colorizer

ペアになる ( ) や { } に色をつけて分かりやすくしてくれます。

これの威力は、SassやJavaScriptで確認できます。

どのカッコがどことペアかわかりやすいと思います。

Sassの場合
JavaScript,jQueryの場合
JavaScript,jQueryの場合

CSSTree validator

CSSTree validator

CSSTree validatorは、CSSファイルがW3Cに準拠しているかVALIDATIONしてくれる拡張機能です。

「W3C」はウェブの標準規格のこと(WEB世界のルール)。

「VALIDATION」は入力チェック(エラーチェック)のことです。

つまり、自分独自のルールではなく、WEB世界の標準のルールに沿った書き方がされているか勝手にチェックしてくれる拡張機能ということです。

色付けとエラーメッセージを出してくれます

※この拡張機能は入れておくだけでOKです!

indent-rainbow

indent-rainbow

その名の通りで、インデントがレインボーになり、インデントが見やすくなります。

Easy Sass(またはLive Sass Compiler )

Easy Sass(またはLive Sass Compiler )

Easy SassもLive Sass CompilerもSassを自動でコンパイルするプラグインになります。

SassはCSSの上位互換言語で現在Web制作でもフロントエンドでもSassがほとんどですが、CSSじゃないとブラウザは理解することができません。

なので、CSSに変更する(コンパイル)必要があり、このプラグインを使えばそれがファイル保存するだけで簡単に行えるということなのです。

zenkaku

コード中の全角スペースを教えてくれます。

コード中の全角スペースを教えてくれます。

プログラミングでは全角スペースはエラーの元で、基本的には半角スペース以外は許容されません。

また、駆け出し期にあるあるなのが、

ありさちゃん
ありさちゃん
プログラムが動きません!
まさひろくん
まさひろくん
あれ、ここだけ全角スペースになってない?
ありさちゃん
ありさちゃん
あ、ほんとだ!全然気づかなかった…

という状況だったりします。とても時間ロスなので、ぜひこの機会に入れておきましょう。

WordPress Snippet

WordPress Snippet

WordPressの関数(テンプレートタグ)の入力補完プラグインになります。

例えばWordPressにおいて画像を表示させるとき、よく

get_template_directory_uri();

と入力しなければならないのですが、ちょっと長くてめんどくさいですよね。

このプラグインを入れれば保管してくれるので

候補を出してくれて、入力が楽になります。

PHP Intelephense

PHP IntelephenseはPHPのコード補完やらコードチェックをしてくれるもので、PHPで開発する際に大活躍するプラグインです。

WordPressでも素のPHPコードを打つことはたくさんあるので、Web制作者であればぜひ入れておきたいですね。

GitLens

GitLens

これはWeb制作案件でGitを用いないと有用性が分かりづらいかもしれません。

ただGitを用いた個人開発、特にチーム開発では必須級のプラグインです。

  • いつ誰がcommitしたコードなのかを表示する
  • マウスオーバー時に直前のcommitとの差分を表示する
  • 履歴や変更内容を示す

など様々ありますが、個人でGitでプロジェクト管理する場合でも

いつ、どういう目的でコードを書いたのか分かる

のが大きいかなと思います。

Material Icon Theme

Material Icon Theme

Material Icon ThemeはVSCodeのディレクトリ、ファイルアイコンをとても素晴らしい見た目にしてくれるプラグインです。

なお「このプラグインええやん」的なツイートをした折に、開発者の方からメッセージを頂きました。

ありがとう。

background-cover【物好き専用】

Background-cover

VSCodeの背景を変更できる革命的なプラグインです。

Background-cover

自分の好きな画像に変更すれば、プログラミングのやる気も倍増します。

ライフハックすぎますね…

VSCodeをプラグインで貴方好みの仕様にしよう!!

個人的に入れて一番満足しているのは「background-cover」です笑

自分専用にカスタマイズしている感じがして、いいんですよね。

よく「仕事道具にはお金をかけろ」と言いますね。

仕事で長く使うことになるのだから、愛着湧くように手を入れると普段の作業も身が入っていいのではと思います。

僕は「background-cover」で背景画像を設定するようになってから、毎日が楽しいです。

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

ps:おすすめの拡張機能の記事も参考になるはずです↓

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

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

XDからの模写コーディング教材

XDデザインデータからのコーディング経験を積むことができ、ポートフォリオとして活用していただくことも可能です

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

しょーご

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

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

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