【コーディング効率化】Web制作者のVScodeスニペットのススメ

"スニペットの名前": {
    "prefix": ["スニペットを呼び出すトリガー"],
    "body": [
        "呼び出されるスニペットの内容"
        ],
    "description": "スニペットの説明文"
    }

    "calss=\"class\""

<p class="test">
    hello world
</p>

"HelloWorld": {
    "prefix": ["hello","h-w"],
    "body": [
        "<p class=\"test\">",
        "    hello world",
        "</p>"
    ],
    "description": "HelloWorldを出力する"
}

${key: value}

${1:オラは ${2:野原} ${3:しんのすけ} ダゾ。}

${key |value1,value2,value3|}

"selectMediaQuery": {
    "prefix": "@media",
    "body": [
        "@media(${1|min,max|}-width:${2|1024,768,480,375|}px){",
        "$3",
        "};"
    ],
    "description": "メディアクエリの指定"
}

"blockCommentHedding": {
    "prefix": "//",
    "body": [
        "$BLOCK_COMMENT_START ========================",
        "   $1",
        "======================== $BLOCK_COMMENT_END"
    ],
    "description": "複数行コメントアウト見出し (大)"
},

/* ========================

======================== */

"lineCommentHedding": {
    "prefix": "//",
    "body": [
        "$LINE_COMMENT ========================",
        "$LINE_COMMENT  $1",
        "$LINE_COMMENT ========================"
    ],
    "description": "1行コメントアウト見出し (大)"
}

// ========================
//
// ========================

"blockCommentHedding": {
    "prefix": "//1",
    "body": [
    "$BLOCK_COMMENT_START ========================",
    "   $1",
    "======================== $BLOCK_COMMENT_END"
    ],
    "description": "複数行コメントアウト見出し (大)"
},

"commentWrap": {
    "prefix": "//sd",
    "body": [
    "$BLOCK_COMMENT_START [ここから] $CLIPBOARD $BLOCK_COMMENT_END",
    "$TM_SELECTED_TEXT",
    "$BLOCK_COMMENT_START [ここまで] $CLIPBOARD $BLOCK_COMMENT_END"
    ],
    "description": "選択した部分をstartとend付きのコメントアウトで包む"
},

"btnTrigger": {
  "prefix": "cbtntrigger",
  "body": [
    "<!-- HTML ハンバーガーメニュー -->",
    "<div class=\"${1:btn-trigger}\" id=\"${2:btnTrigger}\">",
    "    <span></span>",
    "    <span></span>",
    "    <span></span>",
    "</div>",
    "",
    "/* CSS ハンバーガーメニュー ==========================*/",
    ".${1:btn-trigger} {",
    "    position: relative;",
    "    width: 50px;",
    "    height: 44px;",
    "    cursor: pointer;",
    "    display: inline-block;",
    "    transition: all 0.5s;",
    "    box-sizing: border-box;",
    "    span {",
    "        position: absolute;",
    "        left: 0;",
    "        width: 100%;",
    "        height: 4px;",
    "        background-color: #fff;",
    "        border-radius: 4px;",
    "        display: inline-block;",
    "        transition: all 0.5s;",
    "        box-sizing: border-box;",
    "        &:nth-of-type(1) {",
    "            top: 0;",
    "        }",
    "        &:nth-of-type(2) {",
    "            top: 20px;",
    "        }",
    "        &:nth-of-type(3) {",
    "            bottom: 0;",
    "        }",
    "    }",
    "}",
    "",
    "#${2:btnTrigger}.is-active span{",
    "    &:nth-of-type(1) {",
    "        -webkit-transform: translateY(20px) rotate(-315deg);",
    "        transform: translateY(20px) rotate(-315deg);",
    "    }",
    "    &:nth-of-type(2) {",
    "        opacity: 0;",
    "    }",
    "    &:nth-of-type(3) {",
    "        -webkit-transform: translateY(-20px) rotate(315deg);",
    "        transform: translateY(-20px) rotate(315deg);",
    "    }",
    "}",
    "",
    "#${2:btnTrigger}.active span{",
    "    &:nth-of-type(1) {",
    "        -webkit-transform: translateY(20px) rotate(-315deg);",
    "        transform: translateY(20px) rotate(-315deg);",
    "    }",
    "    &:nth-of-type(2) {",
    "        opacity: 0;",
    "    }",
    "    &:nth-of-type(3) {",
    "        -webkit-transform: translateY(-20px) rotate(315deg);",
    "        transform: translateY(-20px) rotate(315deg);",
    "    }",
    "}",
    "",
    "",
    "",
    "",
    "/* JQuery ハンバーガーメニュー ==========================*/",
    "$(function () {",
    "    $('#${2:btnTrigger}').on('click', function () {",
    "        $(this).toggleClass('is-active');",
    "        return false;",
    "    });",
    "});"
  ],
  "description": "btnTrigger"
}

"wrapDivInnner": {
    "prefix": "lwrap",
    "body": [
        "<div class=\"l-${1|inner,wrapper|}\">",
            "${2:$TM_SELECTED_TEXT}",
        "</div>"
    ]
},

"youtubeWrapper": {
    "prefix": "youtube",
    "body": [
      "<!-- ユーチューブのサイズ変更用のwrapper -->",
      "<div class=\"youtube_wrapper\">",
      "    <!-- [ここから]ユーチューブ本体 -->",
      "",
      "    <!-- [ここまで]ユーチューブ本体 -->",
      "</div>",
      "",
      "// 埋め込みYouTube ===========================",
      ".youtube_wrapper {",
      "    margin: 0 auto;",
      "    position: relative;",
      "    padding-top: 56.25%;",
      "    width: 70%;",
      "    .iframe_youtube {",
      "        position: absolute;",
      "        top: 0;",
      "        left: 0;",
      "        border: none;",
      "        width: 100%;",
      "        height: 100%;",
      "    }",
      "}",
      ""
    ],
    "description": "youtube　の埋め込み"
  },

"slickSlider": {
    "prefix": "slick",
    "body": [
        "<ul class=\"$1-slider\">",
            "<li class=\"$1-slider__item\"><img alt=\"\" src=\"$2\" /></li>",
        "</ul>",
        "$('.$1-slider').slick({ //{}を入れる",
            "autoplay: true, //「オプション名: 値」の形式で書く",
            "autoplaySpeed: 7000, // 自動再生のスライド切り替えの時間を設定",
            "dots: true, //複数書く場合は「,」でつなぐ",
            "arrows: false, // 左右の矢印を表示",
            "infinite: true,　　　　//スライドのループ",
            "pauseOnHover: false, //ホバーしたときにスライドを一時停止しない　",
            "fade: true,",
            "dotsClass: '$1-slider-indicator' // ドットのクラス名を変更",
        "});"
    ],
    "description": "slick sliderの雛形 html + js"
},

"scriptJQuery": {
    "prefix": "jq",
    "body": [
        "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.minjs\"></script>",
    ],
    "description": "JQuery読み込み"
},

"bootStrapCDN": {
    "prefix": "link",
    "body": [
    "<!-- Bootstrap CSS -->",
    iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">"
    ],
    "description": "Bootstrap読み込み"
}

"vueJsCDN": {
    "prefix": "cdnvue",
    "body": [
        "<!-- 開発バージョン、便利なコンソールの警告が含まれています -->",
        "<script src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"></script>"
    ],
    "description": "Vue.jsのCDN 読み込み"
}

"fonfAwsomeCDN": {
    "prefix": "link",
    "body": [
        "<!-- Font awesome CDN -->",
        "<link href=\"https://use.fontawesome.com/releases/v5.6.1/css/all.css\"rel=\"stylesheet\">"
    ],
    "description": "Font awesome CDN 読み込み"
}

"slickSliderCDN": {
  "prefix": "cdnslick",
  "body": [
    "<!-- slick CDN CSS -->",
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css\">",
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css\">",
    "<!-- slick CDN JS -->",
    "<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js\"></script>"
  ],
  "description": "slickSliderCDN"
}

"getField": {
    "prefix": "wpgetfield",
    "body": [
        "<!-- [START]$1 -->",
        "<?php if (get_field('$2')) : ?>",
        "<?php the_field('$2'); ?>",
        "<?php endif; ?>",
        "<!-- [END]$1 -->"
    ],
    "description": "カスタム投稿の取得と出力"
},

    "makeSnipet": {
        "prefix": "snipet",
        "body": [
            "\"${1:snipetName}\": {",
            "\"prefix\": \"${2:snipetTrigger}\",",
            "\"body\": [",
            "        \"$TM_SELECTED_TEXT\"",
            "],",
            "\"description\": \"${3:スニペットの説明（日本語ok）}\"",
            "}"
        ],
        "description": "選択中のテキストをスニペットに格納する"
    },

    "importVarMixin": {
        "prefix": "@import",
        "body": [
          "@import \"_variables\";",
          "@import \"_mixin\";"
        ],
        "description": "変数とmixinのファイルをインポート"
      }

  "emptyPseudoelement": {
        "prefix": "&::",
        "body": [
          "    &::${1|before,after|}{",
          "        content: \"\";",
          "        position: absolute;",
          "    }"
        ],
        "description": "空の疑似要素"
      },

    "colorSns": {
        "prefix": "sns",
        "body": [
            "\\$colorSnsTwitter: #1da1f2;",
            "\\$colorSnsLine: #00b900;",
            "\\$colorSnsFaceBook: #1877f2;",
            "\\$colorSnsYouyTube: #da1725;",
            "\\$colorSnsTwitch: #6441a4;"
        ],
        "description": "SNSのカラーコード変数"
    }

      "materialBoxShadow": {
        "prefix": "$box-shadow",
        "body": [
          "// Googleのbox-shadow",
          "boxShadowGoogle1: 0 2px 5px rgba(0,0,0,0.26)",
          "boxShadowGoogle2: 0 2px 10px rgba(0,0,0,.2)",
          "",
          "// TopCoderのbox-shadow",
          "boxShadowTopCoder: 0 1px 6px rgba(0,0,0,.2);",
          "",
          "// Feedly のbox-shadow",
          "boxShadowFeedly1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);",
          "boxShadowFeedly2: 0 10px 20px rgba(0,0,0,0.12), 0 6px 6px rgba(0,0,0,0.16);",
          "",
          "// Z-levels",
          ".z-depth-0 {",
          "  box-shadow: none !important;",
          "}",
          ".z-depth-1{",
          "  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);",
          "}",
          ".z-depth-1-half{",
          "  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);",
          "}",
          ".z-depth-2{",
          "  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);",
          "}",
          ".z-depth-3{",
          "  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);",
          "}",
          ".z-depth-4{",
          "  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);",
          "}",
          ".z-depth-5{",
          "  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);",
          "}"
        ],
        "description": "マテリアルデザインのbox-shadow"
      }

    "varFontFamiry": {
        "prefix": "\\$fontfamiry",
        "body": [
            "\\$fontFamilyYuGo: \"游ゴシック体\", \"YuGothic\", \"游ゴシック\", \"Yu Gothic\", \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", \"Meiryo\", sans-serif;",
            "\\$fontFamilyHiraGo: \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", \"Meiryo\", sans-serif;",
            "\\$fontFamilyYuMin: \"游明朝\", \"YuMincho\", \"ヒラギノ明朝 Pro W3\", \"Hiragino Mincho Pro\", \"ＭＳ Ｐ明朝\", \"MS PMincho\", serif;",
            "\\$fontFamilyHiraMin: \"ヒラギノ明朝 Pro W3\", \"Hiragino Mincho Pro\", \"ＭＳ Ｐ明朝\", \"MS PMincho\", serif;",
            "\\$fontFamilyMeiryo: \"メイリオ\", \"Meiryo\", \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"ＭＳ Ｐゴシック\", sans-serif;",
            "\\$fontFamilyArial: Arial,Helvetica,Verdana,Hiragino Kaku Gothic ProN,-apple-system,BlinkMacSystemFont,メイリオ,MS PGothic,sans-serif;"
        ],
        "description": "よく使うfont-familyの変数"
    },

    "notFirstChildMarginTop": {
        "prefix": "&:not(:first-child){",
        "body": [
            "&:not(:first-child){",
            "margin-top: ${1:10px};",
            "}"
        ],
        "description": "not(:first-child)にmargin-top"
    }

    "allBoxSizingBorderBox": {
        "prefix": "boxsizing",
        "body": [
            "* {",
            "box-sizing: border-box;",
            "}"
        ],
        "description": "pddingの分を中に狭めるCSS"
    }

    "centerY": {
        "prefix": "cy",
        "body": [
            "position: ${1|absolute,relative|};",
            "top: 50%;",
            "transform: translateY(-50%);"
        ],
        "description": "positionを用いた 縦方向の中央寄せ"
    },

    "centerX": {
        "prefix": "cx",
        "body": [
            "position: ${1|absolute,relative|};",
            "left: 50%;",
            "transform: translateX(-50%);"
        ],
        "description": "positionを用いた 横方向の中央寄せ"
    },

    "positionXYCenter": {
        "prefix": "cxy",
        "body": [
            "position: ${1|absolute,relative|};",
            "left: 50%;",
            "top: 50%;",
            "transform: translate(-50%, -50%);"
        ],
        "description": "positionを用いた 上下 左右 中央寄せ"
    },

    "flexCenter": {
        "prefix": "cxy",
        "body": [
            "display: flex;",
            "justify-content: center;",
            "align-items: center;"
        ],
        "description": "flexを用いた 上下 左右 中央寄せ"
    }

    "gridXYCenter": {
        "prefix": "cxy",
        "body": [
            "display: grid;",
            "place-items: center;"
        ],
        "description": "gridを用いた 上下 左右 中央寄せ"
    },

    "3cardWidth": {
        "prefix": "width: calc;",
        "body": [
            "width: calc((100% - ($1px * 2))/ 3 - 1px);"
        ],
        "description": "横並び３枚のカードの幅"
    }

    "displayFlexSpaceBetween": {
        "prefix": "disfleb",
        "body": [
          "display: flex;",
          "justify-content: space-between;"
        ],
        "description": "displayFlex, SpaceBetween"
      },

  "buttonReset": {
        "prefix": ".btn",
        "body": [
          ".btn {",
          "    display: inline-block;",
          "    padding: 0.6em 2em;",
          "    margin: 0 0 1em;",
          "    background-image: none;",
          "    background-color: #4caf50;",
          "    color: #fff;",
          "    text-decoration: none;",
          "    border: none;",
          "    border-radius: 0;",
          "    cursor: pointer;",
          "    -webkit-appearance: none;",
          "    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);",
          "    position: relative;",
          "}",
          ".btn:hover .btn:focus {",
          "    outline: none;",
          "}",
          ".btn::-moz-foucus-inner {",
          "    padding: 0;",
          "    border: none;",
          "}"
        ],
        "description": "ボタンのリセットCSS"
      }

"selectMediaQuery": {
    "prefix": "@media",
    "body": [
        "@media(${1|min,max|}-width:${2|1024,768,480,375|}px){",
        "$3",
        "};"
    ],
    "description": "メディアクエリの指定"
}

    "hoverOpacity": {
      "prefix": "&:hover",
      "body": [
        "opacity: 1;",
        "transition: opacity 1{1:0.5s};",
        "&:hover {",
        "  opacity: 2{2:0.7};",
        "}"
      ],
      "description": "hoverで 透過させる"
    }

 "hoverScale": {
    "prefix": "&:hover-scale",
    "body": [
      "transition: scale 0.5s;",
      "&:hover {",
      "    transform: scale(1.2);",
      "}"
    ],
    "description": "hoverで拡大"
   }

"hovertranslateY": {
  "prefix": "&:hover-translateY",
  "body": [
    "transition: all 0.5s;",
    "&:hover {",
    "    transform: translateY(-${1:5px});",
    "    box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);",
    "}"
  ],
  "description": "hovertranslateY"
}

    "comentOut1": {
        "prefix": "//1",
        "body": [
            "/* =============================================",
            " $1",
            "============================================= */"
        ],
        "description": "大見出し（コンパイル後残る）"
    },

    "comentOut2": {
        "prefix": "//2",
        "body": [
            "/* $1",
            "// ====================================================*"
        ],
        "description": "中見出し（コンパイル後残る）"
    },

    "comentOut1l": {
        "prefix": "//1",
        "body": [
            "// =============================================",
            "// $1",
            "// ============================================="
        ],
        "description": "大見出し（コンパイル後残らない）"
    }

    "comentOut2l": {
        "prefix": "//2",
        "body": [
            "// $1",
            "// ===================================================="
        ],
        "description": "中見出し（コンパイル後残らない）"
    },