Web制作勉強方法

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

VSCodeおすすめプラグイン一覧
本ページにはプロモーションが含まれています。

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

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

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

今回の記事で学べること

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

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

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

Web制作寄りになります。

しょーご

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

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

\現役エンジニアのレビュー付き/

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

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

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

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

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

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

この記事の評判

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

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

indent-rainbow

indent-rainbow

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

Path Intellisense

Path Intellisense

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

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

Live Sass Compiler

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を追加してやります。

まずは拡張機能を右クリック→拡張機能の設定
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実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

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

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

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

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

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

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

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

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする