SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

VScodeで独自スニペットを登録する方法

作成日：2022月04月20日
更新日：2024年01月31日

vscodeには自分でスニペットを登録できる機能がある。
よく使う構文を登録しておくとコーディング時間が短縮できる。

2種類のスニペット

vscodeに登録できるスニペットには2種類ある

language snippet

特定の言語モードで利用できるスニペット。
「言語.json」のファイルで作成される。

ctrl + Shift + P　 →　「ユーザースニペットの構成」　→　作成したい言語入力
で作成できる。

global snippet

全て言語モードで使用できるスニペット
「任意の名称.code-snippets」のファイルで作成される。 ※scopeを設定した場合はその言語モードだけになる

ctrl + Shift + P　 →　「ユーザースニペットの構成」　→　「新しいグローバルスニペット」 で作成できる。

基本構文

基本は下記のような形で登録する。
作り方と影響範囲が異なるだけで上記2つのスニペットの書き方は同じになる。

json
"スニペット名": {
  "prefix": "短縮語",
　"scope": "言語",
  "body": [
      "展開するコード",
      "展開するコード",
      "展開するコード"
  ],
  "description": "スニペットの説明"
}
項目説明
スニペット名スニペットの名称
短縮語スニペットを呼び出す文字列
展開するコード短縮語入力時に展開するコード
スニペットの説明スニペットの説明

構文サンプル

markdown用のlanguage snippet「markdown.json」を
作成してみる。

language snippet

markdown.json
{
    "link": {
        "prefix": "link",
        "body": [
            "- []()"
        ],
        "description": "link"
    },
    "codeBlock": {
        "prefix": "cb",
        "body": [
            "```${1:js}:{\"title\":\"$2\",\"selectLine\":\"$2\"}",
            "",
            "",
            "",
            "```"
        ],
        "description": "codeBlock"
    },
}
  • $1~$nで初期フォーカスからタブ移動を設定できる
  • ${n:初期値}で初期値を設定できる -「"」などはエスケープしてやる必要がある
  • サンプルにはないが「\n」で改行、「\t」でタブなども入力できる

snippets

global snippet

全ての言語や複数言語で利用したいスニペットはglobal snippetで登録する

test.code-snippets
"reactfc": {
    "scope": "typescriptreact,javascript",
    "prefix": "reactfc",
    "body": [
      "import React from 'react'",
      "",
      "type Props = {",
      "  ${1:clfsdafddsd}",
      "}",
      "",
      "export const Hello: React.FC<Props> = (props) => {",
      "  const { ${2:className} } = props",
      "",
      "  return <div className={className}>$3</div>",
      "}",
      ""
    ],
    "description": "Reactコンポーネントのテンプレート"
  }
  • 複数設定したい場合はscopeに複数設定する。※単数設定も可能
  • scopeを消すと全言語モードで利用可能になる

ツール

snippet generatorを使うと簡単に作ることができる。

まとめ

コードを書いている時に何回も同じコードを書くのことがあり、煩わしいと
考えていた人はこの機能を使えば楽になると思います。
※登録名を忘れることが多々あります...

参考

新着記事

タグ別一覧
top