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でよく使うやつを登録してた記憶があるので、思い出したら適宜追加していく予定(未定)
この記事が気に入ったらサポートをしてみませんか?