Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VSCode user snippet to generate useState for React?

I'm trying to create a VS code user snippet for useState()

Currently I have

  "use state": {
    "prefix": "us",
    "body": [
      "const [$1, set${1/(.*)/${1:/upcase}/}] = useState($2);",
      "$3"
    ],
    "description": "creates use state"
  },

When I enter 'foo' at $1 (position 1) I get:

const [foo, setFOO] as useState()

However I would like to get:

const [foo, setFoo] as useState()

How do I change my snippet to work this way?

like image 977
ace2case Avatar asked Oct 02 '19 23:10

ace2case


People also ask

How do I enable React snippets in Visual Studio code?

Here's how to use React Snippets in VSCode: Go to Code, then Settings, then Extensions. Search for React Snippets. There are many good snippet extensions to choose from. When you have a snippet extension installed, take a look at the shortcuts available and write the best ones down.

What can I use instead of useState in React?

An alternative to the useState Hook, useReducer helps you manage complex state logic in React applications. When combined with other Hooks like useContext , useReducer can be a good alternative to Redux, Recoil or MobX. In certain cases, it is an outright better option.

How do I add vs hook to React codes?

Launch VS Code Quick Open ( Ctrl+P ), paste ext install AlDuncanson. react-hooks-snippets , and press enter.


1 Answers

You just need to change your transform to capitalize like:

"const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);",

like image 138
Mark Avatar answered Oct 24 '22 03:10

Mark