2018年4月3日
【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
-
- Category 開発ブログ(技術ブログ)

こんにちは。Visual Studio Codeのおすすめプラグイン紹介の時間がやって参りました。暖かくなってきてすっかりコーディング日和ですね。
さて、今回はHTMLのコーディングに役立つプラグインを紹介致します。Visual Studio Codeを使ったことが無いHTMLコーダーのあなたも、これを機にVisual Studio Codeをインストールして使い始めましょう!
おすすめプラグイン【HTML編】
タグの閉じ忘れに!

HTMLやXMLでタグを記載するときに、開始タグを打ち終わったときに自動的に終了タグを生成してくれるプラグインです。
HTMLやXMLを書いていて、特にタグの入れ子が多くなってきた時とか、終了タグを忘れてエラーになることってないですか?この Auto Close Tag を入れれば終了タグを毎回書かずに、開始タグを書いたら自動的にタグを閉じてくれます。
HTMLを書く効率が格段に上がるので、イチオシのプラグインです!
プラグイン名 | Auto Close Tag |
---|---|
URL | https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag |
HTML、XMLの修正効率アップ!

開始タグを修正したときに、自動的に対になる終了タグを修正してくれるプラグインです。
Auto Close Tagの親戚のようなプラグインですね。HTML/XMLの要素を修正することはよくあるかと思いますが、このプラグインは開始タグを書き換えれば終了タグも自動的に書き換えてくれるので、修正効率はとても上がるかと思います。
Auto Close Tagと併せて使うとあなたのVSCode環境は間違いなく快適になるでしょう!
プラグイン名 | Auto Rename Tag |
---|---|
URL | https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag |
HTMLマークアップのサポートに!

HTML用の追加コードスニペットです。入力中に、入力内容に応じたHTMLスニペットが表示されるようになります。
HTMLを普段からがっつり書く方はもしかしたら不要かもしれませんが、このプラグインを入れればHTMLの要素がわからなくなった場合など、スニペットが表示されるようになり入力のサポートをしてくれるようになります。入れておいて損はないですね!
プラグイン名 | HTMLSnippets |
---|---|
URL | https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets |
CSSの参照をサポート

CSSクラスを指定するときに、入力補完してくれるのがこのプラグインです。
このプラグインを入れると、ワークスペースの中のCSSを読み込んでHTML上でクラス指定するときに入力候補を表示してくれるようになります。自分で定義したCSSでも、量が増えてくるとどんな名前にしたか忘れてきてしまうことってないですか?。このプラグインを入れておけば、自分で定義したCSSでもスムーズにクラスを指定できるようになると思います。
プラグイン名 | IntelliSense for CSS class names in HTML |
---|---|
URL | https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion |
さいごに
次はプログラミング言語系のプラグインを紹介したいと思います。それでは、また。