VSCodeで使えるHTMLの拡張機能おすすめ5選【HTML編】

こんにちは、ユキです。

新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子

VSCodeでHTMLを楽に記述したいんだけどどうしたらいいの？

ユキ

VSCodeの拡張機能を使おう！

結論から言うと、VSCodeの拡張機能を使えばHTMLを楽にコーディングすることができます。

HTMLを使う際に便利な拡張機能は以下のようなものがあります。

まずはこれらをインストールすれば開発効率は格段に上がるでしょう。

私もこれらに助けられました。

それでは一つずつ見ていきましょう。

１：VSCodeとはどういうものか

２：拡張機能の役割

拡張機能の役割は、自分のコーディングをサポートしてくれるというものです。

自分のことを駅伝ランナーだと考えてみてください。駅伝ランナーは走ることが仕事です。周りにはそれをサポートしてくれる監督やマネージャーがいます。

ここでいう監督やマネージャーがVSCodeの拡張機能です。

自分の仕事の効率化、強化を図ってくれる便利なサポーターというわけです。

VSCodeの拡張機能とはVSCode単体ではサポートしていないものを後から付け加えるものです。

この拡張機能は既存のものをインストールすることも、自分で作成することもできます。

自分で作成するのは難易度が高いので主に拡張機能のインストールをすることになると思います。

ここではVSCodeの拡張機能でHTMLを使用する際に便利なものだけを紹介しますが、もっといろんな拡張機能をみたいという人は「Visual Studio Marketplace」を確認してみてください。

３：拡張機能の種類

それでは各拡張機能の説明をしていきます。

代表的なものを6個紹介します。

3.1 HTMLHint

現在編集中のHTMLドキュメントが解析され、エラーがあれば原因の箇所に波線ができます。

自分では気づきにくいエラーを早期発見するのに役立ちます。

3.2 zenkaku

インデントやスペースを入れるときに誤って全角を入れてしまったことを教えてくれる機能です。

具体的には全角になってしまったところは長方形で知らせてくれます。

3.3Path Intellisense

パスの入力中に、ディレクトリ名やファイル名を自動補完してくれます。

画像を何度も挿入しなければいけないときに便利です。

3.4 HTML CSS Support

HTML, CSSのclassやidを補完してくれます。

classやidはWeb制作をする際に何度も使うことになるで入れておくと便利ですね。

3.5 Auto Rename Tag

htmlの開始タグ、または終了タグを変更したら、対応するもう一方のタグと同じものに自動で補完します。

例えばこのpタグの開始タグだけbrタグに変更すると、

このようにbrタグに変更されます。

単純に作業効率が二倍になるのでおすすめの拡張機能です。

まとめ

今回はVSCodeで使えるHTMLの拡張機能おすすめ6選を解説しました。
VSCodeでコーディングする際に拡張機能は自分の仕事をサポートしてくれる優秀なサポーターとなってくれます。
これからこの優秀なサポーターを使ってどんどんコーディングしていってください。

VSCodeはこれからプログラミングを学んでいくと様々なところで使われているのを目にすると思います。
これからVSCodeを学んでプログラミングしていきたい人には「Udemy」がおすすめです。
Udemyでは現役のベテランエンジニアが初心者目線でわかりやすい構成の講座を数多く作成しています。

私が学習を完了した講座で「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」というものがあります。
これはHTML/CSS, JavaScriptの学習を通してWeb開発をしてく講座になります。
基礎から実際のプログラミングの仕方まで一貫して解説しているため基礎からHTMLを学びたい人やこれからWeb開発を仕事にする人におすすめの講座となります。

一つ一つの講座は有料のものが多いですが、タイムセールをしょっちゅう開催しているためタイムセール時に安くなった講座を買うようにしましょう。
無料の講座もあるので最初のうちは無料講座だけ学習しておくという方法もいいと思います。
会員登録も無料なので下記からログインしてどんな講座があるか確認しましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよかったらフォローしてください。

以上、ユキでした！