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:

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:

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

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.

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.

#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 }"

2 import useEffect

Type imrue to "Import React, { useEffect }"

3 import useContext

Type imruc to "Import React, { useContext }"

4 useState

Type ust to usestate

5 useEffect

Type uef to useEffect

6 useContext

Type uct to useContext

7 useCallback

Type ucb to useCallback

8 useMemo

Type umo to useMemo

9 useReducer

Type urd to useReducer

10 useRef

Type urf to useRef

#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

Love Love