Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the methods of VSCode to speed up the React development process". In the daily operation, I believe that many people have doubts about the methods of VSCode to speed up the React development process. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what are the methods of VSCode to speed up the React development process?" Next, please follow the editor to study!

1. Extensions: customizing highlights to be done

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

First of all, it's important to write down your to-do list somewhere: it can appear in an Evernote application, your composition, a torn piece of paper, and so on.

If you use TODO Highlight like I do, then you put to-dos directly above the code you commented out. The TODOHighlight extension is very useful because when you add a line before TODO:, to dos becomes color-coded on the screen, as follows:

However, when you start to create custom keywords and add color effects to them, the power of TODO Highlight starts to shine even more:

This has become a valuable feature because I can quickly regain focus and understand the contents of each file, no matter where I return.

My favorite TODO Highlight keyword is BUG: because it's red. We usually associate red with something wrong or dangerous, so it's easy to draw my attention to key parts of the code:

two。 Extension: ES7 React/Redux/GraphQL/React Native snippets

This will be very helpful to you.

Personally, I don't use this anymore because I use my own clips. But in the past, it had a huge positive impact on my development workflow.

3. Shortcuts: finding files in a project

It's easy to get frustrated that 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:

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

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

Just press Ctrl+T to enter the file name. It's done.

4. Expansion + package: TypeScript+ESLint

When Promises officially entered the ECMAScript 2015 specification about four years ago, the React ecosystem flourished, and revolutionary technologies changed the way Web applications are developed today.

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

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

In addition to the usual features, it helps record React components, prevents future errors, and teaches you a lot about the JavaScript language itself, without having to spend a penny on e-books to learn the weird stuff in the language.

Using TypeScript with ESLint in the react project will help us when we ignore how react works:

5. Expansion: any cool theme in the Visual Studio market

Developing React applications and a cool VSCode color theme is a key asset that keeps me entertaining, resulting in better code quality.

It is important to use your favorite theme because the color code of the React component has a specific look or feel, which will help you develop React applications more easily, as follows:

Non-component:

Components:

6. Expand: more beautiful

If you are not using something more beautiful, then please put everything down and use it.

7. Features: bread crumb navigation (Breadcrumbs)

Oh, my God, how time flies. It feels like releasing Breadcrumbs with VScode yesterday.

This makes it easier for me to develop React, even when I least expect it. Given the nature of React's component child / parent hierarchy, this is just fine when developed in React (as long as the directory structure is built based on the hierarchy), because it basically indicates that the component file is derived from the parent directory (in most cases, the parent directory is always the default value exported from the index.tsx file):

The above Breadcrumbs shows that Add is a child of Birthdays, which is a route in the management 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. Extending: user code snippet

With the development of React, we have seen many great things happen, and the user code snippet is one of them.

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

I work for a company whose platform is built on React, and to my surprise, there are some people who are not aware of this feature when developing with React.

So what does it do?

With this feature, you can create any custom code snippet that can be 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 React.use reducer API, we might need to declare an initial state, a reducer function, and something like [state,dispatch] = React.useReducer (reducer,initialState), or at least make it happen:

Const initialState = {/ /} function reducer (state = initialState, action) {switch (action.type) {default: return state}} function MyComponent () {const [state, dispatch] = React.useReducer (reducer, initialState) return}

Save valuable time and effort by putting this content into user clips:

{"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", "}"]}}

As long as you press the RSR key, this code is automatically generated.

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

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

{"border test": {"prefix": "b1", "body": "border: 1pxsolid red;"}, "border test2": {"prefix": "b2", "body": "border: 1pxsolid green;"}, "border test3": {"prefix": "b3", "body": "border: 1pxsolid magenta" "}," border test4 ": {" prefix ":" b4 "," body ":" border: 1pxsolid blue; "}," border test5 ": {" prefix ":" b5 "," body ":" border: 1pxsolid # fe7200; "}

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

{"import Buttonfrom 'components/Button'": {"prefix": "btt", "body": "import Buttonfrom' components/Button'"}}

Set / clean up something before each test:

{"beforeEach () = > {})": {"prefix": "bfe", "body": ["beforeEach () = > {", "$1", "})"]}}

Some fast lines are disabled:

{"/ / @ ts-ignore": {"prefix": "tsg", "body": "/ / @ ts-ignore"}, "eslint disable line": {"prefix": "eds", "body": "/ / eslint-disable-line"}}

Import React:

{"import react": {"prefix": "reaa", "body": "import Reactfrom 'react'"}}

This is not a complete list of the code snippets I use, but hopefully it will help you understand how much time and effort you can save with user code snippets.

Bonus: use ProjectSnippets to promote it to a level, which is a VSCode extension, except for providing the same functionality at the workspace level.

9. Shortcuts: find all matches in the current file

Highlight the selected keyword in the file and press Ctrl+Shift+L to select all occurrences of the keyword.

This is useful when renaming a component, because obviously, when a component has children, we appear at least three times:

Import React from'react'function App () {return Usefulcontent} function Root () {return (

Will I even berendered?

)}

If you want to rename the app to a different name, you must select the component declaration and two references in the root render block.

10. Shortcuts: copy lines up / down

Ctrl+D can save a lot of time.

At this point, the study on "what are the ways for VSCode to speed up the React development process" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.