⚒️
作らないと覚えられない😣snippetは自作しよう！

2025/06/21に公開
 はじめにこんにちは！

最近は就活から逃げてニッチな技術系イベントに参加し、企業の方に「学生なのにこんなイベントに来ていて偉いね」と褒められることが生きがいの 27 卒学生エンジニアの yossuli です。

本記事は #Progate_Bar での発表内容を記事にしたものです。

 snippet とは？snippet とは、よく使うコードのテンプレートを保存しておき、設定した入力があった際に補完候補に表示され、選択するとそのテンプレートが挿入されるという vscode の機能です。

固定された文字列がただ挿入されるだけでなく、様々な便利機能があります。

例えば、以下のような機能があります。

 タブストップsnippet 内で $1 のように $ で始まる文字列を使うと、カーソルの位置がその場所に順々に移動します。

jumpToNextSnippetPlaceholder というコマンドがあり、このコマンドを実行することで次の $ で始まる文字列にカーソルが移動します。

 プレースホルダーまた、${1:default} のように書くと、default という文字列がデフォルトで挿入されるので、基本的には同じ文字列を入力するといった場合に便利です。

 選択肢いくつかの文字列が挿入する候補になる場合には ${1|option1,option2,option3|} のように書くことで、option1, option2, option3 のいずれかを選択することができます。

また、この数値は重複可能です。重複している場合、同じ数字の場所には同じ入力が反映されます。
{
  "init this": {
    "scope": "typescript, typescriptreact, javascript, javascriptreact",
    "prefix": "it",
    "body": ["this.$1 = $1;"],
    //            ^     ^
    //            同じ値を入力するので、同じ数字を使う
    "description": "initialize this"
  },
  "arrow function": {
    "scope": "typescript, typescriptreact, javascript, javascriptreact",
    "prefix": "af",
    "body": ["${3:<>}($1)${2::} => $4"],
    //            ^          ^
    //            必要がない場合に消しやすいようにプレースホルダにしている
    "description": "arrow function"
  },
  "export ": {
    "scope": "typescript, typescriptreact, javascript, javascriptreact",
    "prefix": "ex",
    "body": ["export ${1|default,const,type|} $2"],
    //                   ^       ^     ^
    //                   どれもよく使うので選択肢にしている
    "description": "export"
  }
}

 変数$ から始まる特殊な文字列のなかには、その部分を設定された値に置き換える、変数という機能があります。

例えば ${TM_FILENAME_BASE} は現在のファイル名の拡張子を除いた部分に置き換えられます。

他にも現在選択しているテキストに置き換えられる ${TM_SELECTED_TEXT} や、マルチカーソル時にカーソルの番号に置き換わる ${CURSOR_INDEX} 、現在の行番号に置き換わる ${TM_LINE_INDEX} などがあります。
{
  "export const arrowfn": {
    "scope": "typescript, typescriptreact, javascript, javascriptreact",
    "prefix": "ecaf",
    "body": ["export const $TM_FILENAME_BASE = ${3:<>}($1)${2::} => $4"],
    //                     ^
    //                     ファイル名を関数名にする
    "description": "good export const arrowfn"
  },
  "cursor number": {
    "prefix": "cn",
    "body": "$CURSOR_NUMBER"
    //       ^
    //       マルチカーソル時にカーソルの番号に置き換わる
    //       console.logを選択して機械的に番号を振るのに使う
  }
}

 正規表現ユーザー入力や変数の値に対して正規表現と関数を適用して加工することもできます。
例えば $1 の部分に toUpperCase 関数を適用し ${1/(.*)/${1:/toUpperCase}/gi} のように書くと、$1 の部分に入力されたすべての文字列が大文字に変換されます。
{
  "good array": {
    "prefix": "ga",
    "body": ["[${1/(?:([\\d]+)(\\s)?)/$1${2:+,}/gi}]"],
    //            ^^^^^^^^^^^^^^^^^^^^^^^^
    //            入力された数字をカンマ区切りの配列に変換
    "description": "good array"
  },
  "const useState": {
    "scope": "typescriptreact, javascript, javascriptreact",
    "prefix": "cus",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2)"
      //                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      //                  state の一文字目を大文字にすることでsetterを簡単にキャメルケースで書ける
    ],
    "description": "useState"
  }
}

 なぜ snippet を自作するべきか？snippet は vscode のマーケットプレイスに大量に公開されています。

しかし、自作することで、どんな snippet があるのかを把握しやすくなり、また自分の好みに合わせてカスタマイズすることができます。

また、必要な snippet を必要な分だけ作成することで、無駄なものが候補に表示されることがなくなり、開発体験が向上します。

まだまだ紹介しきれていない部分が多々あります。

LT の後、時間のある時にこの記事も加筆しようと思いますし、以下の記事が参考になるのでそちらもぜひご覧ください。
https://zenn.dev/yhsi/articles/80c8a030c2761d

 まとめsnippet は vscode の便利な機能であり、つかいこなすことで開発体験を向上させることができます。

特に、自作することによって snippet への理解が深まり、一層の開発体験向上が期待できます。

皆さんもぜひ自分のエディタを魔改造して開発体験を向上させましょう！
ちなみに、本記事以外にも 4 本、今回の LT に関連して記事を挙げていますのでそちらも併せてご覧いただけると幸いです。

xのフォローもよろしくお願いします！
はじめに

snippet とは？

タブストップ

プレースホルダー

選択肢

変数

正規表現

なぜ snippet を自作するべきか？

まとめ

Discussion
