VSCode+Emmet記法で爆速コーディング

VSCode
スポンサーリンク

Emmet記法というのはHTMLやCSSを省略記法で簡単に記述できるという便利な記法。簡単にいうとショートカットキーを打ってEnterするとその場で勝手にコードが展開されるというもの。これでタイプ数の削減が期待できてコーディング時間もかなり削減できるはず。なおVSCodeは初期状態でEmmetが使える。

index.htmlのひな型

まずはよく使う、index.htmlのひな型の例。
「!」と打って…

Enterを押すと…11行分のコードが勝手に展開される。必要に応じてtitle等を書き換えるだけ。

リスト

次にリスト。li要素を5個作りたいとする。
ならば「ul>li*5」と打って…

Enterを押すと…。ul内にli要素が5個生成された。

CSS読み込み

head内でCSSを読み込みたい?
それなら「link:css」と打って…

Enterを押すと…。link rel=””のタグが生成された。あとはcss名を編集するだけ。

scriptの読み込み

body下方でscript(js)を読み込みたい?
それなら「script:src」と打って…

Enterを押すと…。<script src=””>のタグが生成された。あとはファイル名を指定するだけ。

10秒でindex.htmlができあがり。今回はサンプルだけだったけど、もう少し掘り下げて本格的に使ってみるとおもしろそう。

タイトルとURLをコピーしました