【vsCode】snippetsで自分独自のショートカットを作成し、爆速コーディング

snippetsの設定

javascriptを設定する

javascriptのショートカット例

  // "メソッド名": {
    // "prefix": "独自のショートカット",
    // "body": "「ショートカット」を打ち込んだ時に補完されるもの"
  // },
  "Query Selector": {  // メソッド名
    "prefix": "qs",   //  独自のショートカット
    "body": "document.querySelector(\"$1\")"  //  「qs」と打ち込んだ時に補完されるもの
  },
  "Query Selector All": {
    "prefix": "qsa",
    "body": "document.querySelectorAll(\"$1\")"
  },
  "Get Element By Id": {
    "prefix": "gebi",
    "body": "document.getElementById(\"$1\")"
  },
  "Add Event Listener": {
    "prefix": "ael",
    "body": "$1.addEventListener(\"${2|click,scroll,change|}\", function(){$3});"
  },
  "Create Element": {
    "prefix": "ce",
    "body": "const $1 = document.createElement(\"$2\");"
  }

テクニックと記入上の注意

ダブルクォーテーションの中のダブルクォーテーション

参考

【CSS】特殊文字コードを使ってバックスラッシュ「 \ 」「 ¥ 」をHTMLで正しく表示させる方法

ドルマーク$

  "Create Element": {
    "prefix": "ce",
    "body": "const $1 = document.createElement(\"$2\");"
  }

｜｜で選択肢を設定

  "Add Event Listener": {
    "prefix": "ael",
    "body": "$1.addEventListener(\"${2|click,scroll,change|}\", function(){$3});"
  },

CSS

cssのショートカット例

 "*": {
    "prefix": "all",
    "body": "@charset \"UTF-8\";\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}"
  },
  "Display Flex Center": {
    "prefix": "dfc",
    "body": "display: flex;\njustify-content: center;\nalign-items: center;"
  }

記入上の注意

jsonは1行で記述