VSCodeを使い始めて、今まで補完機能の存在を知らなかったため備忘録兼ねて投稿します。。。
#機能
Emmet
独自の省略記法でHTML・CSSのコーディングの効率化をサポートしてくれるプラグイン。
以下、「補完内容」で記述をすれば、コードを全て入力せずとも記述が完了する便利機能です。
#設定方法
VSCodeを開いた後、左下の歯車をクリック→「設定」をクリック
検索入力で「emmet」と入力→中段「Emmet Trigger Expansion On Tab」にチェックをつける
#補完内容
| 記号 | 役割 | 記述例 |
|---|---|---|
| # | ID名の指定 | div#idName |
| . | class名の指定 | div.className |
| > | 要素を入れ子にする | div>p |
| + | 要素を同階層に展開する | div+p |
| ^ | 一階層上に展開 | div>p^ul |
| * | 要素を複数展開 | li*3 |
| {} | テキストの挿入 | p{テキスト} |
| $ | 連番をつける | li.item-$*3 |
| ! | HTMLの雛形 | ! |
#おわりに
早速試しましたが、今まで一言一句打っていたのが泣けてくる位、コード打つのが早くなりました。
今回の他にも、ショートカットや知らない効率機能がたくさんありそうなので、どんどん調べて
実装力を鍛えていきます！