こんにちは、現在フリーランスのWeb制作者として5年ほど活動しているしょーごと申します。
みなさんプログラミングをする際のエディターは恐らくVSCodeをお使いだと思いますが、初期設定をしてからそのまま使い続けていないでしょうか?
今回はweb制作エンジニアとして5年ほど活動している私の使用しているプラグイン・設定をご紹介したいと思います。
VSCodeでのおすすめの拡張機能が一気にわかる
- すでにVSCodeを使っていて、拡張機能を見直したい
- これからVSCodeを使うので、おすすめ拡張機能を脳死で選びたい
両方のニーズに答えていきます。
Web制作寄りになります。
この記事を書いたのは
しょーご(@samurabrass)
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
\現役エンジニアのレビュー付き/
実践レベルのコーディング課題公開中

- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
\無料の入門編から本格企業サイトまで/
- この記事の評判
- 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(現在は外しました)
- CSSTree validator(W3Cが非公式化したので外しました)
- indent-rainbow
- Path Intellisense
- Live Sass Compiler(DartJS Sass Compiler and Sass Watcherとどちらか)
- DartJS Sass Compiler and Sass Watcher(Sassならこちらを推奨)
- zenkaku
- WordPress Snippets
- PHP Intelephense
- GitLens
- Material Icon Theme
- background-cover【物好き専用】
- VSCodeの設定
- その他に入れてるシステム系言語の拡張機能
- VSCodeをプラグインで貴方好みの仕様にしよう!!
- おすすめのChrome拡張機能もぜひ
この記事の評判




YouTubeでも出しました!
Web制作に特化したVSCode本発売!
Web制作に特化したVSCode本が発売中です!お手元にぜひ一冊おいておくといいかなと!
Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方
基本設定
まずは拡張機能の前に、超基本設定です。
- 変更の自動保存
- コードの自動成形
これを設定します。
まず、左下の歯車マークから設定をクリック。

その後、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に変更する(コンパイル)必要があり、このプラグインを使えばそれがファイル保存するだけで簡単に行えるということなのです。
DartJS Sass Compiler and Sass Watcher(Sassならこちらを推奨)

Dart Sassに対応した拡張機能になります。
2022年からSassはNode SassからDart Sassになり、こちらの拡張機能はそのDart Sassに対応したものになります。
ちなみに私は今はGulpやWebpackなどをSassのコンパイルに活用しているので、拡張機能自体は活用していません。
Gulpで参考にしたもの

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のディレクトリ、ファイルアイコンをとても素晴らしい見た目にしてくれるプラグインです。

なお「このプラグインええやん」的なツイートをした折に、開発者の方からメッセージを頂きました。
ありがとう。
background-cover【物好き専用】

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

自分の好きな画像に変更すれば、プログラミングのやる気も倍増します。
ライフハックすぎますね…
VSCodeの設定

autosave

画像のようにすれば、変更があって一秒後に自動保存されるようになります。
これでもう、わざわざ「ctrl+s」でファイルを手動保存をする必要はありません。
自動閉じタグ

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

setting.jsonにコードを追加してやります。
"emmet.syntaxProfiles": {
"html": {
"filters": "html,c"
}
},
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},
最後のコンマをつけるか否かは、コードの位置が最後か途中挿入かで変わります。json形式のお決まりです。

以下のわたしのライブコーディングでも反映されているかと思います。
その他に入れてるシステム系言語の拡張機能

VSCodeをプラグインで貴方好みの仕様にしよう!!
個人的に入れて一番満足しているのは「background-cover」です笑
自分専用にカスタマイズしている感じがして、いいんですよね。
よく「仕事道具にはお金をかけろ」と言いますね。
仕事で長く使うことになるのだから、愛着湧くように手を入れると普段の作業も身が入っていいのではと思います。
僕は「background-cover」で背景画像を設定するようになってから、毎日が楽しいです。
あなたもぜひお気に入りの一枚を〜
おすすめのChrome拡張機能もぜひ
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。

- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!
\課題の購入はこちらから/
\課題の詳細はこちらから/