プログラミング

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

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

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

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

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

今回の記事で学べること

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

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

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

Web制作寄りになります。

しょーご

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

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

この記事の評判

YouTubeでも出しました!

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

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

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

基本設定

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

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

これを設定します。

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

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

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

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

しょーご

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

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

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

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

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

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

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

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

CSS Peek

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

HTMLHint(2021.06外しました)

HTMLHint

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

例えば

<footer></footer>

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

<footer><footer>

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

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

Highlight Matching Tag

Highlight Matching Tag

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

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

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

Highlight Matching

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

Bracket Pair Colorizer 2(現在は外しました)

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

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

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

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

はずした理由

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

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

VSCodeでの設定

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

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

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

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

"editor.bracketPairColorization.enabled": true

CSSTree validator(W3Cが非公式化したので外しました)

CSSTree validator

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

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

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

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

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

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

indent-rainbow

indent-rainbow

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

Path Intellisense

Path Intellisense

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

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

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

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

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

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

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

 setting.jsonに追加する
"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を追加してやります。

まずは拡張機能を右クリック→拡張機能の設定
Intelephense: Stubsを探す
wordpressを追加してやる

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

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の設定

設定はここから

autosave

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

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

自動閉じタグ

setting.jsonへは「設定」ページより

コードを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で公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

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

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

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

基本的にまとめて購入していただくとかなりお得になります。

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

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!