【VSCode】いまさらEmmetの存在を知ったので使ってみた

俺は決してWEB屋とかではないのだが、HTMLだとかCSSは何かと便利なので、ちょいちょい使ってなんか作ってる。で、ちょっとした物を作る度に「HTML5ベースで作んないとアレだから、ネットからテンプレをコピペしてこないとだなー」とかいうことを泥臭くやってたのだが、ある日、Visual Studio Codeでシコシコとタグ打ち込んでるときに、妙なインテリセンスが目に入った。

「html:5」ってなんやねん。と思いながら、おもむろに選んでみると・・・

ファッ!? なんかテンプレ展開されるやんけ!なにこの便利機能!Emmet、お前だったのか。いつもTabで補完してくれていたのは。

こいつについて調べてみたところ、EmmetはHTMLやCSS、XMLとかで使える、テキストエディタ向けの入力補完マンらしい。ほむほむ、さっそく試してみようジャマイカ。

HTMLで試す

Emmetのチートシートを眺めてみたところ、色々と便利コマンドが書いてある。なので、そいつらを組み合わせてテキトーなタグを作ってみることに。

個人的に、よく使う&書くのめんどいやつだと<select>からの<option>が挙げられる。なんかのフレームワーク使ってるんだったら繰り返し出力できるから良いんだけど、フルスクラッチで軽いもん作る時はコピペミスとかあってアレなのよね。

select#hoge[name=fuga]>option[value=$]*5{test$}

なんかこんなんなった。パッと見は訳わからないが、ちょっと頑張れば理解できるような難易度なので、俺みたいな低学歴の底辺プログラマでもラクラクだぜ。打ち込み終わったら、おもむろにTabを押してみる。

しゅ、しゅごーい!むしろ、今までゴリゴリ書いてた苦労は一体なんだったんや・・・。10分ぐらいで理解したEmmetの書き方は、だいたい下記のような感じ。

  • タグの頭とケツ <> は書かなくて良い。
  • .hogeがclass、#hogeがidに対応。
  • [attr=某]で、タグの属性を記述できる。
  • 親要素と小要素の間は「>」を入れる。
  • 「*n」とかの演算で繰り返しが記述できる。
  • 「$」をつけると連番を勝手に振ってくれる。
  • 要素内のテキストは {} 内に書く。

チートシート読むともっと深いテクニックあるのだけれど、今の所はこれだけ覚えてれば戦えそう。

CSSでも試す

割とスタイルシートって英単語を並べて書くようなイメージあるんだけれども、スペルミスとか起こしやすいし面倒なのよね。その点、Emmetを使えば「略称」だけ打ち込めば一気に展開してくれるので、非常に楽だ。

bd → border: 1px solid #000;
bgc → background-color: #fff;

だいたいこんな感じ。俺がレイアウトを仮組みするときは、divとかで作った箱をテキトーな背景色で塗りつぶしたり、テキトーな枠線を引いたりしながら調整することが多いので、このあたりがサクッと入力できるだけでヒジョーに助かる。

Emmet…恐ろしい子っ!

ちょっと触っただけでこのパフォーマンスなので、もうちょい使ってくうちに慣れてきて開発効率うなぎのぼりかもしれない。いままでは割と入力補助系の機能とかプラグインに無頓着だったので、可能な限り楽をするためにも、貪欲に探していかないとだね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)