模写修行メディア

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

95%OFFセール中4/8の15:15まで

弊社メンバーで作ったUdemy教材がセール中です!

  • Web制作会社が教えるFigmaからのコーディング50本ノック
95%OFFで購入する

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

基礎学習後に迷子になっていませんか?脱初心者したいなら、私たちにお任せください!

模写武者くんのアイコン
  • 基礎学習後にやるべきことがわからない...
  • スクール卒だけど実力不足だと感じている...
  • 自分のコードが正しい書き方かわからない...
  • 未経験から1人で転職できる気がしない...
  • 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

受け入れ人数制限あり

詳しく見る

サブスクで入会金・解約金・最低契約期間もなし

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

この記事の目次

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

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

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

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

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;"
        ]
    },
}

基礎学習後...迷子になっていませんか?

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

下記のような、基礎学習後にやるべきことがわからず、迷子状態になっている方に特におすすめです

  • 基礎学習後にやるべきことがわからない...
  • スクール卒だけど実力不足だと感じている...
  • 自分のコードが正しい書き方かわからない...
  • 未経験から1人で転職できる気がしない...
  • 独立するためのノウハウがない...

メンターは、全員が現役のプロです。駆け出しの方やメンターだけをやっている方はいません。

少数精鋭で運営しているため、受け入れ人数に限りがあります。本気でWeb制作業界を目指している方は、ぜひご検討ください。

受け入れ人数制限あり

詳しく見る

サブスクで入会金・解約金・最低契約期間もなし

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(4期目)。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミングなど、幅広くやってます!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しコーダー向けコーディング練習教材