悩む人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」が一番上に表示されます（たぶん、、、）。
「install」をクリックします。
そして、「Change Language and Restart」をクリックします。
その後、再起動されると日本語に変わっています。
変更の自動保存
自動保存の設定をしていない場合です。
このように画面を閉じようとする度に「に加えた変更を保存しますか？」という案内が表示されます。
自動保存の設定を行います。
「」＞「設定」を選択します。
「設定」画面が表示されました。
- Files: Auto Save：off（デフォルト）→「afterDelay」へと変更します。
自動保存が設定された場合です。
自動保存されているため「に加えた変更を保存しますか？」という案内が表示されずに画面が閉じます。
保存でインデントを整える。
「」＞「設定」を選択します。
「設定の検索」から検索をかけます。
下記を「設定の検索」にコピペします。
その後、下記画面が表示されるので「Editor: Format On Save」に「」を入れます。
これでインデントが整えられるようになりました。
インデントが整えられる場面です。
Macであれば⌘＋S、windowsであればCtrl＋Sでインデントが整います。
全角スペースを表示させる。
デフォルトでは、全角スペースや全角の「＃」や「！」は「黄色枠」で表示されます。
全角スペースが「黄色枠」で表示されるのは良いのですが、全角の「＃」や「！」も「黄色枠」で表示されるのは気持ち悪いので、そこだけ表示させないようにしていきます。
「」＞「設定」を選択します。
「設定の検索」から検索をかけます。
下記を「設定の検索」にコピペします。
その後、下記画面が表示されるので「Editor › Unicode Highlight: Ambiguous Characters」に「」を外します。
これで下記画像をご覧の通り全角の「＃」と「！」に「黄色枠」は表示されなくなりました。
コメントの全角スペースに「黄色枠」を表示させる方法も紹介します。
デフォルトでは、コメントの全角スペースに「黄色枠」は表示されません。
「」＞「設定」を選択します。
下記を「設定の検索」にコピペします。
その後、下記画面が表示されます。
Editor › Unicode Highlight: Include Comments ：「inUntrustedWorkspace」→「true」へと変更します。
これで下記画像をご覧の通りコメントの全角スペースも「黄色枠」で表示されるようになりました。
ペアになるカッコに色をつける。
デフォルトでは、ペアになる( )や{ }の色が同じになります。
基本的にはデフォルトのままで良いと思いますが、解除する方法を紹介しておきます。
「」＞「設定」を選択します。
下記を「設定の検索」にコピペします。
その後、下記画面が表示されるので「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と同じコードに書き換えられています。
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`の標準の関数ではないためエラー（赤の波線）にしてしまいます。
「」＞「設定」を選択します。
その後、下記画面の「設定の検索」に下記をコピペします。
下記画像の「項目の追加」から「wordpress」を追加します。
すると、下記画像をご覧の通り、赤の波線（エラー表示）が消えました。
Prettier
HTML、CSS、JavaScript（jQuery）などのコードを保存と同時に整えてくれます。
設定方法
「」＞「設定」を選択します。
下記を「設定の検索」にコピペします。
その後、下記画面が表示されるので「Editor: Default Formatter」を選択します。
以上で設定は完了しました。
保存と同時にコードが整えられる様子です。
vscode-icons
フォルダやファイルのアイコンのデザインを変更することができます。
設定方法
「」＞「テーマ」＞「ファイルアイコンのテーマ」を選択します。
ファイルアイコンの選択画面が表示されます。
以下よりそれぞれのファイルアイコンを確認することができます。
WordPress Snippets
WordPressの関数（テンプレートタグ）を入力補完してくれます。
今回はget_template_part();の入力補完を例に紹介します。
インストール前
get_teまで入力してもget_template_part();は入力補完の候補して挙がってきません。
インストール後
※特に設定の必要はなく、プラグインを「有効」にすればOKです。
get_teと入力するとget_template_part();が入力補完の候補として挙がってきます。
今後もWeb制作の作業がはかどるオススメ拡張機能を見つけた際には紹介していきます。
色々と試してみて自分なりのWeb制作がはかどる環境を整えて頂ければと思います。
今回は以上です。