くまだどうも、くまだです。
VSCodeで自分が設定しているユーザースニペットを紹介します。
自分が設定しているユーザースニペット
ユーザースニペットの紹介の前に、そもそもユーザースニペットってなに？という人向けに簡単に説明すると、例えばVSCodeのHTMLファイルで、「.（ドット）+エンター」するとdivタグが出力されるようなもののことです。（厳密にいうとこちらはemmetですが…）
ちなみに「.（ドット）＋エンター」でdivタグが出力されますが、「.（ドット）＋クラス名＋エンター」だとクラス名が付与されたdivタグが出力されます。
そんな感じで使えるスニペットですが、自分でよく使うコードを、自分の好きなキーワードでスニペットをカスタマイズすることができます。
ユーザースニペットの使い方
VSCodeの左下に歯車のアイコンをクリックし、ユーザースニペットの構成を選択します。
するとVSCodeの上部に下記のような表示がでます。
初めてスニペットを作る場合は新しいスニペットで登録したい言語を入力して作成します。
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}すると、jsonファイルが生成されるので、ここにスニペットを入力していきます。
スニペットの記述に関しては、下記のサイトを使って変換して先ほど作成したjsonファイルにコピペします。
例えば、「table」というキーワードでtableタグで使うタグもいっしょに出力させるスニペットを作成する場合は、上記の変換ツールを使って、
「スニペットを作成」をクリックすると下記のように出力されるので、これをjsonファイルにコピペ。
すると、HTMLファイルで「table＋エンター」でtableタグに関わるタグがまとめて出力されます。
便利です。
HTMLのユーザースニペット
tableタグは紹介したのでそれは省きます。
〇 dlタグ
"dl": {
"prefix": "dl",
"body": [
"<dl>",
" <dt></dt>",
" <dd></dd>",
" <dt></dt>",
" <dd></dd>",
" <dt></dt>",
" <dd></dd>",
"</dl>",
],
"description": ""
},〇figureタグ
"figure": {
"prefix": "figure",
"body": [
"<figure>",
" <img src='$1' alt=''>",
" <figcaption></figcaption>",
"</figure>",
],
"description": ""
},〇pictureタグ
"picture": {
"prefix": "pic",
"body": [
"<picture>",
"<source srcset=\"$1\"media=\"(min-width: 768px)\">",
"<img src=\"sp$2\"/>",
"</picture>"
]
},Sassのユーザースニペット
scss.jsonに記述。
〇absolute
"absoluteCenter": {
"prefix": "aba",
"body": [
"position: absolute;",
"top: 50%;",
"left: 50%;",
"transform: translate(-50%, -50%);"
]
},〇 mixinで設定したメディアクエリをinludeで出力
"include_pc": {
"prefix": "ip",
"body": ["@include mq('lg') {", " $1", "}"]
},
"include_tab": {
"prefix": "it",
"body": ["@include mq('md') {", " $1", "}"]
},SassはCSSにコンパイルされて出力されます。
Sassのmixinでメディアクエリを作成しておき、それを@includeで呼び出すイメージです。なので、あらかじめmixinを準備しておく必要がありますが、今回は割愛します。
上記の場合だと、CSSとして自分が設定している状態だと、以下のようになります。
.test {
font-size: 16px;
}
@media screen and (min-width: 768px) {
.test {
font-size: 20px;
}
}
@media screen and (min-width: 992px) {
.test {
font-size: 24px;
}
〇画像縦横比維持
"fitimg": {
"prefix": "fitimg",
"body": [
".fitimg__imgbox {",
" position: relative;",
" width: 100%;",
"}",
".fitimg__imgbox::before {",
" padding-top: calc('height'/'width' *100%);",
" display: block;",
" content: '';",
"}",
".fitimg__imgbox img {",
" position: absolute;",
" top: 50%;",
" left: 50%;",
" transform: translate(-50%, -50%);",
" object-fit: cover;",
" width: 100%;",
" height: 100%;",
" object-position: center;",
"}"
],
"description": ""
}画像の縦横比を維持する記述です。
padding-topのcalcの部分（’height’ / ‘width’)はデザインカンプの画像の高さと横幅を入力します。
padding-top: calc('height'/'width' *100%);を、
padding-top: calc(100 / 280 *100%);みたいな感じです。画像ごとにサイズは違うので、それに合わせます。fitimgクラスは、任意のクラス名に変更します。例えば、HTMLでimgboxというクラス名を使っていたら、次のように使います。
ちょっとでも時短になればいいと思います。
ここまで読んでくださりありがとうございました。