2018年4月3日

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02


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

おすすめプラグイン【HTML編】

タグの閉じ忘れに!

AutoCloseTag

HTMLやXMLでタグを記載するときに、開始タグを打ち終わったときに自動的に終了タグを生成してくれるプラグインです。
HTMLやXMLを書いていて、特にタグの入れ子が多くなってきた時とか、終了タグを忘れてエラーになることってないですか?この Auto Close Tag を入れれば終了タグを毎回書かずに、開始タグを書いたら自動的にタグを閉じてくれます。
HTMLを書く効率が格段に上がるので、イチオシのプラグインです!

プラグイン名 Auto Close Tag
URL https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 

HTML、XMLの修正効率アップ!

AutoRenameTag

開始タグを修正したときに、自動的に対になる終了タグを修正してくれるプラグインです。
Auto Close Tagの親戚のようなプラグインですね。HTML/XMLの要素を修正することはよくあるかと思いますが、このプラグインは開始タグを書き換えれば終了タグも自動的に書き換えてくれるので、修正効率はとても上がるかと思います。
Auto Close Tagと併せて使うとあなたのVSCode環境は間違いなく快適になるでしょう!

プラグイン名 Auto Rename Tag
URL https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTMLマークアップのサポートに!

HTMLSnippets

HTML用の追加コードスニペットです。入力中に、入力内容に応じたHTMLスニペットが表示されるようになります。

HTMLSnippets

HTMLを普段からがっつり書く方はもしかしたら不要かもしれませんが、このプラグインを入れればHTMLの要素がわからなくなった場合など、スニペットが表示されるようになり入力のサポートをしてくれるようになります。入れておいて損はないですね!

プラグイン名 HTMLSnippets
URL https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

CSSの参照をサポート

intellisenseCSS

CSSクラスを指定するときに、入力補完してくれるのがこのプラグインです。
このプラグインを入れると、ワークスペースの中のCSSを読み込んでHTML上でクラス指定するときに入力候補を表示してくれるようになります。自分で定義したCSSでも、量が増えてくるとどんな名前にしたか忘れてきてしまうことってないですか?。このプラグインを入れておけば、自分で定義したCSSでもスムーズにクラスを指定できるようになると思います。

プラグイン名 IntelliSense for CSS class names in HTML
URL https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

さいごに

今回は、ワタシがよく使っているプラグインの中でも、HTML向けで特に使いやすいものを紹介してみました。特にプラグインを入れなくても快適に使えるのがVisual Studio Codeではありますが、自分好みのプラグインを入れるとIDE顔負けの環境になってくるところも素晴らしいエディタだなぁと感じます。皆さんもお好みのプラグインを見つけて、ぜひ快適で有意義なコーディング環境を作ってください!
次はプログラミング言語系のプラグインを紹介したいと思います。それでは、また。

2018年4月3日 【HTML編】Visual Studio Code おすすめプラグイン紹介 #02

Category 開発ブログ(技術ブログ)

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら