はじめに
皆さんは、VSCodeの超便利機能「ユーザースニペット」をご存知でしょうか?
この機能を使えるようになるだけで、皆さんの作業が何倍もラクちんになるかもしれません!
興味がある方はぜひこの機会に!
ユーザースニペットとは、
簡単にいうとショートカット機能です!
ショートカット機能なら今までも使ってきてるよ
なんて思うかもしれませんが、ユーザースニペットでは、
自分で好きなショートカットを作れてしまいます!![:clap: :clap:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44f.png)
![:clap_tone1: :clap_tone1:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44f-1f3fb.png)
![:clap_tone2: :clap_tone2:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44f-1f3fc.png)
![:clap_tone3: :clap_tone3:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44f-1f3fd.png)
![:clap_tone4: :clap_tone4:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44f-1f3fe.png)
![:clap_tone5: :clap_tone5:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44f-1f3ff.png)
わくわくしますよね!
前置きが少し長くなってしまったので、そろそろ本題に移りますね!
ユーザースニペットの作成方法
1.VSCodeを起動します
2.画面左下の歯車アイコンを選択
3.ユーザー スニペットの構成を選択
4.自分がエメットの作りたい言語を選択(ここではhtmlを選択していきます)
このような画面がでます!
5.ここに記述していきます
例えばこんな感じに
6.完成です!!
「!」を押したときに色々出てくるやつを自分風にアレンジしました!
7.使う!
先ほど自作したスニペットの呼び出すときのショートカットを入力
左側に☐があるものを選択
たったこれだけの手順で、これだけ多くのコードをかけちゃいました。
これなら、いちいちcssのリンクを張る必要もなくてとってもラクちんになりましたね
まだまだ紹介できていない部分があるので、詳しくはこちらの記事を参考にしてみてください。
\tや${}の記述方法
https://blanche-toile.com/web/vscode-snippets
自作スニペットを既存スニペットよりも上に
https://tech-1natsu.hatenablog.com/entry/2018/01/05/232731
まとめ
今回は、ユーザースニペットの作成から使用方法までを紹介しました!
かなりおすすめな機能なので、たくさん使ってみてください
最後まで見てくれてありがとうございました!!![:bow: :bow:](https://cdn.qiita.com/emoji/twemoji/unicode/1f647.png)
![:bow_tone1: :bow_tone1:](https://cdn.qiita.com/emoji/twemoji/unicode/1f647-1f3fb.png)
![:bow_tone2: :bow_tone2:](https://cdn.qiita.com/emoji/twemoji/unicode/1f647-1f3fc.png)
![:bow_tone3: :bow_tone3:](https://cdn.qiita.com/emoji/twemoji/unicode/1f647-1f3fd.png)
![:bow_tone4: :bow_tone4:](https://cdn.qiita.com/emoji/twemoji/unicode/1f647-1f3fe.png)