VSCodeのユーザースニペットまとめ

訳あってVisual Studio Code（以下、VSCode）のユーザースニペットが空っぽになってしまったので、備忘録も兼ねてまとめました。

HTML

<img>の属性をたくさん

"body": [
	"<img src=\"$1\" alt=\"\" width=\"$2\" height=\"$3\" loading=\"lazy\">"
],

最低限必要な属性はまとめて入れたい。

WebP非対応に対応したい時

"body": [
	"<picture>",
	"\t<source type=\"image/webp\" media=\"(${1|min,max|}-width: $2px)\" srcset=\"$TM_SELECTED_TEXT/$CLIPBOARD-sp.webp\">",
	"\t<source type=\"image/webp\" srcset=\"$TM_SELECTED_TEXT/$CLIPBOARD.webp\">",
	"\t<source media=\"(${1|min,max|}-width: $2px)\" srcset=\"$TM_SELECTED_TEXT/$CLIPBOARD-sp@2x.jpg 2x, ./$TM_SELECTED_TEXT/$CLIPBOARD-sp@3x.jpg 3x\" width=\"\" height=\"\">",
	"\t<img src=\"$TM_SELECTED_TEXT/$CLIPBOARD.jpg\" srcset=\"$TM_SELECTED_TEXT/$CLIPBOARD.jpg 1x, ./$TM_SELECTED_TEXT/$CLIPBOARD@2x.jpg 2x\" alt=\"\" width=\"\" height=\"\"  loading=\"lazy\">",
	"</picture>",
],

ちょっと癖強いかも。
ほぼ同じ形式でpngバージョンも登録した。

よく使うやつ

"body": [
	"aria-haspopup=\"${1:true}\" aria-controls=\"$2\""
],

"body": [
	"aria-expanded=\"${1:false}\" aria-controls=\"$2\""
],

"body": [
	"id=\"$1\" aria-hidden=\"${2:true}\""
],

たまに度忘れしちゃうやつ。
※2024.3.28 aria-haspopupを追加しました。

アコーディオンUI

"body": [
	"<details>",
	"\t<summary>$1</summary>",
	"\t<div class=\"content\">",
	"\t\t<p>$2</p>",
	"\t</div>",
	"</details>",
],

スニペットに入れるからいつまで経っても覚えない。

Splideのマークアップ

"body": [
	"<div class=\"splide\" aria-label=\"$1\">",
	"\t<div class=\"splide__track\">",
	"\t\t<div class=\"splide__list\">",
	"\t\t\t<div class=\"splide__slide\">$2</div>",
	"\t\t</div>",
	"\t</div>",
	"</div>",
],

全部<div>バージョン。

Swiperのマークアップ

"body": [
	"<div class=\"swiper\" aria-label=\"$1\">",
	"\t<div class=\"swiper-wrapper\">",
	"\t\t<div class=\"swiper-slide\">$2</div>",
	"\t</div>",
	"",
	"\t<div class=\"swiper-pagination\"></div>",
	"",
	"\t<div class=\"swiper-button-prev\"></div>",
	"\t<div class=\"swiper-button-next\"></div>",
	"",
	"\t<div class=\"swiper-scrollbar\"></div>",
	"</div>",
],

不要なやつは適宜消して使う。

スタイルシートとJSの読み込み

"body": [
	"<link rel=\"stylesheet\" href=\"$1\">",
	"<script src=\"$2\" defer></script>"
],

もはやただのずぼら。

SEO的なやつ

"body": [
	"<meta name=\"description\" content=\"$1\">",
	"$BLOCK_COMMENT_START Open Graph $BLOCK_COMMENT_END",
	"<meta property=\"og:title\" content=\"$2\">",
	"<meta property=\"og:description\" content=\"$1\">",
	"<meta property=\"og:image\" content=\"$3\">",
	"<meta property=\"og:url\" content=\"$4\">",
	"$BLOCK_COMMENT_START Twitter Cards $BLOCK_COMMENT_END",
	"<meta name=\"twitter:title\" content=\"$2\">",
	"<meta name=\"twitter:description\" content=\"$1\">",
	"<meta name=\"twitter:image\" content=\"$3\">",
	"<meta name=\"twitter:card\" content=\"summary_large_image\">",
	"$BLOCK_COMMENT_START summary / summary_large_image /app / player $BLOCK_COMMENT_END",
],

けっこう大事。

CSS&SCSS

"scope": "css,scss"でまとめて登録してます。

backgroundのショートハンド

"body": [
	"background: ${3:transparent} url(\"$4\") ${6:left} ${7:top} / ${8:cover} ${9:no-repeat};",
],

まとめて記述したいので。

擬似要素::before&::after

"body": [
	"$1::before {",
	"\tcontent: \"$2\";",
	"\t$3",
	"}"
],

"body": [
	"$1::after {",
	"\tcontent: \"$2\";",
	"\t$3",
	"}"
],

contentプロパティ付きが便利。

marginにautoをデフォルトでセット

"body": [
	"margin-inline: ${1:auto};"
],

"body": [
	"margin-block: ${1:auto};"
],

ついでにpadding-inlineとpadding-blockも追加。

hoverスタイル

"body": [
	"${1:a}:focus-visible {",
	"\t$2",
	"}",
	"@media (any-hover: hover) {",
	"\t${1:a}:hover {",
	"\t\t$2",
	"\t}",
	"}",
],

忘れがちな:focus-visibleもセットで。

ブレイクポイントのメディアクエリ

"body": [
	"@media (${1|min,max|}-width: $2px) {",
	"\t$3",
	"}",
],

betweenもあると尚良し。

文字コード

"body": [
	"@charset \"UTF-8\";",
],

たまに綴りミスするので。

PHP

WordPressでよく使うやつを登録してた記憶があるので、思い出したら適宜追加していく予定（未定）