Topics インフォコネクト最新情報

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

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

インフォコネクトWebの豆知識

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

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

では、早速いきましょ~!!

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の豆知識]関連記事

Service

Contact

インフォコネクトに相談してみませんか?

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください