VScodeのclassNameの補完をちょっと便利にする

はじめに

vscode上でのclassNameの補完が

<p className="">...<p>

のようになってしまう。css-in-jsを使っているときにclassName=""を手作業で変更して、className={}に変更する作業を省略したい。

設定方法

vscodeのuser snippet機能を使う。

command pallet > Snippets: Configure User Snippets > typescriptreact (jsならjavascriptreact)を選択

以下を追加 (あくまでも一例なのでお好みで～)

"className":{
  "prefix": "className",
  "body": [
    "className={$1}"
  ],
  "description": "className intellisens by user snippet"
},

こうすることで
補完が出て、

選択すると実際にこうなる。

最後に

もっといい設定方法あったら教えてください。