【VSCode】Web制作の作業がはかどるオススメ拡張機能16選

当ページのリンクには広告が含まれています。
プログラミング初心者

VSCodeは導入したんだけど、Web制作に必要な拡張機能が分からないので教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • VSCodeでWeb制作にオススメな拡張機能
  • 拡張機能の設定方法
  • 拡張機能以外のオススメな設定

合わせて読みたい記事

あわせて読みたい
【VSCode】MacのFinderでクイックアクションを実行する 【VSCode】MacのFinderでクイックアクションを実行する方法を知りたいですか?本記事では、Finderでクイックアクションを実行するために必要なワークフロー(「クイックアクション」>「Open with Code」)の作成や削除方法を解説しています。MacのFinderでクイックアクションを実行する方法を知りたい方は是非ご覧ください。
あわせて読みたい
【VSCode】スニペット登録してWeb制作の作業効率アップ⤴︎ VSCodeでスニペット登録してWeb制作の作業効率をアップさせる方法を知りたいですか?本記事では、スニペット登録前後での作業効率の違い(動画を用意)や登録方法(登録に便利なツールの紹介)、複数登録する際の注意点まで解説しています。VSCodeでスニペット登録してWeb制作の作業効率をアップさせたい方は是非ご覧ください。
本記事の内容

【VSCode】Web制作の作業がはかどるオススメ拡張機能16選

Japanese Language Pack for Visual Studio Code

デフォルトでは英語のVSCodeを日本語化してくれます。

英語から日本語へ

拡張機能(四角が4つのマーク)を選択します。

下記を「Search Extensions in Marketplace」にコピペします。

Japanese Language Pack for Visual Studio Code

「Japanese Language Pack for Visual Studio Code」が一番上に表示されます(たぶん、、、)。

「install」をクリックします。

そして、「Change Language and Restart」をクリックします。

その後、再起動されると日本語に変わっています。

変更の自動保存

自動保存の設定をしていない場合です。

このように画面を閉じようとする度に「に加えた変更を保存しますか?」という案内が表示されます。

自動保存の設定を行います。

」>「設定」を選択します。

「設定」画面が表示されました。

  • Files: Auto Save:off(デフォルト)→「afterDelay」へと変更します。

自動保存が設定された場合です。

自動保存されているため「に加えた変更を保存しますか?」という案内が表示されずに画面が閉じます。

保存でインデントを整える。

」>「設定」を選択します。

「設定の検索」から検索をかけます。

下記を「設定の検索」にコピペします。

Editor: Format On Save

その後、下記画面が表示されるので「Editor: Format On Save」に「」を入れます。

これでインデントが整えられるようになりました。

インデントが整えられる場面です。

Macであれば⌘+S、windowsであればCtrl+Sでインデントが整います。

全角スペースを表示させる。

デフォルトでは、全角スペース全角の「#」や「!」は「黄色枠」で表示されます。

全角スペースが「黄色枠」で表示されるのは良いのですが、全角の「#」や「!」も「黄色枠」で表示されるのは気持ち悪いので、そこだけ表示させないようにしていきます。

」>「設定」を選択します。

「設定の検索」から検索をかけます。

下記を「設定の検索」にコピペします。

Editor › Unicode Highlight: Ambiguous Characters

その後、下記画面が表示されるので「Editor › Unicode Highlight: Ambiguous Characters」に「」を外します。

これで下記画像をご覧の通り全角の「#」と「!」に「黄色枠」は表示されなくなりました。

コメントの全角スペースに「黄色枠」を表示させる方法も紹介します。

デフォルトでは、コメントの全角スペースに「黄色枠」は表示されません。

」>「設定」を選択します。

下記を「設定の検索」にコピペします。

Editor › Unicode Highlight: Include Comments

その後、下記画面が表示されます。

  • Editor › Unicode Highlight: Include Comments:「inUntrustedWorkspace」→「true」へと変更します。

これで下記画像をご覧の通りコメントの全角スペースも「黄色枠」で表示されるようになりました。

ペアになるカッコに色をつける。

デフォルトでは、ペアになる( ){ }の色が同じになります。

基本的にはデフォルトのままで良いと思いますが、解除する方法を紹介しておきます。

」>「設定」を選択します。

下記を「設定の検索」にコピペします。

Editor › Bracket Pair Colorization: Enabled

その後、下記画面が表示されるので「Editor › Bracket Pair Colorization: Enabled」の「」を外します。

すると下記画像をご覧の通りペアになる全ての( ){ }の色が白になりました。

Auto Rename Tag

開始タグを修正すると、同時に終了タグも修正してくれます。

インストール前

インストール後※特に設定の必要はなく、プラグインを「有効」にすればOKです。

Code Spell Checker

英単語のスペルミスがあると「波線」を引いて教えてくれます。

インストール前

インストール後

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

変わりづらいですが「serch(正しくはsearchです。)」の下に波線が引かれています。

CSS Peek

「⌘」を押しながらクラス名(mb6)にカーソルを合わせると、CSSを確認することができたり、そのままクリックするとmain.cssに書いている.mb6に移動することができます。

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

DartJS Sass Compiler and Sass Watcher

動画の流れ

  • 流れ①:main.scssにコードを書きます。
  • 流れ②:文字色が赤になります。 + cssフォルダが作成されます。
  • 流れ③:cssフォルダを開いてmain.cssファイルを開くとmain.scssと同じコードが書かれています。
  • 流れ④:main.scssのコードを書き換えます。 + 文字色が青に変わります。
  • 流れ⑤:main.cssファイルを開くとmain.scssと同じコードに書き換えられています。

合わせて読みたい記事

じゅんぺいブログ
【VSCode】Dart Sassが使えるプラグイン『DartJS Sass Compiler and Sass Watcher』の使い方 VSCodeでDart Sassが使えるプラグイン『DartJS Sass Compiler and Sass Watcher』の使い方について解説します。パーシャルファイルが保存されたタイミングでコ

Highlight Matching Tag

対応するタグ(開始タグと終了タグ)に「黄色の下線」が引かれて表示されます。

インストール前

インストール後

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

HTML CSS Support

class名やid名を入力するときに補完してくれる拡張機能です。

インストール前

インストール後

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

HTMLHint

HTMLの記述ミスがあると「黄色の波線」を引いて教えてくれます。

インストール前

赤枠内に1箇所記述ミスがあるのですが分かりますか?

インストール後

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

正解は、sectionの終了タグ(</section>)が2箇所あります。

このように記述ミスを教えてくれます。

htmltagwrap

タグで囲みたい範囲を選択して、Macであればoption + W、windowsであればalt+Wを押すとpタグで囲ってくれます。

そのままpタグを消して他のタグに書き換える事も出来ます。

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

indent-rainbow

インデントに色をつけてくれます。

インストール前

インストール後

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

Live Server

HTMLやCSSの変更を「再読み込み」することなく反映させることができます。

インストール前

  • 手順①:画面左側の「index.html」を画面右側にドラッグ&ドロップすることで画面右側に「index.html」に書いている内容が表示されます。
  • 手順②:画面左側に書いている「Lorem ipsum dolor sit amet.」を消した後「再読み込み」します。
  • 手順③:すると、画面右側の「Lorem ipsum dolor sit amet.」が消えます。
  • 手順④:再度「Lorem ipsum dolor sit amet.」を戻し「再読み込み」すると「Lorem ipsum dolor sit amet.」が表示されます。

インストール後※特に設定の必要はなく、プラグインを「有効」にすればOKです。

  • 手順①:画面左側右下の「Go Live」をクリックすると画面右側に「index.html」に書かれている内容が表示されます。
  • 手順②:画面左側に書いている「Lorem ipsum dolor sit amet.」を消します。
  • 手順③:すると、「再読み込み」することなく画面右側の「Lorem ipsum dolor sit amet.」が消えます。
  • 手順④:再度「Lorem ipsum dolor sit amet.」を戻すと「再読み込み」することなく「Lorem ipsum dolor sit amet.」が表示されます。

Path Intellisense

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

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

PHP Intelephense

VSCodeのオートフォーマッタ(インデントを整えてくれる)は様々な言語に対応しているのですがPHPには対応していません。

そこで、こちらのプラグインを入れることで、Macであれば+option + F、windowsであればshift + alt + Fでインデントを整えてコードを見やすくしてくれます。

インストール前

インストール後

赤色の波線(エラー表示)を消す方法を紹介します。

WordPressのテンプレートタグはPHP`の標準の関数ではないためエラー(赤の波線)にしてしまいます。

」>「設定」を選択します。

その後、下記画面の「設定の検索」に下記をコピペします。

Intelephense: Stubs

下記画像の「項目の追加」から「wordpress」を追加します。

すると、下記画像をご覧の通り、赤の波線(エラー表示)が消えました。

Prettier

HTML、CSS、JavaScript(jQuery)などのコードを保存と同時に整えてくれます。

設定方法

」>「設定」を選択します。

下記を「設定の検索」にコピペします。

Editor: Default Formatter

その後、下記画面が表示されるので「Editor: Default Formatter」を選択します。

以上で設定は完了しました。

保存と同時にコードが整えられる様子です。

合わせて読みたい記事

あわせて読みたい
【VSCode】Prettierの使い方&おすすめ設定を紹介 こんにちは、たけはんです。自動整形フォーマッターをプロジェクトで導入してみたところ、めちゃくちゃ便利だったのでPrettierプラグインの使い方をまとめてみました。Pret...

vscode-icons

フォルダやファイルのアイコンのデザインを変更することができます。

設定方法

」>「テーマ」>「ファイルアイコンのテーマ」を選択します。

ファイルアイコンの選択画面が表示されます。

以下よりそれぞれのファイルアイコンを確認することができます。

WordPress Snippets

WordPressの関数(テンプレートタグ)を入力補完してくれます。

今回はget_template_part();の入力補完を例に紹介します。

インストール前

get_teまで入力してもget_template_part();は入力補完の候補して挙がってきません。

インストール後

※特に設定の必要はなく、プラグインを「有効」にすればOKです。

get_teと入力するとget_template_part();が入力補完の候補として挙がってきます。

今後もWeb制作の作業がはかどるオススメ拡張機能を見つけた際には紹介していきます。

色々と試してみて自分なりのWeb制作がはかどる環境を整えて頂ければと思います。

以上で解説を終わります。

本記事が疑問解決の役に立つと幸いです。

最後まで読んで頂きありがとうございました。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容