Vs Code Extensions that really help out!

The thing that makes a mechanic good at what they do are the tools in their toolbox. The same goes for coding. A software developer is only as good as his or her tools. Using the right ones can make for a more efficient and more elegant coding process.

The preferred coding IDE, integrated development environment, is VScode, Visual Studio code. The best part about VScode is the vast number of extensions offered.

I will share with you a few of my favorites.

Note all of these are offered on Visual Studios MarketPlace

1. REST Client

Extension

This extension allows you to send an HTTP request and see the response in the IDE itself. You no longer need to use post man ;).

This extension alone has over 1,000,000 installs. Its extremely popular. Since Ive begun using this extension, my time between developing and waiting on postman has drastically fell.

Sending a request is really easy with this extension. The code is easy to read and plenty of options to change. One line of code and you can send a GET request!

2. Beautify

Extension

Like looking at clean code? Then this is for you. Beautify allows you to get your code clean and on point. It supports JS, HTML, CSS, SASS, and JSON.

The entire extension is fully customizable: ident size, end with new line, etc. Its also possible to customize by coding language.

This one has over 5,000,000 downloads.

3. Bracket Pair Colorizer

Extension

Tired of losing which pairs of [] , {} , or ()? Bracket Pair Colorize solves this for you! It gives each pair a specific color based on indention and placement in the nesting.

The colors are fully customizable and vary in range.

I have been using this since day one and this extension has really effected my code the most!

4. Auto Rename Tag

Extension

This extension does one very simple thing...that will change your life!

The extension automatically changes paired up HTML5 tags. Change an opening tag? Closed one: done!

This has saved me an EXTREME amount of time when coding!

5. Material Themes

Extension

I always found myself hating the default Visual Code Themes. Bright white? AH MY EYES! DARK? AH MY EYES x2!

With Material Themes you can customize the way your IDE looks. They offer a wide range of colors, and premade palettes. In fact, most palettes are also customizable.

The one I have been using since the install has been Palenight

Also checkout their icon theme: I use that also... icons

6. Javascript (ES6) Code Snippets

Extension

This extension has dozen of snippets you can use to generate es6 code. A list of commands can be found here.

This extension has saved me so much time. Rather than taking the extra seconds to type something like

arr.forEach(() => {})

I could simply do

fre 

7. ES7 React/Redux/GraphQL/React-Native snippets

Extension

Typing out entire React components? Thing of the past!

This extension works similarly to the one listed above, but for react!

Instead of doing something like this

import React from 'react';

const Example = () => {
  return (
  )
}
export default example;

you can simple type

racfe

This will insert the typed out version. It uses the file name as the functional component name.

However! This is just one of the features of this extension, it can do many other shorthand inserts: check them out here