【Zed】Snippetの設定方法

設定ファイルを作成する

コマンドパレットでsnippets: configure snippetsを実行します。

スニペットを登録する言語を選択します。

TSXを選択した場合には~/.config/zed/snippets/tsx.jsonが開きます。

スニペットを記述する

tsx.jsonにスニペットを記述します。

tsx.json

{
  "React Client Component": {
    "prefix": "rcc",
    "body": [
      "${1:'use client'}",
      "",
      "type ${2:Props} = {",
      "\t$3",
      "}",
      "",
      "export function ${4:ClientComponent}({$5}: ${2:Props}) {",
      "\t$6",
      "\treturn (",
      "\t\t$0",
      "\t)",
      "}"
    ],
    "description": "React Client Component"
  },
  "Log to the console": {
    "prefix": "log",
    "body": ["console.${2|log,error,table|}($1)", "$0"],
    "description": "Log to the console"
  }
}

• $1,$2...$0：Tabを押下すると1,2...0の順番でカーソルが移動
• ${4:ClientComponent}：デフォルト値
• console.${2|log,error,table|}：||で括られた値から選択

動作

参考