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
Top comments (0)