【VScode】コーディング中の検索コピペ地獄にはスニペット登録【設定方法 / 解決 / 効率化】

こんにちは、カヨです。

今回のお題は、

コーディング中の検索コピペ地獄には
スニペット登録

❓「あれ、さっき書いたやつどこだっけ？」❓コードを書いている時、何度も何度も書かなければいけないコードがあったりしませんか？覚えるには長くて。。。毎回どこかで調べたり、以前使用したものを見返したりしていませんか？それを簡単に解決できる方法がVScodeのスニペット登録です！ぜひお困りの方は一緒にやってみましょう～✨爆速コーディングやっちゃいましょう！

こんな方に読んでいただきたいと思っています！

✔︎VScodeを使用している人
✔︎ なんども同じことを打ち込むのに疲れた人
✔コードを書く人
✔コーディングを学んでいる人
✔長くて覚えづらいコードやフォーマットをいつも調べて書き込んでる人

VSCode のスニペット（Snippet）とは

VSCodeの**スニペット（Snippet）**は、頻繁に使うコードのテンプレートを保存しておき、簡単なキーワードで呼び出せる機能です。効率的にコーディングを進めるのに非常に便利です。

スニペットの登録手順

1. スニペットを追加するファイルを開く

✔ コマンドパレットを開く（Cmd + Shift + P または Ctrl + Shift + P）

✔ 「Preferences: Configure User Snippets」と入力し、Enter

✔ 新しいスニペットファイルの作成

✔ ファイル名を決める。どんな名前でもOKです。

筆者

これでファイルが開かれます。このファイル名はあとからけられたり、スニペットファイルは複数作成できます。

2. スニペットのフォーマット

✔ 以下のテンプレートに沿って記述します

{
  "スニペットの名前": {
    "prefix": "呼び出しキーワード",
    "body": [
      "1行目のコード",
      "2行目のコード",
      "必要なら${1:デフォルト値}などで変数化"
    ],
    "description": "スニペットの説明"
  }
}

✔ 作成したファイルの記述箇所
コメントアウトを完全に削除して上記ので記述用意設定を張り付けるなら全部貼り付けでOK！もし、コメントアウトをのこしておく場合「ここに追記」の箇所にコピペしますが一番そとの｛｝はいりません。複数設定するときは「,」でつなぎましょう。

{
  // Place your GLOBAL snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }

　//----------------------------------------
  //ここに追記

　例：
  "スニペットの名前": {
    "prefix": "呼び出しキーワード",
    "body": [
      "1行目のコード",
      "2行目のコード",
      "必要なら${1:デフォルト値}などで変数化"
    ],
    "description": "スニペットの説明"
  }

　//----------------------------------------
}

💡 ヒント：スニペットで使える特殊構文

${1:初期値}：カーソルで最初にジャンプする場所
$0：最後にカーソルが来る位置
\\：エスケープ文字としてバックスラッシュを使いたいとき

📁 スニペットファイルの保存場所

OSに応じて、スニペットファイルは以下に保存されます：

Mac : ~/Library/Application Support/Code/User/snippets/
Windows : %APPDATA%\Code\User\snippets\

ChatGPT

こういった設定はChatGPTに頼むととてもいいですよ！簡単に作成できちゃいます◎

最初に登録したいスニペット

✔ <a>タグ

  "aタグ：基本リンク": {
    "scope": "html",
    "prefix": "atag",
    "body": [
      "<a href=\"${1:https://example.com}\" target=\"${2:_blank}\" rel=\"${3:noopener noreferrer}\" class=\"${4:el__ho-link}\">${5:リンクテキスト}</a>"
    ],
    "description": "HTMLのaタグでリンクを作成"
  },

✔ <img>画像タグ

  "imgタグ": {
    "prefix": "imgtag",
    "scope": "html",
    "body": [
      "<img src=\"${1:/path/to/image.jpg}\" alt=\"${2:代替テキスト}\" />"
    ],
    "description": "imgタグ：画像を表示"
  },