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

こんにちは、現在フリーランスのWeb制作者として5年ほど活動しているしょーごと申します。

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

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

今回の記事で学べること

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

本記事の対象者

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

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

Web制作寄りになります。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

＼無料の入門編から本格企業サイトまで／

課題を見てみる

この記事の評判
YouTubeでも出しました！
Web制作に特化したVSCode本発売！
基本設定
Japanese Language Pack for Visual Studio Code
Live Server
HTML CSS Support
Auto Rename Tag
CSS Peek
HTMLHint（2021.06外しました）
Highlight Matching Tag
Bracket Pair Colorizer 2（現在は外しました）
- はずした理由
- VSCodeでの設定
CSSTree validator（W3Cが非公式化したので外しました）
indent-rainbow
Path Intellisense
Live Sass Compiler(DartJS Sass Compiler and Sass Watcherとどちらか)
DartJS Sass Compiler and Sass Watcher(Sassならこちらを推奨)
- Gulpで参考にしたもの
zenkaku
WordPress Snippets
PHP Intelephense
- PHP Intelephenseの注意点：WordPressの場合のUndefines Function
GitLens
Material Icon Theme
background-cover【物好き専用】
VSCodeの設定
- autosave
- 自動閉じタグ
その他に入れてるシステム系言語の拡張機能
VSCodeをプラグインで貴方好みの仕様にしよう！！
おすすめのChrome拡張機能もぜひ

この記事の評判

YouTubeでも出しました！

Web制作に特化したVSCode本発売！

Web制作に特化したVSCode本が発売中です！お手元にぜひ一冊おいておくといいかなと！

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方

posted with ヨメレバ

リブロワークスインプレス 2022年03月10日頃

楽天ブックス

Amazon

Kindle

Web制作に特化したVSCode本が出たらしい👀https://t.co/dBy8O3usn8 https://t.co/HFFRIZv0mW
— しょーご@しょーごログ運営 (@samuraibrass) March 11, 2022

基本設定

まずは拡張機能の前に、超基本設定です。

変更の自動保存
コードの自動成形

これを設定します。

まだ表記が英語の方は、先に最初の拡張機能で日本語化しておいたほうがいいかもしれません。

まず、左下の歯車マークから設定をクリック。

その後、autosaveと検索して、Auto Saveの欄をafterDelayにしてください。

これにより、コード変更時にファイルが自動保存されるようになりました。

しょーご

毎回変更を手動で保存するのはめんどくさいので、自動化です。

あとは、コードを自動成形するようにします。saveと検索してください。

Format On Saveを見つけたら、チェックを入れるようにお願いします。

これで、最低限の設定は終わりになります。

いよいよ拡張機能を入れていきしょう！

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 Peek

ホバーしたクラス名の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で確認できます。

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

はずした理由

VS Code 1.60 で同様の括弧記号を色付けする機能が標準搭載され、またメンテナンスが終わったので、外しました。

とはいえデフォルトでは外れているので、オンにしないと使えません。

VSCodeでの設定

まずは左下の歯車アイコンから「設定」を押してください。

そしたら、「editor.bracketPairColorization.enabled」を検索してください。

そして出てきたチェックボックスにチェックを入れて、完了です。

setting.jsonの最下部に以下のコードが入っているはずです。

"editor.bracketPairColorization.enabled": true

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

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

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

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

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

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

indent-rainbow

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

Path Intellisense

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

Live Sass Compiler(DartJS Sass Compiler and Sass Watcherとどちらか)

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

ちなみにDart Sassに対応していないので（@useなど使えない）、今はあまりおすすめしません。次の「DartJS Sass Compiler and Sass Watcher」をどうぞ。

DartJS Sass Compiler and Sass Watcher(Sassならこちらを推奨)

Dart Sassに対応した拡張機能になります。

2022年からSassはNode SassからDart Sassになり、こちらの拡張機能はそのDart Sassに対応したものになります。

しょーご

ちなみに私は今はGulpやWebpackなどをSassのコンパイルに活用しているので、拡張機能自体は活用していません。

Gulpで参考にしたもの

私の友人エンジニアの出している解説が一番わかりやすかったです。これで構築しました。

https://brmk.io/JU4F

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形式のお決まりです。