【web制作者必見】Visual Studio Code(VSコード)のおすすめの拡張機能12選を解説

今回はこういった疑問について解説していきます。

僕は普段web制作をする際に使用してるエディターはVisual Studio Code (以下VSコード)を使用しています。今回は普段コーディングをしていく際にこれ便利だな〜と感じている拡張機能を12個紹介していきます。これからVSコードを使ってコーディング作業をしていく人、現在使っているけどいい感じの拡張機能を探している人はぜひ参考にしてみてください！

web制作におすすめなVSコード拡張機能12選

Japanese Language Pack For Visual Studio Code

これは日本人であればほぼ必須の拡張機能ですね。VSコードは基本的に英語表記ですがこの拡張機能をインストールすれば日本語対応されます。インストールしたらVSコードを再起動しましょう。すると日本と対応に変わります。

Prettie - Code formatter

こちらの拡張機能ははコードを整形する際に使用します。インデントの調整や、余計な余白を削除してくれます。Macだったら「Command + Shift + F」Windowsだったら「Ctrl + Shift + F」でソースコード全体を整形してくれます。

VSコードの設定で自動整形を選択することもできます。

個人的には、この自動整形はあまりおすすめしていません。使ってみて感じたことは、class=“”など書いている途中で入力を2秒ほど止まってしまうと勝手に改行や文字の削除が行われてしまいます。

コードを書くスピードがそこまで早くない初期段階は自動整形がない方がコードが書きやすいなと感じています。

Auto Close Tag

HTMLの開始タグを入力してEnterを押すと自動で終了タグを記述してくれます。VSコードに標準搭載されているEmmetという機能を駆使することでより速く正確にコードを記述することができます。

Emmtの使い方に関しては別記事で解説します。

Aoto Rename Tag

HTMLタグの修正をする際、開始タグを修正すると自動で終了タグも修正してくれる機能です。

CSS Peek

HTMLやCSSのクラスをマウスホバーすると、それぞれ関連するクラスを参照してくれます。コードの記述量が多くなってどのクラスがそのCSSに当たっているかわからなくなった時などに重宝します。

Highlight Matching Tag

HTMLのタグにカーソルを合わせるとそのタグのペアタグを参照してくれます。
HTMLは記述が多くなると入れ子が複雑になりタグのペアがわからなくなることが多々あるのでこの機能があるとそう言ったミスを防いでくれます。

HTML CSS Support

クラスやタグを記述する時に、候補の属性やプロパティを挙げてくれます。タイピング量も減りますし、タイプミスも減らせるのでとても便利です。

indent-rainbow

HTMLの階層をわかりやすく色付けしてくれます。

Live Sass Compiler

こちらの拡張機能はSCSS記法で記述する際に、自動でCSSファイルを作成しそこにCSS記法で書かれたコードを出力してくれます。これによりSCSS記法で書きながら勝手にCSSに直してくれるのでコーディングが楽になります。

Live Server

この拡張機能をVSコード立ち上げ時に起動するとHTMLで書いた記述をそのままローカルブラウザ上で反映してくれます。修正するたびにブラウザをリロードする手間が省けるため作業効率化に便利です。

Material Icon Theme

各ファイルのフォントをファイル名の頭に出力してくれます。ビジュアルでこのファイルがどの言語で書かれたものかがすぐにわかります。

zenkaku

コードの中にある全角の空白がすぐにわかります。HTMLなどのコードは全額があるとエラーになってしまうのでこちらの機能を入れておくと万が一エラーが出た時にすぐに空白が牽引かどうか検証することができます。

まとめ

今回ご紹介した拡張機能はほんの一部なので興味のある人は他の拡張機能も探してみてみましょう！ただ、拡張機能をたくさん入れすぎるとVSコード自体が重くなって作業がしづらくなることもあるのでインストールを慎重にすることと、定期的に使ってない拡張機能の見直しなどもしていきましょう。

今回は以上です。ありがとうございました。

参考

【独学者必見】主要プログラミング学習サービス3つを比較

続きを見る

参考【体験談】テックアカデミーの評判を実際に受講したので徹底的に話します

続きを見る