VSCodeでEmmet入門

コーディングはやり始めるときは楽しいのですが、どんどん進めていくうちに、だんだんと入力が面倒になってきますよね。
そこで、コーディングを効率的に進める上で欠かせないのが「Emmet」です！

Emmetというのは、HTMLやCSSの入力をサポートするツールです。

「そんなのエディタの自動補完を使ってもいいじゃん。」という声も聞こえてきそうですが、Emmetに慣れてくるとコーディングのストレス軽減に大きな違いを実感できると思います。

入力例として

「height:100px」を入力するときは、
「h100」と入力→「Tab」キーを押す

「<div class=”wraper”></div>」を入力するときは、
「div.wraper」と入力→「Tab」キーを押す
というような感じになります。

慣れれば慣れるほどその効果を実感できると思います。

それではVSCodeでEmmetを使って行きましょう。

「Tab」キーでEmmet省略記法が展開されるようにする

①基本設定＞設定から「設定」を開きます。
②上部の検索窓から「emmet」を入力
③「trigger Expansion On Tab」にチェックをいれます。

これで準備が整いました。

HTMLの雛形を出力

まずは、HTMLの雛形を出力していきましょう。
VSCodeを開いてtest.htmlというファイルを作成して保存します。

それでは「html:5」と入力して「Tab」キーを押してください。下記のように展開されましたね。

html:5

↓↓↓

<!DOCTYPE html>
<html lang="en">
<head>
  
  
  Document
</head>
<body>
  
</body>
</html>

このままでは、「lang=”en”」になっているので、「基本設定＞設定」から「emmet」を入力して、「settings.jsonで編集」をクリックします。
そして下記の１行を追加します。

{
  "emmet.variables": {"lang" : "ja"}
}

「html:5」と入力して「Tab」キーを押すと、先程enになっていたところがjaになります。

EmmetのHTMLサンプル

基本的には「○○＋Tab」なので、下記を参考に一度試してみていただければと思います。

aタグ

↓↓↓

class名

a.top

↓↓↓

ID名

a#header

↓↓↓

リストタグを並べる場合

ul.test_list>li.test_item*3

↓↓↓

EmmetのCSSサンプル

height

h10

↓↓↓

height: 10px;

width

w100%

↓↓↓

width: 100%;

border-radius

bdrs4

↓↓↓

border-radius: 4px;

上記はほんの一例で、下記のリンクに各スタイルの記述する方法が書かれています。
https://docs.emmet.io/cheat-sheet/

これらをすべて覚えるのは難しいので、よく使うスタイルやhtmlだけでも覚えるとコーディングの負荷を軽減できると思います。
ぜひ活用してみてください！