【WEB制作×勉強】Day12：スニペット

昨日に引き続きコーディングスピードをあげるための技を獲得中！
便利～！と思って必要そうなスニペット登録したけど、
動画で話にあったみたいに、「入れすぎて分からなくなる」の典型パターンな私🤣
最初のうちはみながらじゃないと使いこなせないから、昨日のエメット内容はパソコンの端にメモ貼り付けたんだけど。スニペットはどうやって見やすいようにしようか迷い中。。。

あと、
DAY8～10の自分なりの解釈が正しいのか心配だったので、
初めてデイトラで質問してみた！
ドキドキだったけど、メンターさんがすぐにやさしく回答くれて本当に神。質問するのも、まず専門用語が分からないからめっちゃ調べたり考えるから、それはそれで力つくと思うし、頭つ自分で分からない時は積極的に質問していこうとおもいます🙌

Easy Snippet

登録の仕方

登録したいコードを囲む
CTRL＋SHIFT＋P　でeasysnippetを呼び出す
Add Snippet Form Selectionを選択
呼びたす時のショートカットキーを入力
その後Snippetと同じ要領で内容を変更できる

・$数字　で何番目にカーソルを合わせるか（*tabキーで移動できる）
・$｛数字｜テキスト、テキスト｜｝　で入力したテキストの中から選ぶことができる
・$｛テキスト｝で初期値を設定できる

---

Snippet

登録の仕方

設定(歯車マーク)からスニペット選択
選択したいファイルを選ぶ（HTMLなのか、CSSなのか…）
このファイル（json）に登録したものがショートカットキーとして使える

”スニペットの名前”：｛
　”prefix”:"好みのショートカットキーを入力"
    "body":[
     展開したいコードを1行ずつ””で囲んで記入
　＊もとのコードに””がある場合は前に\をつけ打ち消す（\"\"）
     ]}}

"Picture": {
    "prefix": "pic",
    "body": [
      "<picture class=\"$1\">",      
      "\t<source media=\"(${2|min,max|}-width: ${3:768}px)\" srcset=\"$4\">",
      "\t<img src=\"$5\" alt=\"$6\" decoding=\"async\">",
      "</picture>"
    ]
  }

入力を終え、HTMLでpicを入力すると…

<picture class="">
        <source media="(min-width: 768px) " srcset="">
        <img src="" alt="">
    </picture  class="">

がHTMLで展開される！

・$数字　で何番目にカーソルを合わせるか（*tabキーで移動できる）
・$｛数字｜テキスト、テキスト｜｝　で入力したテキストの中から選ぶことができる
・$｛テキスト｝で初期値を設定できる