スニペット作成で気をつけていること

VScodeのスニペットを設定し始めて、半年が経過しました。

サイト作成で使われるHTML、CSS、JavaScript、およびWordPressを中心に、よく使用されるコードや、実装がやや手間のかかるパーツをまとめてきました。
確認したところ、個人用のスニペットは70個以上蓄積されていました。これを機に、スニペットの作成時に留意しているポイントを整理します。

prefixに関連キーワードを含める:

prefixはコードを呼び出すためのショートカットで、任意の文字列を設定できます。覚えるのは難しいため、キーワードを含めるようにしました。
具体的には画像系のスタイルの場合は「img」をprefixに含め、中央寄せ系のスタイルは「center」を含めるなど、整理しておくと便利です。
これにより、「center」を入力するだけで中央寄せ系のスタイルが提案され、記憶の負担が軽減されます。

言語名を含める
パーツによってはHTMLとCSSがセットで必要な場合があります。
例えば、セクションの背景に画像を敷く場合、「img-background-html」「img-background-css」といった形で命名することで、HTMLとCSSの対応がわかるようにします。
言語名を組み込むことで、どの言語のスニペットか一目で分かり、開発の効率向上になると思います。

ちょっとした工夫ですが、スニペットの活用により、実装が効率的になるだけでなく、コードの品質向上も期待できます。
これからも効果的なコーディングを目指し、精進していきます。