The paper contains 4477 words and is expected to last 13 minutes

If you’re a Visual Studio code user and like to develop projects with React, you’ve probably encountered this dilemma — a lot of annoying repetitive code, React.useState, react. useContext, react. useReducer (reducer), etc.

These individual keys are scattered all over the keyboard in different directions, and it’s annoying to have poor little fingers writing these characters over and over again in all the React projects.

If you type React. UseState on the keyboard, the fingertips will move in the following direction:

I may be overstating this simple question, but my focus in this article is not on buttons.

Today, when we develop applications using React, it involves keystrokes and many other things.

Time is gold, and we should take advantage of every opportunity to relieve unnecessary stress as much as possible, because health and time are precious.

To help React developers find ways to save as much time and effort as possible, Microchip has put together this handy guide for speeding up the React development process.

Check it out

1. Extension: Customize the highlighting to be done

This is a seemingly valuable and fun extension, but over time it has become a powerful tool in serious situations.

First, it’s important to write down a to-do list somewhere: it can be in the Evernote app, your written text, a torn piece of paper, etc.

If you use TODO Highlight like I do, then you place to-dos directly above your annotated code. The TODOHighlight extension is useful because when TODO: is preceded by a line, to DOS becomes color-coded on the screen, as shown below:

But the power of TODO Highlight starts to shine even more brightly when you start creating custom keywords and adding color effects to them:

This has become a valuable feature because I can quickly regain focus and understand what’s in each file, no matter where I go back.

My favorite TODO Highlight keyword is BUG: because it’s red. We often associate red with things that are wrong or dangerous, so this drew my attention to a key part of the code:

2. The extension: ES7 React/story/GraphQL/React Native snippets

This will be of great help to you.

I personally don’t use this anymore, because I use my own snippets. But in the past, it has had a huge positive impact on my development workflow.

3. Shortcut: Find files in your project

It’s easy to get frustrated when you have to use file Explorer all the time when you’re looking for a particular file. This can be a huge problem when parsing files in the node_modules directory, because VSCode does the following:

The red line indicates how much content is left to scroll, and the blue indicates the size of the scroll bar (which shrinks as content increases). This affects performance when scaling.

By searching for the project name, you can easily find and open files anywhere in the project without having to move a millimeter on the mouse.

Simply press Ctrl+T and enter the file name. Completed.

4. Extensions + packages: TypeScript+ESLint

About four years ago, when Promises officially entered the ECMAScript 2015 specification, the React ecosystem was thriving and revolutionary technology changed the way Web applications are developed today.

At this point, TypeScript is one of them, as it is moving into the React ecosystem and becoming widely adopted in the community. For good reason!

TypeScript is a powerful tool that allows you to save a lot of time and effort before potential errors occur

In addition to the usual functionality, it helps document the React component, prevents future errors, and teaches you a lot about the JavaScript language itself without having to spend a penny on an ebook to learn the language’s quirks.

Using TypeScript with ESLint in react projects helps when we ignore how React works:

5. Extensions: Any cool theme in the Visual Studio marketplace

Developing the React app and a cool VSCode color theme were key assets that kept me entertained, resulting in better code quality.

It’s important to use your favorite theme because the React component’s color code has a specific look or feel that will help you develop React applications more easily, as shown below:

The component:

Components:

6. Expand: Prettier

If you’re not using something prettier, then please drop everything and use it.

7. Features: Breadcrumbs navigation

Oh, my god, how time flies. Feels like releasing Breadcrumbs yesterday with VScode.

This made developing React much easier, even when I least expected it. Given the nature of the React component child/parent hierarchy, this happens to be just fine when developing in React (as long as the directory structure is built according to the hierarchy), because it basically indicates that the component file is derived from the parent directory (in most cases, the parent directory is always exported from the index.tsx file by default) :

The Breadcrumbs above show that Add is a subdivision of Birthdays, which is a route in the admin component.

Breadcrumbs is enabled by default. But the key is not to take the Breadcrumbs feature for granted. It can quietly become helpful in unexpected ways, so pay more attention to it.

8. Extensions: User code snippets

We’ve seen a lot of great things happen with React, and snippets of user code are one of them.

This handy VSCode extension allows you to define your own custom snippets of code that you can reuse indefinitely throughout your project by pressing a few letters.

I work for a company whose platform was built on React, and it surprised me that some people didn’t know about this feature when developing with React.

So what does it do?

With this feature, you can create any custom code snippet that is generated at the top of the code by typing a few letters (using a custom prefix declaration).

For example, when we create a new component that will use the React.use reducer API, we may need to declare an initial state, a reducer function, and things like [state, dispatch]= react. useReducer (reducer, InitialState), at least make it happen:

const initialState ={Copy the code

//Copy the code

}function reducer(state = initialState, action) {Copy the code

switch (action.type) {Copy the code

default:Copy the code

return stateCopy the code

}Copy the code

}function MyComponent() {Copy the code

const [state, dispatch] =React.useReducer(reducer, initialState) return <div />Copy the code

}Copy the code

Save valuable time and effort by putting this into a user fragment:

{Copy the code

"my React.useReducer snippet": {Copy the code

"prefix": "rsr".Copy the code

"body": [Copy the code

"const initialState = {".Copy the code

" //The $1".Copy the code

"}".Copy the code

"".Copy the code

"function reducer(state = initialState, action) {".Copy the code

" switch (action.type) {".Copy the code

" default:".Copy the code

" return state".Copy the code

"}".Copy the code

"}".Copy the code

"".Copy the code

"function MyComponent() {".Copy the code

" const [state, dispatch] = React.useReducer(reducer, initialState)".Copy the code

"".Copy the code

" return <div />".Copy the code

"}"Copy the code

]Copy the code

}Copy the code

}Copy the code

Just press the RSR key and this code is automatically generated.

Here are some common snippets I like to use throughout the React project:

Quickly test CSS elements to see if they are correct by giving them temporary borders:

{Copy the code

"border test": {Copy the code

"prefix": "b1".Copy the code

"body": "border: 1pxsolid red;"Copy the code

},Copy the code

"border test2": {Copy the code

"prefix": "b2".Copy the code

"body": "border: 1pxsolid green;"Copy the code

},Copy the code

"border test3": {Copy the code

"prefix": "b3".Copy the code

"body": "border: 1pxsolid magenta;"Copy the code

},Copy the code

"border test4": {Copy the code

"prefix": "b4".Copy the code

"body": "border: 1pxsolid blue;"Copy the code

},Copy the code

"border test5": {Copy the code

"prefix": "b5".Copy the code

"body": "border: 1px solid#fe7200;"Copy the code

}Copy the code

}Copy the code

I usually have a component folder with common base components in each project, such as Button:

{Copy the code

"import Button from'components/Button'": {Copy the code

"prefix": "btt".Copy the code

"body": "import Buttonfrom 'components/Button'"Copy the code

}Copy the code

}Copy the code

Set up/clean up a few things before each test:

{Copy the code

"beforeEach(() => {})": {Copy the code

"prefix": "bfe".Copy the code

"body": ["beforeEach(() => {"." The $1"."})"]Copy the code

}Copy the code

}Copy the code

Some fast lines are disabled:

{Copy the code

"// @ts-ignore": {Copy the code

"prefix": "tsg".Copy the code

"body": "//@ts-ignore"Copy the code

},Copy the code

"eslint disable line": {Copy the code

"prefix": "eds".Copy the code

"body": "//eslint-disable-line"Copy the code

}Copy the code

}Copy the code

Import the React:

{Copy the code

"import react": {Copy the code

"prefix": "reaa".Copy the code

"body": "import Reactfrom 'react'"Copy the code

}Copy the code

}Copy the code

This isn’t a complete list of the snippets I use, but hopefully it gives you a sense of how much time and effort you can save by using user snippets.

Bonus: bring it up to a level with ProjectSnippets, which is a VSCode extension that provides the same functionality except at the workspace level.

9. Shortcut: Find all matches in the current file

Highlighting the selected keyword in the file and pressing Ctrl+Shift+L will select all locations where the keyword appears.

This is useful when you want to rename a component, because obviously, when a component has children, we will appear at least three times:

import React from'react'function App() {Copy the code

return <h2>Usefulcontent</h2>Copy the code

}function Root() {Copy the code

return (Copy the code

<App>Copy the code

<p>Will I even berendered? </p>Copy the code

</App>Copy the code

)Copy the code

}Copy the code

If you want to rename your app to something else, you must select the component declaration and the two references in the root render block.

10. Shortcut: Copy lines up/down

Ctrl+D saves a lot of time.

Have you mastered the above 10 “acceleration methods”? If there are any questions, welcome to small core message yo ~

Leave a comment like follow

We share the dry goods of AI learning and development. Welcome to pay attention to the “core reading technology” of AI vertical we-media on the whole platform.

(Add wechat: DXSXBB, join readers’ circle and discuss the freshest artificial intelligence technology.)