あらかじめ登録していたコードを、省略したキーワードにEnterやTabで展開し、
自動変換する機能です。

Emmetを使っている方は、それを自分で作成できる、と思ってもらえばイメージしやすいでしょう。

Alfredなどあらゆるツールで管理することも出来ますが、VS Codeにもデフォルトでスニペットの機能があります。

以下でスニペットを登録するファイルを開きます
ユーザー名.code-snippetsは利用する言語を複数設定できるので、私はcss、Sassで共通の記述を登録しています。

言語名.jsonは、その言語のスニペットを管理できます。

歯車→User Snippet→user.code-snippets or ****.json

"media query 600px〜959px": {
    "scope": "css,scss",
    "prefix": "mqt",
    "body": [
        " @media screen and (min-width: 600px) and (max-width: 959px) {",
        "\t$1",
        "}",
    ],
    "description": "media query 600px〜959px"
},

scope: 利用する言語を設定します
prefix: 展開するためのキーワードを設定します。2~3文字程度で、覚えやすいのがよいでしょう
body: 展開するコードを書きます。記述の仕方については詳しく後述します。
description: このスニペットの説明を書きます

\t: タブを挿入します。複数行に渡る場合、インデントを調整するのに主に使うでしょう。
$1: 展開した際にこの部分にカーソルが移動します。上記の例でいえばすぐにメディアクエリの中を記述できます。

"body": [
    "font-size: $1px;",
    "line-height: $2;",
    "letter-spacing: $3;"
],

また、複数の番号を使えば、タブでカーソルを順番に移動することも可能です。

${1:hoge}の用に初期値も設定できます。

こちらで簡単に作成することも可能です
https://migi.me/vsc_snippet/
 

スニペットに登録をおすすめするものは頻繁に記述するものや、
たまに書くけど忘れがちで毎回検索しているようなものがいいでしょう。


0 autoからtopやbottomを調整して利用することが多いです。

"margin 0 auto": {
    "scope": "css,scss",
    "prefix": "ma0",
    "body": [
        "margin: 0 auto;",
    ],
    "description": "margin 0 auto"
},

margin: 0 auto;


よく使うflexの型を一式入れておいて必要において変更・削除します。wrapは消すことも多いですね。

"flex wrap justy": {
    "scope": "css,scss",
    "prefix": "fle",
    "body": [
        "display: flex;",
        "flex-wrap: wrap;",
        "justify-content: space-between;"
    ],
    "description": "flex 等間隔"
},

display: flex;
flex-wrap: wrap;
justify-content: space-between;


flexを利用した正中配置です。

"flex 正中": {
    "scope": "css,scss",
    "prefix": "flej",
    "body": [
        "display: flex;",
        "justify-content: center;",
        "align-items: center;",
    ],
    "description": "flex 正中"
},

display: flex;
justify-content: center;
align-items: center;


backgroundはそのまま記述すると結構長いので展開してしまいます。

"background": {
    "scope": "css,scss",
    "prefix": "bac",
    "body": [
        "background: transparent url(/assets/images/$1) $2repeat top center / ${3:100%};",
    ],
    "description": "background"
},

background: transparent url(/assets/images/) repeat top center / 100%;


positionを利用した正中です。

"position 正中1": {
    "scope": "css,scss",
    "prefix": "pos",
    "body": [
        "position: absolute;",
        "top: 50%;",
        "left: 50%;",
        "transform: translate(-50%,-50%);",
    ],
    "description": "position 正中"
},

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);


positionを利用した正中ですが、absoluteを書くときはとりあえずこちらを呼ぶ出し、削除・変更して書くことが多いです。

"position 正中2": {
    "scope": "css,scss",
    "prefix": "poa",
    "body": [
        "position: absolute;",
        "top: 0;",
        "left: 0;",
        "right: 0;",
        "bottom: 0;",
        "margin: auto;",
    ],
    "description": "position 正中"
},

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;


gridを利用した正中配置です、最近はこちらを利用することが多いです。

"grc": {
    "scope": "css,scss",
    "prefix": "grc",
    "body": [
        "display: grid;",
        "place-items: center;",
    ],
    "description": "垂直正中"
},

display: grid;
place-items: center;


テキストのこのセットは多用するし、line-height、letter-spacingを忘れないためにも登録しています。

"テキストセット": {
    "scope": "css,scss",
    "prefix": "fon",
    "body": [
        "font-size: $1px;",
        "line-height: $2;",
        "letter-spacing: $3;"
    ],
    "description": "テキストセット"
},

font-size: px;
line-height: ;
letter-spacing: ;


意外と利用します。

"疑似content": {
    "scope": "css,scss",
    "prefix": "con",
    "body": [
        "display: block;",
        "content: \"\";",
    ],
    "description": "content: \"\";"
},

display: block;
content: "";


たまにしか利用しないので結構書き方を忘れてしまうので登録しています。

"not": {
    "scope": "css,scss",
    "prefix": "not",
    "body": [
        ":not(:last-child) ",
    ],
    "description": "not"
}

:not(:last-child)