そもそもスニペットって何？
分かりやすい記事がありました。（丸投げ）
スニペット本体
{
"customHooksSnippet": {
"prefix": "cshk",
"body": [
"export const ${TM_FILENAME_BASE} = () => {",
"\tconst [${1:first}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:second})",
"\tuseEffect(() => {",
"\t\tset${1/(.*)/${1:/capitalize}/}(${2:second})",
"",
"\t\treturn () => {",
"\t\tset${1/(.*)/${1:/capitalize}/}(${2:second})",
"\t}",
"\t}, [])",
"",
"\treturn {${1:first}};",
"};",
"$0"
],
"scope": "typescript,typescriptreact,javascript,javascriptreact",
"description": "Create react basic custom hooks"
}
}
使い方
- js,ts,jsx,tsxファイルで"cshk"と入力すると候補に出てくるようになる。（別のキーで呼び出したい場合は、上記jsonの"prefix"を修正する。）
- フック名はファイル名をそのまま流用する。1ファイルで複数のフックを書くなら修正が必要。
- 最初にフォーカスが当たるのがstate。入力後tabキーで初期値に移動する。移動時にsetの部分が勝手に大文字始まりになるようになっている。
所感
Reactの書き手という視点
基本的にはMarketplaceで仕入れればいい（例えばこれとか）が、カスタムフックが見当たらなかったので自作。まあそもそも"カスタム"だから定型文は自分で書いて然るべき…なのか？
そもそもhooksの理解が足りてないのが悲しい。
自作スニペットについて
むしろ自分でスニペットを一から書いてみるというほうが目的だったまである。
初めて書いたので記法は見よう見まね。幸いにも先に挙げた拡張機能のソースが公開されてるので、これと公式ドキュメントを参考にしながら四苦八苦して書いた。
ちゃんと思った通りに動いた部分とそうでもない部分がある。あまり伸ばしてもしょうがないスキルのような気もするが、必要になったら積極的に書いて慣れていきたい。