VSCodeでユーザースニペットを登録する方法

VSCodeでユーザースニペットを登録する方法を紹介します。

ユーザースニペットとは？

ユーザースニペットは、よく使うコードを予め登録し、すぐに呼び出せる機能です。

例えば、下記はgcと打つとgridで上下左右中央配置するためのコードを呼び出せるように設定しています。

ユーザースニペットの登録方法

• 公式サイト：Snippets in Visual Studio Code

Step1

スニペットの構造をクリック

『スニペットの構造』をクリックすると検索窓に飛びます。そこで設定したい言語を入力し、jsonファイルを開きます。(例えば、html.jsonなど)

Step2

スニペットの定義

開いたjsonファイルに下記のルールで、スニペットの定義をします。

{
    "スニペットの名前": {
        "prefix": "呼び出すためのコード",
        "body": [
            "呼び出すコード(1行目)",
            "呼び出すコード(2行目)",
            ...
        ],
        "description": "スニペットの説明"
    },
    ...
}
※ descriptionは任意

スニペットの例

{
    "img": {
        "prefix": "img",
        "body": ["<img src='$1' width='$2' height='$3' alt='$4' decoding='async' />"]
    },
    "sample text": {
        "prefix": "st",
        "body": ["親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）"]
    }
}

上記は、VSCodeのhtmlファイル上でimgと入力すると、下記が呼び出されることになります。

<img src='カーソルの位置はここ' width='' height='' alt='' decoding='async' />

定義に$1,$2,…を入れると、呼び出した時にカーソルが$1の位置になります。そして何かを入力してtabキーを押すと$2の位置に移動し、さらに入力してtabキーを押すと$3に移動…となります。

また、下記のように\tを入れると、その位置にタブスペースが入ります。

"Media Querie": {
    "prefix": "mq",
    "body": [
        "@include g.mq() {",
        "\t$1",
        "}"
    ]
}

おすすめの設定

これだけは、入れておいた方が良いものを紹介しまし。

html.json

{
    "img": {
        "prefix": "img",
        "body": ["<img src='$1' width='$2' height='$3' alt='$4' decoding='async' />"]
    },
    "sample text": {
        "prefix": "st",
        "body": ["親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）"]
    },
}

css.json

{
    "Media Query": {
        "prefix": "mq",
        "body": ["@media (min-width: 768px) {", "\t$1", "}"]
    },
    "Media Query Hover": {
        "prefix": "mh",
        "body": ["@media (any-hover: hover) {", "\t&:hover{", "\t\t$1", "\t}", "}"]
    },
    "Background Image Icon": {
        "prefix": "bgii",
        "body": [
            "background-image: url('../img/$1');",
            "background-size: contain;",
            "background-repeat: no-repeat;",
            "background-position: center;"
        ]
    },
    "Background Image": {
        "prefix": "bgi",
        "body": [
            "background-image: url(../img/$1);",
            "background-size: cover;",
            "background-position: center;"
        ]
    },
    "Grid Center": {
        "prefix": "gc",
        "body": [
            "display: grid;",
            "place-items: center;"
        ]
    },
}

カラクリ無しの完全無料！あなた専属のメンターが付く？