Reactのスニペットを早く出現させたーい！！

お先にまとめです。

React Hook	略記
useStateSnippet	usss
useEffectSnippet	ueeee
useReducerSnippet	urrs
useMemoSnippet	umms
useContextSnippet	utts
useCallbackSnippet	ulls
useRefSnippet	urfs

スニペットとは？

コードを一部書くだけで補完で書いてくれる機能です

世は大生成AI時代、スニペットなんてCopilotが出してくれるのが当たり前ではありますが、時代に逆行して書いていきます

まず、早く出現させたい理由としては、先程のgifにもあるのですが、一番上に出てこなかったり、他のスニペットと競合して、選択するのが面倒だったりします。

例えば、useStateなんかはusssと打つと確実に一番上に出現できるので、usss→enterですぐに実行できるのです。便利です。

こんな感じでスニペットを簡単に出す方法を書いていきます。

補足しておくと、恐らく最速なのはスニペットを自作して、表示順を自作を上にするということです。

ただ面倒なのと、元からいいのが溢れてるのでそれを使いたいですよね。

さらに分かりやすい、覚えやすいスニペットがあれば教えてください。

基本編

スニペット自作は大変なので、以下のものが有名でおすすめです。

有名なHooksたち

よく使うuseState,useEffect,useRef,useReducer,useContext,useMemo,usecallbackについて書いていきましょう。useStateはusssでしたね。

React Hook	略記
useStateSnippet	usss
useEffectSnippet	ueeee
useReducerSnippet	urrs
useMemoSnippet	umms
useContextSnippet	utts
useCallbackSnippet	ulls
useRefSnippet	urfs

userefは出なかったなぁ,,,,

自作編

設定から自分で追加することができます。(Win : ctrl+shifft+p ,Mac : com +shift+p)

以下のように記載していくと、使うことができるようになります。$1,$2なんかはtabで次のとこに行けることを示しています。

  "Arrow Function": {
    "prefix": "af",
    "body": "($1) => {$2}",
    "description": "Creates an arrow function"
  },
  "Arrow Function Single Line": {
    "prefix": "afs",
    "body": "($1) => $2",
    "description": "Creates a single line arrow function"
  },
  "className": {
    "prefix": "cn",
    "body": "className=\"$1\"",
    "description": "Add className attribute"
  },

私がよく使うのは() => {}をafで出現させたり、cnでclassNameを出現させたりしています。
他にもReactHookFormだったり、愛用のTailwindValiantsのスニペットを入れたりしています。（計1100行）

まぁでもみんな自分で見つけてるんだろう、きっと