5 React quick settings increase your work efficiency five times

As a React developer, the biggest improvement in your work is to spend the least time learning. Try to apply these techniques today, I promise you will save a lot of tedious work in daily coding, and enjoy more fun of React.

1. Tired of writing closing tags for every JSX element? Use Emmet .

As a React developer, you have written many JSX elements, most of which contain an opening and closing tag.

If you have not set up Emmet in React , you must manually write these two tags for each element. A better way is to use a tool called Emmet , which will automatically create the closing tag when you create the opening tag.

Set up Emmet with React in VSCode :

1. Go to code (at the top of the screen), then preferences , and then set in VSCode
2. In the options on the left, select Extension , then Emmet
3. Scroll to " contains the language " section, add the item input in JavaScript , and then enter the value added javascriptreact , then click on the " Add Item "

Just like that, Emmet increases your encoding speed by 100 %:

2. Tired of formatting the code manually? Use more beautifully.

Can you count the number of times the code is misaligned so you can try to adjust the spacing yourself? I don't even want to think about how much time I spent formatting my code!

If you are still trying to format the code manually, you need Prettier .

The beautiful name is aptly named: it converts misaligned code into a more beautiful formatted version.

Prettier can be used as a devDependency for a single JavaScript project, or it can be used in all projects through the Prettier VSCode extension. The advantage of using the VSCode extension is that every time you click Save, you can automatically format the JavaScript code.

This is how to set up Prettier to be used in all projects in VSCode :

1. Go to " Code " , " Preferences " and " Extensions "
2. Search for something more beautiful in the search input and press Enter (it should be the first one to appear)
3. Select the extension and click " install " (may need to reload to apply the extension)
4. Go to " Code " , " Preferences " and " Settings "
5. Search " format when saving " , and then select the " format when saving " check box next to the option

Now, every time you save, all the code you write will be perfectly formatted:

3. Do you need to write out every component you write using React fragments?

Usually, creating a lot of things in React and JavaScript projects requires a lot of boilerplate. Every time you write a component, you have to type every part of it - import React , create a function, and then export it from a file.

Are you tired of doing this? Everyone does this. This is why fragments of React exist .

In order to avoid again and again to write all the extra work the same code, use React the code segment . Code snippets allow you to use keyboard shortcuts to write every part of React code at once , without having to type them all manually.

For example, you don't need to write import React from'react' , but just write imr and press Tab to create the same content immediately. The excerpt is a huge time saver.

The following is how to use React code snippets in VSCode :

1. Go to " Code " , " Settings " and " Extensions "
2. Search for the React code snippet . There are many good code snippet extensions to choose from.
3. After installing the code snippet extension, check the available shortcuts and write down the most suitable shortcut.
4. When you type a shortcut, wait for the suggestion to appear in your code editor, and then click Tab (if you want to use other shortcuts, you can navigate with the arrows in the list)

You will be shocked to manufacture components at such a fast speed:

4. Do you manually import all components? Please use automatic import instead.

One of the most tedious things in creating a React application is importing packages and components from other files.

This is a very repetitive operation, and may require a lot of effort to manually import everything (plus corrections in case of typing errors).

Don't remember to find and manually import components and packages, and let the code editor do it for you. You can automatically import any content by pressing the Tab key to select the content to be imported .

The following is how to automatically import packages and components in VSCode :

1. Go to " Code " , " Preferences " and " Settings "
2. Search for automatic import and make sure the " Enable automatic import " checkbox is checked
3. Return to the project, enter the name you want to import, click the arrow in the option suggested by the editor, and then press Tab to immediately create an import statement for it.

When using automatic import, it makes work projects of any size easier because you no longer spend half the time writing import statements.

5. Did you manually delete unused imported goods? Use the organization import shortcut.

With everything more prettier than the code we wrote, VSCode gave us a so-called shortcut to organize imports , not just this. In fact, it does two things:

1. It organizes our import declaration in alphabetical order
2. Remove unused import statements (immediately fix warnings about unused imports)

Most importantly, this shortcut does not need to be set. The method of use is as follows:

1. Go to view and select the command panel.
2. Search for the organization import and select it.
3. You should now organize your imports and delete all unused imports.

Note that you can also use the keyboard shortcut command/control + shift + o .

I still want to recommend the Python learning group I built myself : 721195303 , all of whom are learning Python. If you want to learn or are learning Python, you are welcome to join. Everyone is a software development party and share dry goods from time to time (only Python software development related), including a copy of the latest Python advanced materials and zero-based teaching compiled by myself in 2021. Welcome friends who are in advanced and interested in Python to join!