Visual Studio Code おすすめ拡張機能を紹介！【VSCode】

この記事は公開から1年以上経過しています。

こんにちは、WebデザイナーのAYAです！
今回は私が普段コーディングする中で使用しているおすすめ拡張機能を紹介します！

コーディングのスピードアップをしたい方、勉強を始めたばかりの方は是非読んでいただけると嬉しいです！

では、早速いきましょ～！！

• \\　目 次　//
• Japanese Language Pack for Visual Studio Code
• indent-rainbow
• Zenkaku
• Live Server
• VScode-icons
• CSS Peek
• Code Spell Checker
• HTML CSS Support
• Format HTML in PHP
• Auto close tag
• Trailing Spaces
• まとめ

Japanese Language Pack for Visual Studio Code

こちらは定番中の定番！
VS Codeをインストールしたばかりの時は英語表記になっているので、これをインストールして、再起動すれば日本語表記になります。
 

indent-rainbow

この拡張機能はインデントをカラフルに装飾してくれるので、コードが見やすくなり間違いを減らすことができます。?インデントを整えることがエラー削減のために重要になってくるので、インデントを整える癖をつけましょう！
 

Zenkaku

全角スペースを可視化することができます！
 

Live Server

ローカルでサーバーを瞬時に立ち上げ、ブラウザに表示してくれる拡張機能です。
HTMLやCSSなどを更新すると、自動でブラウザを更新してくれます！
ブラウザの表示がリアルタイムで表示されてとても便利なのでおすすめです。
 

VScode-icons

ファイルにアイコンがつきます。
文字だけだとパッと見で分かりにくいですが、この拡張機能を使用することで、ファイルの判別も色がついているので分かりやすいです。
また個人的な意見ですが、色がついているだけで少しわくわくするのでおすすめです！
 

CSS Peek

HTMLタグに適用されているCSSを確認することができます。
この拡張機能を使用する前は、検証ツールでCSSファイルが何行目に書かれているのかを調べていましたが、この拡張機能を使用することでCSSファイルまで確認しにいく手間が省けるので、実装効率が大幅に上がります。
 

Code Spell Checker

英語命名のタイポを防いでくれる拡張機能です。スペルが誤っている箇所を推測して波線で知らせてくれるので、英語が苦手な人やタイポミスが多い人におすすめです。
 

HTML CSS Support

HTML上でクラス名やID名を入力する時に、CSSファイルから参照して候補を表示してくれます。
 

Format HTML in PHP

PHPファイル中のHTMLが綺麗に整形されて、見やすくなります。
 

Auto close tag

開始タグを書き終わると同時に、終了タグが自動補完してくれます。
 

Trailing Spaces

余計なスペースが混じっていると、はっきりした赤色で教えてくれます。?行末に半角スペースが混じっているコードも、ひと目で分かるようになります。
 

まとめ

いかがでしたでしょうか。
ほかにも様々な拡張機能がありますが、私がよく利用するもの紹介しました。

コーディングの時間短縮には、こういったちょっとずつの積み重ねが大事だと考えています。
紹介した中に気になる拡張機能があったら嬉しいです。

ご覧いただきありがとうございました。
 

• 前の記事へ

  【宮本建設株式会社様】ホームページリニューアル

• 次の記事へ

  【池田司法書士事務所様】Webサイト開設