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

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

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

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

今回の記事で学べること

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

本記事の対象者

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

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

Web制作寄りになります。

しょーご

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

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

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

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

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

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

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

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

ひとまず課題を見てみる

この記事の評判

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を変更できたりします。

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

indent-rainbow

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

Path Intellisense

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

Live Sass Compiler

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

Glenn Marks氏のLive Sass Compilerになってから、Dart Sassにも対応するようになりました。

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

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

私は普段はGulpやWebpackを用いますが、軽い確認程度のときはLive Sass Compilerを動かすことが多いです。

以下はsetting.jsonでの設定例です。

"liveSassCompile.settings.formats": [
    {
      "format": "expanded", // 出力されるCSSの形式。"expanded"は通常の読みやすい形式。"compressed"は圧縮された形式。
      "extensionName": ".css", // 出力されるファイルの拡張子。通常は.css。
      "savePath": null // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、'/'はルートディレクトリを意味する。
    }
  ],
  "liveSassCompile.settings.autoprefix": [
    "> 10%",          // 全体のユーザーの10%以上が使用しているブラウザバージョンに対応
    "last 2 versions" // 各ブラウザの最新2バージョンに対応
  ],
  "liveSassCompile.settings.excludeList": [
    ".vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外
  ],
  "liveSassCompile.settings.generateMap": false, // ソースマップ(.map)ファイルの生成を無効にする。
  "workbench.editor.untitled.hint": "hidden",    // VS Codeの未命名エディタのヒントを非表示にする。
  "liveSassCompile.settings.includeItems": []    // 特定のアイテムをコンパイルに含めるリスト。現在は空。

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

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

しょーご

詳しい設定方法は、以下の記事で解説していますよ！！おすすめの拡張機能です！！

しょーご

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

Gulpで参考にしたもの

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

作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】

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