3
2

VScodeの便利技紹介!

Last updated at Posted at 2024-05-29

今回は、私自身が普段VScodeを使っている際に活用している便利な技をご紹介します!

1.HTML5のひな型を入力する方法

qiita.png image.png
 上記画像のように「html」と入力すると右下に表示される「html:5」を選択。または、「!」を入力し、右下に表示される「!」を選択することで以下のようにHTML5のひな型を一気に入力することができます。
image.png

 ちなみに「html lang="ja"」の部分ですが、デフォルトが"en"となっております。
 この部分の設定については、「ファイル」>「ユーザー設定」>「設定」
image.png
「Emmet.Variables」を検索し、「lang」の部分を「ja」に変更が可能です。
※小文字でも検索可能です
image.png

2.classやidを設定した状態で入力する方法

image.png
 入力したいタグの後ろにclassの場合は「.class名」、idの場合は「#id名」と記載することで、それぞれ名前をつけた状態で入力することができます。

3.入れ子構造で入力する方法

 image.png
 タグ>タグにすることで左側に書いたタグの中に右側のタグを入れ込んだ状態で入力することができます。

4.複数のタグを同時に入力する方法

image.png
 タグ*nと「n」に入力した数字の数だけ同時に入力することができます。


 今回ご紹介したのはVScodeで最初から使うことができる「Emmet」というプラグインを使った省略記法になります。紹介したもの以外にもまだまだありますので、ご興味がある方は是非ご自身で探してみてください。活用することでコーディングの時間を短縮できると思います!

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2