VSCodeのHTMLショートカット【emmetで効率的なHTMLコーディング】

こんにちは、太郎です。

独学でWEB制作を学んで１年で制作会社に転職し、今は現役エンジニアとして活動しています

新米エンジニア

コーディングには慣れてきたけどHTMLって
毎回同じこと書かなきゃいけなくて面倒くさいんだよねぇ
効率悪いよね〜

太郎

そんな時こそエディターの出番だ！
VSCodeでHTMLを効率的に作成するためにはemmetという
ショートカットのような機能があるんだ！
emmetを使うことで大幅にコードを書く量が減らせるよ！

個人開発はもちろんチーム開発をする上で、

VSCodeでHTMLを書いていくと同じ様な記述をする部分が出てくると思います。

コードをストックしておいてコピペでもいいんですが、毎回微妙に構成が違うのでそのままは使いにくい、そんなときのために

HTMLショートカット=>emmetを使用しましょう！

なぜなら、ルールを覚えるのは少し大変かもしれませんが、開発をする上でコードの記述を減らせる機能があるならば使わない手はありません。

記述が減ることは直接生産性の向上につながることですので、是非この機会に一緒に覚えていきましょう。

この記事では、HTMLコーディングを加速させるためのVSCodeショートカットについて詳しく解説します。初心者向けの便利なコマンド集を提供します。

この記事で分かること

emmetの必要性
emmetの使い方
emmetのカスタマイズ

Emmetとは？
1. テキストエディタ用プラグイン
2. VSCode HTML ショートカット（emmet）一覧
ショートカットの組み合わせ
まとめ：emmetを使用してhtmlの時短しよう！

Emmetとは？

テキストエディタ用プラグイン

EmmetはHTMLを効率的に作成し、プロジェクトをスピーディに進める、VSCodeが備えているテキストエディター用のプラグインです。言い換えるとHTMLショートカットキーです。

VSCodeは、HTMLコーディングの効率を向上させる多くのショートカットを提供しており、これらを活用することで作業効率が飛躍的に向上します。

Emmet — the essential toolkit for web-developers

VSCodeをはじめとする多くのテキストエディターで使用できるため、エンジニアにとって非常に便利なツールです！

VSCode HTML ショートカット（emmet）一覧

以下は、よく使用されるHTMLコーディングのショートカットキーの一覧です。これらのショートカットを活用することで、HTMLファイルを簡単かつ迅速に作成できます。

1. >(要素のネスト)
ネスト形式のコードを書きたい場合は
div>h1とvscodeで入力しエンターを押します。
すると以下のようなコードが生成されます。

<div>
    <h1></h1>
</div>

2. ＊(要素の複製)
複数の要素を作成する場合、例えば
li＊3と入力すると、3つの<li></li>要素が生成されます。

<li></li>
<li></li>
<li></li>

2. $(連番の付与)
要素に連番を付けることも可能です
liのtextをテキスト1,2,3のように連番にしたい場合
li{テキスト$}＊3とすると、$ の部分が連番に置き換えられます。

<li>テキスト1</li>
<li>テキスト２</li>
<li>テキスト３</li>

クラス名やID名をつけたい時

1. クラス名の追加：ドット（ . ）
tagにクラス名を付けたい時は
p.classNameというようにタグの後ろにdotでつなぎ
クラス名をつけることが出来ます

<p class="className"></p>

2. ID名の追加ドット（ # ）
tagにID名を付けたい時は
p#classNameというようにタグの後ろを#でつなぎ
クラス名をつけることが出来ます

<p id="className"></p>

ショートカットの組み合わせ

それではこれらの基本的なEmmetのショートカットを組み合わせて、より複雑なHTMLコードを効率的に生成してみます。
例えば、ヘッダーセクションのデザインをEmmetを使用して作成することで、同じようなコードの記述を削減することができ、生産性が向上します。
ヘッダーのデザインをemmetで作成してみました！

組み合わせ次第でどの様な構成でもemmetを使用して構造を作成することが出来ますので、
是非色々と試してみてください！

div>h1.logo+ul>li*5>a{テキスト$$}