DEV Community

Cover image for Improve your productivity when working with React by making these changes in Visual Studio Code

Improve your productivity when working with React by making these changes in Visual Studio Code

Yogesh Chavan on July 05, 2020

In this article, we will see some of the settings you can do in Visual studio code to improve your productivity when working with React So Let's g...
Collapse
 
naingaungphyo profile image
Naing Aung Phyo

Thanks for awesome guide!
I have a question about ES7 React snippets extension.
For example, if we use imr, there will be import statement but there is no semicolon at the end. Do you have any idea about how to include it?

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • Edited

Thank you. For adding semicolon, you need to add semi: true property to .prettierrc file. Alternatively you can search for prettier semicolon in visual studio code user setting through command palette and enable semicolon

Collapse
 
naingaungphyo profile image
Naing Aung Phyo • Edited

So does it mean that, I can't add semicolon without using prettierrc; no setting in snippets extension.

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

I mean In Visual Studio Code, press Control + Shift + P or Command + Shift + P (Mac) to open command palette and type setting and then select "Preferences: Open User Settings" option and then search for prettier semicolon

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

If you enable there, then there is no need of .prettierrc for adding semicolon

Thread Thread
 
naingaungphyo profile image
Naing Aung Phyo

Thanks, it is working now.
So it means I need to use in combination of prettier(prettier semicolon setting true) + user setting ("editor.formatOnSave": true) to add semicolon.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Hi James, Can you please make sure you've installed the correct extension?

You can also try restarting the Visual Studio Code IDE.

Try rafce instead of rce to check If that works and wait till it shows the autocomplete snippet before hitting the enter key after typing rafce

Collapse
 
arung86 profile image
Arun Kumar G

I had forgotten Lorem short cut in Emmet, good tips !
just enabled emmet with my react project

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Awesome 👍