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

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

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

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

今回の記事で学べること

VSCodeでのおすすめの拡張機能が一気にわかる

本記事の対象者

すでにVSCodeを使っていて、拡張機能を見直したい
これからVSCodeを使うので、おすすめ拡張機能を脳死で選びたい

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

しょーご

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

YouTubeでも出しました！

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に変えたい場合。

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

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

CSS Peak

ホバーしたクラス名のcssを確認することができたり、cssを変更できたりします。

HTMLHint（2021.06外しました）

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

例えば

<footer></footer>

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

<footer><footer>

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

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

Highlight Matching Tag

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

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

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

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

Bracket Pair Colorizer 2

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

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

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

CSSTree validator（W3Cが非公式化したので外しました）

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

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

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

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

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

indent-rainbow

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

Path Intellisense

ファイルパスを補完してくれる拡張機能です。

Live Sass Compiler

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

VSCode下部に出現する「Watch Sass」を起動することで、変更を自動で検知してコンパイルしてくれます。

また、設定次第ではベンダープレフィックスの追加も行えます。

私は普段はGulpやWebpackを用いますが、軽い確認程度のときはこのプラグインを動かすことが多いです。

"liveSassCompile.settings.formats": [ //Sassの出力内容の設定
    {
      "format": "expanded", //nested、compact、compressedのどれかを選ぶ
      "extensionName": ".css", //style.cssとして出力
      "savePath": "/css" //cssフォルダの中にstyle.cssを出力
    }
  ],
  "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
    "**/node_modules/**",
    ".vscode/**",
    ".history/**"
  ],
  "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
    "last 2 versions",
    "ie >= 11",
    "Android >= 4",
    "ios_saf >= 8"
  ],

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

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

zenkaku

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

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

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

ありさちゃん

プログラムが動きません！

まさひろくん

あれ、ここだけ全角スペースになってない？

ありさちゃん

あ、ほんとだ！全然気づかなかった…

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

WordPress Snippets

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

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

get_template_directory_uri();

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

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

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

PHP Intelephense

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

コード補完
エラーチェック
コードジャンプ

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

VSCodeのデフォルトのPHP補完機能はsetting.jsonでオフにしたほうがいいです。

"php.suggest.basic": false,
"php.validate.enable": false,

PHP Intelephenseの注意点：WordPressの場合のUndefines Function

そのままWordPress環境で使おうとするとテンプレートタグなどが未定義関数扱いされます。

そこで、Intelephense: Stubsからwordpressを追加してやります。

これでエラーが消えてWordPress環境でも使えるようになります。

GitLens

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

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

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

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

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

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

Material Icon Theme

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

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

Glad to hear that 👍
— Philipp Kief (@PhilippKief) July 25, 2020

ありがとう。

background-cover【物好き専用】

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

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

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

VSCodeの設定

autosave

画像のようにすれば、変更があって一秒後に自動保存されるようになります。

これでもう、わざわざ「ctrl+s」でファイルを手動保存をする必要はありません。

自動閉じタグ

コードをemmetで入力すると自動でコメントが付くようになります。

setting.jsonにコードを追加してやります。

"emmet.syntaxProfiles": {
    "html": {
      "filters": "html,c"
    }
  },
  "emmet.preferences": {
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
  },

最後のコンマをつけるか否かは、コードの位置が最後か途中挿入かで変わります。json形式のお決まりです。