If you are a Visual Studio Code user and like to develop projects with React, then you may have to type the code like React.useState, React.useContext, React.useReducer (reducer, initState), etc. regularly.
These individual keys are scattered in all directions on the keyboard and it can become annoying when our poor little fingers write these characters over and over in all projects. Our react project.
If you type React.useState on the keyboard, your fingertips will have to follow these directions: 
I may be overly serious about this simple problem, but my point for this article is not just about keystrokes. It’s about keystrokes and many other things when we develop react apps. I have learned that we should take advantage of all the opportunities available as much as possible to reduce unnecessary stress because our health and time are valuable.
As I said, I want to take the time to write this article to help React coders like you and me find ways to save as much time and energy as possible by telling you useful ways you can use it. Use to accelerate your application development process!
1.Extension: User Snippets
I have seen many great things in the process of developing React applications and User Snippets is one of them.
VSCode is an VScode extension that allows you to define your own custom snippets that you can reuse countless times in your projects by simply pressing a few letters. So, what does it do?
This feature allows you to create any custom code snippet just by entering a few letters (which you declare with custom prefix). For example, when we create a new component that will use the React.useReducer API, we will at least have to declare state, reducer and something like [ state , ftime ] = React.useReducer (reducer, initState) to The code can run:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const initialState = { // } function reducer(state = initialState, action) { switch (action.type) { default: return state } } function MyComponent() { const [state, dispatch] = React.useReducer(reducer, initialState) return <div /> } |
You can save both time and energy by stuffing them into snippets like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { "my React.useReducer snippet": { "prefix": "rsr", "body": [ "const initialState = {", " //$1", "}", "", "function reducer(state = initialState, action) {", " switch (action.type) {", " default:", " return state", " }", "}", "", "function MyComponent() {", " const [state, dispatch] = React.useReducer(reducer, initialState)", " ", " return <div />", "}" ] } } |
All you need to do is press rsr and the above code will automatically be written for you. Here are some snippets that I use often
Quickly test css to see if it displays correctly by providing it with temporary borders:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | { "border test": { "prefix": "b1", "body": "border: 1px solid red;" }, "border test2": { "prefix": "b2", "body": "border: 1px solid green;" }, "border test3": { "prefix": "b3", "body": "border: 1px solid magenta;" }, "border test4": { "prefix": "b4", "body": "border: 1px solid blue;" }, "border test5": { "prefix": "b5", "body": "border: 1px solid #fe7200;" } } |
Import react:
1 2 3 4 5 6 7 | { "import react": { "prefix": "reaa", "body": "import React from 'react'" } } |
Import some commonly used components as Button:
1 2 3 4 5 6 7 | { "import Button from 'components/Button'": { "prefix": "btt", "body": "import Button from 'components/Button'" } } |
This is not all the paragraphs I use but I hope it helps you understand how much time and energy you can save by taking advantage of User Snippets.
2.Extension: Prettier
If you’re not using Prettier, please, assume that you’re begging you to stop everything and use it for now.
3.Extension + Package: TypeScript + ESLint
About four years ago, when Promise was officially included in the ECMAScript 2015 Specification , the React ecosystem had a technology explosion that changed the way we develop web applications today.
TypeScript at this time is one of them when it has joined the React ecosystem and has gradually gained wide acceptance in the community to this day – and for good reason!
TypeScript has been a powerful tool that allows you to save a lot of time and energy before potential errors happen.
In addition to the usual features it provides, it helps to record your components, prevent future errors from happening, and teach you a lot about the JavaScript language itself without you having to spend a penny on an ebook. to learn strange things.
Applying TypeScript with ESLint to your React projects will help you in situations where we accidentally forget how React works: 
4. Shortcut: Search keyword in the file
Highlight a keyword of your choice in a file and press Ctrl + Shift + L will highlight all keywords in the file.
This is useful when you want to rename a component because obviously we always have at least three occurrences when a component has children:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React from 'react' function App() { return <h2>Useful content</h2> } function Root() { return ( <App> <p>Will I even be rendered?</p> </App> ) } |
5. Shortcut: Search file
It can easily become frustrating to have to use File Explorer all the time when you are looking for a specific file. This becomes a big problem when you want to parse a file in the node_modules directory because VSCode brings this to you:
The red line indicates the distance you need to scroll over and the green represents the size of the scroll bar. This affects performance when expanded.
You can easily find and open a file anywhere in a project by searching its name without having to move a millimeter of mouse. Just press Ctrl + T, enter a file name and you’re done, the file to be searched will appear right in front of your eyes.
6.Extension: Custom TODO highlights
This is an extension that looks like it is only for code decoration, but it has become a powerful tool with me over time in environments that require great care. First of all, it is extremely important to write down the todos somewhere as long as you can see and be reminded of something. It could be on your Evernote application, your book, a piece of paper, etc.
If you use TODO Highlights like me, you will place the todo right at the top of the code you are writing as comments. It is extremely useful with the TODO Highlights used together because we can customize the color when you add TODO: in front like the example below: 
The strength of TODO Highlights is that it gives you the ability to adjust the color to your liking 
This has become a valuable feature because we can quickly regain focus as well as understanding what is going on in each file no matter where we return from. My favorite todohighlight keyword is BUG: because it’s red. We often associate red with bugs or something dangerous so that this easily attracts our attention to the important parts of the code:
7.Extension: Any theme you like
React application programming combined with interesting VSCode color themes is a way to entertain yourself leading to better quality code.
Using a theme you like is extremely important because the color of the React code components that you have certain “interface” or “feel” to, will help you easily in the programming process. , as we can see below:
Not a component 
component 
8. Features: Breadcrumbs
Time passed quickly! It felt like new yesterday when breadcrumbs were released in VScode.
This continues to give me an easier time developing React apps.
Due to the nature of React’s parent / child component hierarchy, breadcrumbs become very relevant when React code (as long as you build your directory structure hierarchically) because it basically shows you that a The component file is taken from the parent directory (which in most cases is always a component exported by default from the index.tsx file): 
The breadcrumbs above shows that Add is the son of Birthdays, the second is the child of Date, and the route is the Admin component.
Breadcrumbs are enabled by default. But the problem is that most people don’t pay attention to Breadcrumbs. It silently becomes useful in unexpected ways, so pay more attention to it!
Above are the extensions, keystrokes and many other small things that help me a lot during working with React. Hopefully these will be as useful to you as they are to your React coder life. If you have any ideas or you have even more secret tips, don’t be afraid to share them in the comments section. Source