VScode スニペット登録 【JavaScript】

活用するメリット

• 　 clickEvent() =>などの、記述が長く、クセのある構文が、改行込みで設定可能

• 　console.log() など使用頻度の高いメソッドを、任意のキーワードで素早く呼び出せる

• 　文字列の空白も調整可能。

• 　設定は、基本設定 → 　ユーザースニペット →　 検索窓[javascript.json]

【Javascript.json】

"clickEvent": {
 "prefix": ".adc",  //.adcと入力すれば、"body"の中身が出力される
 "body": [
 ".addEventListener('click', () => {",
  " $1",   //[$1] = スニペット実行後、始めにカーソルが当たる位置を指定。 $2 も設定可能
   "});"
 ],
},

【JavaScript】

 const button = document.querySelector('button');  //button要素を取得

  // button に続けて .abcと打てば、入力補完に、「ユーザースニペット」が出現。
  button

  //確定をすると、
  button.addEventListener('click', () => {
   //字下げ + カーソルがここに当たっている。
  });

コチラに詳しく載ってます
[参考:lisz-works] https://www.lisz-works.com/entry/vscode-snippets
[参考:スニペット作成] https://vscode-doc-jp.github.io/docs/userguide/userdefinedsnippets.html