ユーザースニペット生成サイトの使い方

はじめまして。あきぞーと申します。
noteは初投稿になります。

１．はじめに

この note は、僕が作成したVSCode用の
「ユーザースニペット生成サイト 使い方 note 」になります。

サイトのURLはこちら。
GitHub Pagesを使っています。
https://akizo110.github.io/user-snippet-generator/

画面はこんな感じ。

MilligramというCSS FWを使用しています。
デザインセンスがなさすぎて辛いですね（涙）

２．スニペット登録の重要性と面倒な点

VSCodeのユーザースニペットは便利です。

コーディングが加速します。

コードのストック場所にもなります。

定期的にメンテナンスすることで、忘れていたコードを思い出す効果もあります。

ただ、登録が少し面倒なんですよね。
特に、HTML。

コードが複数行だったり、ダブルクォーテーションが含まれていると、登録が途端に面倒になります。

例えば、以下のようなフッターがあるとします。

    <footer>
       <p class="copyright">©️ 2020 Akizo.</p>
   </footer>

これをスニペットとして登録する場合、このように加工する必要があります。

"copyright": {
	"prefix": "footer",
	"description": "簡易フッター",
	"body": [
		"<footer>",
		"\t<p class=\"copyright\">©️ 2020 Akizo.</p>",
		"</footer>"
	]
},

jsonなので、初心者には取っつきづらい・・・。
初心者じゃなくとも、配列化・エスケープ・インデントの調整・・・。

めんどくせぇ・・・！

でもでも、スニペットを増やせば、コーディング速度は上がります。

コードの理解も高まります。

スニペットを増やして、エディタを育てる。
この感覚は非常に大切です。

僕が出会った職人的に強いエンジニアの皆さまは、例外なくエディタをカスタマイズして育てていました。（VSCodeではなく、VimやEmacsといった変態エディタでしたが・・・。）

スニペット登録が簡単にできるツールがあったら便利なんだけどなぁ・・・。

ネットを探したけど見つからない。
プラグインも埋もれてて、見つからない。

なければ自分で作ればいい！
ということで、作成しました。

プラグインで作れればかっこいいのですが、そんな技術力はない！笑

なので、Webで作ることにしました！
利用するのが少し面倒ですが・・・。

処理は単純なので、すぐに完成しました。

３．ユーザースニペットをはじめて登録する方へ

ユーザースニペット機能を使ったことがない方は、はにわまんさんの記事を参考に、何か一つスニペットを登録してみてください。

VSCodeにコードスニペットを登録して効率的にコーディング！ | HPcode

そして、登録が面倒だと感じた方は、僕のサイトを利用してみてください。

４．使い方

使い方を説明していきます。
といっても、あまり説明することはないです。

サイトURL：https://akizo110.github.io/user-snippet-generator/
推奨ブラウザ：Google Chrome

1. 必要項目を入力し、生成ボタンを押する。

2. スニペットが出力される。
　 クリップボードに自動的にコピーされる。
　 ブラウザによっては手動コピーが必要。

3. VSCodeのユーザースニペットを開き、ペーストする。

以上

各入力項目について簡単に説明します。

名前：必須：4０文字以内
スニペット名。
ほぼ使われない。
ただし、登録先ファイルに同じ名前のものがあるとダメ。
日本語可。

キーワード：必須：4０文字以内
スニペットを呼び出す際のキーワード。
内部的にはprefix（接頭辞）。
同一系統のスニペットは、同一キーワードで呼べると便利。（※補足参照）
日本語不可。

説明：任意：５０文字以内
スニペットの説明。
呼び出す際に右側に表示される。
登録がない場合、名前が代わりに表示される。
日本語可。

インデント：必須：選択式
デフォルトは「スペース２つ」。
コードのインデントに合わせて選択する。

コード：必須
スニペットにしたいコードをペーストする。
行頭スペース（ゴミ）の調整は不要。

生成ボタン：
必須項目を全て入力したら押す。

以上

補足：キーワードについて

キーワードとは、入力候補を呼び出す際のトリガーとなるワードです。

「dom-get-id」などと登録しておくと、「dom」と打ち込んだ時点で登録したスニペットが補完候補に挙がってきます。

また、ハイフンで区切ることでファジー検索に対応します。
例えば「dom-get-class」と登録しておけば、「dgc」と入力すれば候補に挙がってきます。

スニペットを登録する際には、キーワードの選定が重要になります。

おすすめの方法は「同一系統のスニペットは、同じ接頭辞をつけて登録する」です。

例えば、jQueryに関するスニペットであれば、全て「jquery-」始まるようにキーワードを設定します。

良い例
jquery-click
jquery-addclass

悪い例
addclass-jquery
click-jquery

悪い例だと、コーディング中に脳のリソースを使います。
キーワードが分散していると、どのキーワードでスニペットを呼び出せるのか忘れてしまうからです。

良い例では、最悪「jquery」だけ覚えておけば何らかのメソッドを候補に呼び出せます。

「jqueryのメソッドを使いたい！」となったときに、ひとまず「jq」と打てばよいのです。

そこから適するメソッドを選択する、といったことも可能となります。

キーワードをまとめることで、覚えることを最小限にとどめましょう。

トリガーワードがprefix（接頭辞）というプロパティ名なのはこのためなのかな。知らないけど。

以上です。

上級者向け

公式ドキュメント：https://code.visualstudio.com/docs/editor/userdefinedsnippets

色々と機能がありますね。