【VSCode】コーディングが楽になる！Web制作におすすめ拡張機能14選

VSCodeの拡張機能には、それぞれコーディング効率を格段に向上させてくれる機能がたくさんあり、どれを導入したらいいのか分からなくなりますよね…

私はなるべく効率よくコーディングをしたくて様々な拡張機能を試してみました。

その中でサイト制作に便利な拡張機能を見つけましたので紹介します。

今回は拡張機能の導入方法と機能別でおすすめの拡張機能を紹介していきます！

拡張機能のメリット・デメリット

VSCodeの拡張機能にはメリット・デメリットが少なからずあります。

個人的に使っていて感じた点を挙げていくと、

以上の点かと思います。

導入しすぎで重くなることもありますが、適切な拡張機能を選ぶことはコーディングを効率よく行えるので、なくてはならない機能も多くメリットとなります。

拡張機能の導入の仕方

メリットでも説明した通り、拡張機能の導入は簡単に出来ますので、導入の仕方を紹介します。

導入について

今回は、日本語化の拡張機能「Japanese Language Pack for Visu」で紹介します。

無効化・アンインストールについて

無効化・アンインストールするには、拡張機能タブから機能を選択し、「無効にする」or「アンインストール」で行うことが出来ます。

今回紹介する拡張機能14選

必須の拡張機能

まず紹介するのは、VSCodeを使用したWeb制作において必ずと言っていいほど導入しておいた方がいい拡張機能です。

Japanese Language Pack for Visual Studio Code～日本語化～

VSCodeを日本語化する拡張機能です。

ほぼ初期設定の段階で導入する方も多いと思います。

こちらは導入→ソフト再起動で自動的に機能します。

拡張機能一覧へ戻る

Live Server

Live Serverはコーディングしているhtmlファイルを読み込んで、リアルタイムでブラウザでプレビューすることが出来る機能です。

CSSだけでなくJavascriptも読み込んで反映してくれるので、サイト制作にはなくてはならない機能です。

拡張機能一覧へ戻る

Prettier code formatter

Prettierはファイル保存時に自動でコードを整形してくれる機能です。

改行やインデントのズレなどを瞬時に整形してくれるので、かなり便利な機能です！

手動で整形するには「CTRL + Shift + P」で使うことが出来ます。

使う為には以下の初期設定が必要となります。

1. Format On Saveを有効にする
2. Default FormatterをPrettierに設定する

拡張機能一覧へ戻る

vscode-icons

VSCodeのファイルにアイコンを追加して見やすくしてくれる機能です。

どのファイルかわかりやすくなるので、おすすめです。

導入はインストールするだけで適用されます。

拡張機能一覧へ戻る

記述ミスが減る拡張機能

次に紹介するのは、導入することで記述ミスを減らすことが出来る拡張機能です。

Path Autocomplete

ファイルを参照する際に自動で候補を挙げてくれる機能です。

ファイル参照は長くなりやすく、打ち込むのも面倒になりがちでしたので重宝する機能でした。

こちらは導入するだけで適用されます。

拡張機能一覧へ戻る

zenkaku

zenkakuは全角のスペースや記号を発見してくれる機能です。

コーディングは半角が基本なので、気付いたら全角の英数字や記号・スペースを使ってしまうので、助かる機能です。

導入するだけで適用されます。

拡張機能一覧へ戻る

indent-rainbow

HTMLのコーディングが長くなると、タグがどこからどこまでか見失ってしまうことがありました…

このindent-rainbowは導入するだけで、インデントのズレの分だけタグが色分けされて分かりやすくなります。

拡張機能一覧へ戻る

Code Spell Checker

Code Spell Checkerは導入するだけでコードのタイプミスを検出してくれる機能です。

コーディングは英語で行いますので、タイプミスに気付かずにそのまま進めてしまうこともあります…

ですが、この機能があるおかげである程度のタイプミスを検出してくれた上に訂正の単語候補まで挙げてくれます！

拡張機能一覧へ戻る

Highlight Matching Tag

Highlight Matching Tagはindent-rainbowと同じように導入するだけでタグを見失わないようにしてくれる機能です。

こちらは対になる開始タグと終了タグをハイライトしてくれるので、めちゃくちゃ分かりやすいです！

拡張機能一覧へ戻る

コード補完の拡張機能

次にコードを入力時にコードを補完してくれる機能の紹介です。

Auto Rename Tag

Auto Rename Tagは開始タグと閉じタグを自動で補完してくれる機能です。

どちらのタグを変更してもリアルタイムで補完してくれます！

これがあれば閉じミスはほぼなくなります！

拡張機能一覧へ戻る

HTML CSS Support

HTML CSS SupportはHTMLの記述の時に、CSSファイルからクラス名を自動で参照して候補に挙げてくれる機能です。

先によく使う基本的なCSSを組んでおいてHTMLで参照出来るので、かなりおすすめです！

拡張機能一覧へ戻る

SCSS Everywhere

HTML CSS SupportのCSSバージョンです。これはHTMLで付与したクラス名をCSSで参照して候補に挙げてくれる機能です。

SCSSと書いていますが、CSSでも使用可能で、HTMLを記述してからCSSを書くことが多い私にとって救世主的な存在でした！

拡張機能一覧へ戻る

コード管理の拡張機能

最後にコードを管理することが出来る拡張機能を紹介します。

easy snippet

Easy Snippetはスニペットを保存できる機能です。

コーディングをするようになると同じコードの使い回しが増えて来るので、保存しておくと記述時に候補としてスニペットが表示されるので便利です。

拡張機能一覧へ戻る

Project Manager

案件ごとなどのワークスペースごとに切り替えたい時に役立つ機能です。

保存と呼び出しが簡単に行えますのでおすすめです。

私はサンプルコードなど実際に動いているのを確認用に切り替えたりして活用しています。

拡張機能一覧へ戻る

まとめ

今回はWeb制作におすすめなVSCodeの拡張機能について紹介しました。

それぞれ個人的に使用して使い勝手がいい拡張機能ですので、使ってみてください！

名前	機能	おすすめ度
Japanese Language Pack for Visual Studio Code	日本語化
Live Server	リアルタイムプレビュー
Prettier-Code formatter	コード自動整形
vscode-icons	アイコン追加
Path Autocomplete	パス補完
zenkaku	全角を発見
indent-rainbow	インデントの色付け
Code Spell Checker	スペルチェック
Highlight Matching Tag	HTMLの閉じタグ色付け
Auto Rename Tag	HTMLの閉じタグ自動補完
HTML CSS Support	CSS→HTMLコード補完
SCSS Everywhere	HTML→CSS(SCSS)コード補完
Easy Snippet	スニペット管理
Project Manager	ワークスペース管理

個人的にはHTML＆CSSの補完をしてくれる「HTML CSS Support」と「SCSS Everywhere」は感動するほど効率があがるのでめちゃくちゃおすすめです！

またコーディング後のサーバーへのアップロードについて、実際にFTPソフトを使用してのアップロード方法を紹介していますのであわせて読んでいただけると嬉しいです。