A few changes to VS Code that will set you apart from others and increase your productivity rate.

A few changes to VS Code that will set you apart from others and increase your productivity rate.

One of the popular code editors used by a lot of developers is Microsoft's Visual Studio Code. What sets it apart from other code editors like Atom or Sublime is its extendability and wide range of support and features for a lot of languages.

Vs Code is incomplete without its marketplace and extension window. Now, many users are oblivious to this amazing feature that they can take complete use of. Not only they can install basic and IntelliSense support for various languages, but also you can install various themes, fonts, icons, and many more using this marketplace.

Here are a few extensions that you should consider installing

A few good Vs code themes:

Ayu:

Ayu is an amazing theme collection for Vs code. It has both dark and light modes to choose from and both look amazing. It has a total of 6 themes including both light and dark gradients. Steps to install the Ayu theme collection.

Go to Vs code extensions by clicking on this sidebar icon.

extensions icon.jpg

After clicking on this icon, it should take you to the extensions which you have installed previously. If you are new to Vs code it should be empty.

Now type the word Ayu in the search bar.

Ayu.jpg

Now click on the first option which is Ayu by teabyii and click on install.

How to set the color theme in Vs code. press Ctrl+K and Ctrl+T at the same time. A theme palette should appear. Now you must be seeing theme names starting with Ayu. If you don't see restart your Vs code. Choose your desired theme and you are good to go.

Cobalt2:

Cobalt2 is also an amazing theme. It has very good gradients. To install Cobalt2

Repeat the same process until searching the theme in the search bar. Now replace Ayu with Cobalt2.

Select the one where it says Cobalt2 by wes bros.

Vs code folder icons:

Material Icon theme:

Material icon theme is simply outstanding. It has unique icons for almost every type of folder. Be it an src folder or an assets folder, the icon differs. To install Material Icon theme.

Type material icon theme in the extension search bar and install the one which says Material Icon Theme by Philipp Kief

Prettier:

Prettier is a great tool if you want to indent your code properly. People having problems with indentation will find this extension useful. To install Prettier.

Type prettier in the search box and install the one which says Prettier - Code Formatter by Prettier.

Live Server:

Live Server is an extension that launches a development server for HTML code. This is the same as clicking on the HTML in your file explorer but much easier. To install Live Server.

Type Live Server in the extension search box and install the one which says Live Server by Ritwick Dey

ES7 React/Redux/GraphQL/React-Native snippets:

ES7 React/Redux/GraphQL/React-Native snippets gives boilerplate snippet code for various frameworks like React, React-Native, and GraphQL. This is really useful when you have many files but the boilerplate is almost the same and you have to type everything over and over again. To install ES7 React/Redux/GraphQL/React-Native snippets

Type ES7 React/Redux/GraphQL/React-Native snippets in the search box and install the one which says ES7 React/Redux/GraphQL/React-Native snippets by dsznajder

Auto Close Tag:

Auto Close tag closes a tag when you open it saving your effort to close it every time. I can't imagine my life without this extension. To install Auto Close Tag

Type auto close tag in the search box and install the one which says Auto Close Tag by Jun Han

Auto Rename Tag:

Auto Rename Tag renames the closing tag when you rename the starting tag and vice versa. This extension saves time when you have dozens of tags and you can't figure out which is closing what. To install Auto Rename Tag

Type auto rename tag in the search box and install the one which says Auto Rename Tag by Jun Han.

The last and final extension is

Bracket Pair Colorizer:

Bracket Pair Colorizer colors the starting and the ending curly bracket or a curved bracket. This helps in figuring out which bracket pairs with which. To install Bracket Pair Colorizer

Type Bracket Pair Colorizer in the search box and install the one which says Bracket Pair Colorizer by CoenraadS

I am sure these extensions will make you stand out from others and increase your productivity rate!