vscodeのエメットについておさらい

みなさんこんにちは。コーダーのモリシタです。

皆さんは普段コーディングスピードを上げるためにどのようなことをしていますでしょうか？
もちろん技術力が伴えばスピードは上がりますが、その前に最低限誰でもできるような対策はしておきたいです。

そこで今回は、意外と知らないvscodeの便利なEmmet(エメット)について紹介してきたいと思います。

Emmetとは

Emmetとは、HTMLやCSSを省略記法で入力することができるプラグイン、ツールです。

Emmetを使ってコーディングを行うことによって、必要なキー入力の回数を減らすことができ、コーディングの速度が大幅に向上します。
VSCodeでは、HTMLやCSSなどのファイルはデフォルトでEmmetが有効になっているので、特に何かをインストールしたり、設定を変更しなくてもEmmet省略記法を使ってコーディングを行うことができます。

とはいえEmmetという言葉は知らなくても普段から無意識に使用している人は多いかもしれません。

例えば、
section.about
と入力して、EnterもしくはTabキーを押すと、下記のようにHTMLのタグが展開されます。

＜select class=“about”＞＜/select＞

このようにvscodeには少しでもラクに記述できるように機能が備わっています。
めんどくさがりの自分にはとってもありがたい機能です。。

個人的によく活用しているEmmet

●HTML編

・通常のタグ
使用キー : タグ名　　使用例 : h1　
＜h1>＜/h1>

・タグの入れ子
使用キー : >　　使用例；ul>li　
＜ul>
＜li>＜/li>
＜/ul>

・複数の同じタグ
使用キー : *　　使用例；ul>li*3
＜ul>
＜li>＜/li>
＜li>＜/li>
＜li>＜/li>
＜/ul>

・テキストを指定
使用キー : {}　　使用例；h1{タイトル}
＜h1>タイトル＜/h1>

・classを指定
使用キー : .　　使用例；h1.title
＜h1 class=“title”>＜/h1>

●CSS編

fz　→　font-size
m　→　margin
p　→　padding
l　　→　left
lh　→　line-height
w　→　width
df　→　display: flex;

上記のように1~2文字程度入力するだけでcssの入力補完をしてくれます。
さらに数字を組み合わせると以下のようにもできます。

fz18　→　font-size: 18px;
w100　→　width: 100px;
ml10　→　margin-left: 10px;
p3-5-3-5　→　padding: 3px 5px 3px 5px;
t50%　→　top: 50%;
c#000　→　color: #000;

まとめ

デフォルトで入っているエメットを活用するだけでもだいぶコーディングがラクになると思いませんか？
また単語登録のように自分で好きなようにショートカットキーを作成することもできるので、そういったものを組み合わせるともっと便利になるかもしれません。
それでは良いコーディングライフを。