Improve your productivity when working with React by making these changes in Visual Studio Code
Tags: react, javascript, beginners, vscode
Published: 2020-07-05 03:47:24

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 get started**

### Enable emmet for React

If you are HTML/CSS developer, then you might already be aware of the emmet plugin.
It provides Autocompletion for HTML and CSS code by reducing the need for extra typing.
It’s already included for all HTML and CSS files by default in VS code but we need to do some extra configuration to enable it for React.

**Steps to enable:**

* 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

![Emmet Setting](https://gist.githubusercontent.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/02c90dc4359fd7b7425557ff23f14678d1d587b1/emmet1.png)


*  On the left side, expand the extension menu and click on `emmet`

![Emmet Setting](https://gist.githubusercontent.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/02c90dc4359fd7b7425557ff23f14678d1d587b1/emmet2.png)


* Then click on `"Edit in settings.json"` link under `"Include Languages"` section


* Once opened, add `"javascript": "javascriptreact"` under `"emmet.includeLanguages"` and save the file.

```js
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}
```

![Emmet Setting](https://gist.githubusercontent.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/02c90dc4359fd7b7425557ff23f14678d1d587b1/emmet3.png)


* You're done.

Now open any component file in `React` and type `.container` and press the tab key and it will autocomplete it to

```js
<div className="container"></div>
```

or type `ul.list` and press tab to convert it to

```js
<ul className="list"></ul>
```

This little configuration will save you a lot of time by removing the need of typing `className` every time to add a new `class` in React.

**Extra Tips:**

1. If you have created a new `.html` file then instead of typing the `doctype`, `head`, `meta` and `body` tags yourself, just type exclamation mark (`!`) and press tab and emmet will add the default HTML code
   
2. If you want to generate some random lorem ipsum text then just type `p*4>lorem` and press tab and emmet will add 4 paragraphs with some random lorem ipsum text
   
3. To add multiple classes like `list` and `item` to the same element, type `.list.item` and press tab which will be converted to

```js
<div className="list item"></div>
```

If you are in a CSS file, to add any property you can use shorthand syntax. For ex. To add `letter-spacing` of `10px` just type `ls10` and press tab and it will be converted to `letter-spacing: 10px`

To learn more about emmet shortcuts, click [HERE](https://docs.emmet.io/)

---------


### Automatically format code on file save

Install the `Prettier` extension for VS Code which is an Opinionated Code Formatter which formats code written in Javascript, Angular, Vue, React, Typescript and many other languages.

**Installation:**

1. Click on the extension's icon in VS Code
2. Search for `"prettier"`
3. You will see the extension from Prettier
4. Click on the install button
5. Hit the Reload button or restart the VS Code, once the extension is installed

![Prettier Extension](https://miro.medium.com/max/700/1*RnAdm5MPMbK94-w0CgHrNg.png)

**Usage:**

- To automatically format the file on saving, In Visual Studio Code, press `Control + Shift + P` or `Command + Shift + P (Mac)` to open the command palette and type `setting` and then select `"Preferences: Open User Settings"` option
- Search for `"format on save"` setting and check the checkbox.

![Format on save](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/51bdda81bdb784934b3b1d1abd967befe47b3dd2/format_save.png)

That’s it! Congratulation! You have configured prettier to format as per the default settings.

Now, open any React code. Let’s say your code looks like this

![Format1](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/51bdda81bdb784934b3b1d1abd967befe47b3dd2/format1.png)

If you save the file using `Ctrl + S` or `(Command + S for Mac)`, the prettier will format your code as shown below

![Format2](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/51bdda81bdb784934b3b1d1abd967befe47b3dd2/format2.png)

This is much nicer and as per the React style guidelines.

If you have code like this

![Format3](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/51bdda81bdb784934b3b1d1abd967befe47b3dd2/format3.png)

Then on saving, it will be formatted like this

![Format4](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/51bdda81bdb784934b3b1d1abd967befe47b3dd2/format4.png)

So now, you don’t have to worry about adding or removing space or moving code to the second line if it does not fit on one line. Prettier does that job for you automatically.

This will make you more productive as you will not be wasting your time in formatting code

Sometimes, it may happen that, you don't want the formatting done by prettier and you want to keep your own formatting for a particular file, then you can follow the following step

* In Visual Studio Code, press `Control + Shift + P` or `Command + Shift + P (Mac)` to open command palette and type `save` and then select `"Save without Formatting"` option

![Save without Formatting](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/816de4360f955dec32c8325bd5e84cf28c72d5eb/no_formatting.gif)

#### Advanced Configurations

If you want more control over the formatting, prettier also allows that.

Create a file with the name `.prettierrc` (dot prettierrc) in the root of your project and add the configuration as required

For example, add the following JSON in the `.prettierrc` file

```js
{
 "singleQuote": true,
 "trailingComma": "none"
}
```

SingleQuote: true will use single quotes instead of double quotes for strings in your code

trailingComma: "none" will remove all trailing commas from object declaration in your file

You can find all the configuration options [HERE](https://prettier.io/docs/en/options.html).

#### Automatically add a semicolon at the end of the line

By default prettier does not add the semicolon after each line as its optional.<br /> So If you want a semicolon, you have two options

* Add the following code in your .prettierrc file

```js
{
  "semi": true
}
```

* 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 search for `prettier semicolon` and check the checkbox

![Enable Semicolon](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/aa45636eb97fac7c1445de01285283d44bd781e2/semicolon.png)

![Add semicolon](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/d274c6c22e9ce7d225db08b3399df9d13aaf6127/semi.gif)

As can be seen above, after we enable to option to add a semicolon, when we save the file using `Ctrl + S` or `(Command + S for Mac)`, a semicolon will be automatically added to every statement.


-------------------------

### Install React snippets extension

Install the `ES7 React/Redux/GraphQL/React-Native snippets` extension for VS Code

![Snippets Extension](https://gist.githubusercontent.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/b999122cd949e3381589782b76b473c9d472533b/extension2.png)

This extension allows us to quickly add the snippets to our code when working with React.

You just need to type initial characters in the file and press enter to complete that snippet.

Following are some of the most widely used prefixes which allow us to add the snippet:

1. imr : import React from 'react'
2. imrd: import ReactDOM from 'react-dom'
3. imrc: import React, { Component } from 'react'
4. rcc: add react class-based component code
5. rfc: add react functional component code
6. est: add state to the component
7. sst: add this.setState call
8. cdm: adds componentDidMount lifecycle method
9. cdu: adds componentDidUpdate lifecycle method

![Snippets Extension](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/dd3dbe5cf6911374d10c388350e37792c072aa5c/extension1.gif)

### Some more prefixes:

1. rafce: adds a functional component with the export statement (This is one of my favourite)
2. rce: add react class-based component with the export statement
3. impt: add prop types import
4. clg: add console.log statement

![Snippets Extension](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/b999122cd949e3381589782b76b473c9d472533b/extension3.gif)


There are a lot of prefixes which are very handy which you can find [HERE](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)


**Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox [here](https://yogeshchavan.dev).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)