How I created my first Vs code Snippet for React ??and boom React Hooks snippet.
Tags: vscode, webdev, beginners, javascript
Published: 2019-07-14 09:17:54

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally hundreds of snippets out there for react, and for good reason: enhancement to productivity for faster code.
Snippets play a handy role in code editors when you want write code repeatedly,it frustrate the things up.

Its one of the things that i wanted to be a publisher in vscode,so I created a extension for react hooks which is handy for react devs and inspired by Live server extension in vscode.

# #Fire it up

Before you do anything, you’re going to install vsce (short for Visual Studio Code Extensions) and establish yourself as a publisher. All of the instructions to do so are here. I know it looks like a lot, but it takes anywhere from 5-10 minutes, and then you'll never have to do it again, for any extension you create.

Now that you’ve got that under your belt, here are the steps you need to start work.

First, you need to run:

![](https://thepracticaldev.s3.amazonaws.com/i/i6ljjl39lguh15l0mqc5.png)

This makes the generator globally available on your machine (meaning you can now create a snippet in any directory). You can then execute this command to kick off your snippet:

![](https://thepracticaldev.s3.amazonaws.com/i/ymbnedpwvzga4weybc47.png)

You will be prompted by a screen that looks like this:

![](https://thepracticaldev.s3.amazonaws.com/i/phmg8x9i13xz1dtjm9zh.PNG)

When selecting this, it asks if this is a new snippet or if we want to import from an existing one. We want to create a new one.

![](https://thepracticaldev.s3.amazonaws.com/i/uwgzw739z8qxp7ploded.PNG)

Next, you'll have to answer a few other questions, including:

* What’s the extension's name?
* What is the the identifier? (I just went with the name, that’s probably typical.)
* What is the the description? (I just put something silly in initially. Don’t worry, you can update this in your package.json in the future.)
* What's the publisher's name? (See earlier instructions.)
* Language id: 'javascript' (preference which ever u like)

It will set you up with a snippet to start creating your own on __snippets.json__ file. The full scoop and [all the details are here].
[all the details are here]:https://code.visualstudio.com/api/get-started/your-first-extension

# #Research
Research for a code snippet? Probably! But I was genuinely curious: what would work best for the vast majority of people, while still being something I liked?
So I thought react hooks has been trending then I give it a shot.

# Features 

Hooks are supported: `useState`, `useEffect`, `useContext`, `useCallback`,`useMemo` ,`useRef`,and `useReducer`.

### 1 import useState
Type `imrus` to  "Import React, { useState }"
![](https://thepracticaldev.s3.amazonaws.com/i/l8me7c12aj8pxv5wnpf9.png)

### 2 import useEffect
Type `imrue` to  "Import React, { useEffect }"
![](https://thepracticaldev.s3.amazonaws.com/i/imboy7hliowcxrce9wgb.png)

### 3 import useContext
Type `imruc` to  "Import React, { useContext }"
![](https://thepracticaldev.s3.amazonaws.com/i/ko1tcpp2lnhiowdczvu8.png)

### 4 useState
Type `ust` to usestate
![](https://thepracticaldev.s3.amazonaws.com/i/rtbx9tzc2qv3ehzrtk25.png)

### 5 useEffect
Type `uef` to useEffect
![](https://thepracticaldev.s3.amazonaws.com/i/e53my6uedwop23q9b73p.png)

### 6 useContext
Type `uct` to useContext
![](https://thepracticaldev.s3.amazonaws.com/i/bgum1q7d1b7uo13zdkg3.png)

### 7 useCallback
Type `ucb` to useCallback
![](https://thepracticaldev.s3.amazonaws.com/i/mmz6r22w8gnrbcb3mwgp.png)

### 8 useMemo
Type `umo` to useMemo
![](https://thepracticaldev.s3.amazonaws.com/i/3qlngrukvgqcea7zvbam.png)

### 9 useReducer
Type `urd` to useReducer
![](https://thepracticaldev.s3.amazonaws.com/i/ji7wgysy9nqtmber53mx.png)


### 10 useRef
Type `urf` to useRef
![](https://thepracticaldev.s3.amazonaws.com/i/g6kc2d256wa7yn6mfmck.png)


# #Conclusion

* If you want to download this extension [here is the link] and also my github repo [link]. 
* Isn't it crazy that you become a vscode publisher instantly in few days.
* If you have any doubts regarding code and publishing on Vs code marketplace,
here is [the link]. If you stuck in any place if free to discuss and or else ping me. 
* Dan abramov is creator of react hooks furtherly check the links for [react hooks] and making sense of React hooks [post] on Dev Community. 

Thank you for reading
[here is the link]:https://marketplace.visualstudio.com/items?itemName=AYashwanth.react-hooks
[link]:https://github.com/yashwanthambati/react-hook-snippet
[the link]: https://code.visualstudio.com/api/working-with-extensions/publishing-extension
[react hooks]:https://reactjs.org/docs/hooks-intro.html
[post]:https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib
__Love Love__