Matthew Brophy

Posted on Apr 9, 2019

Customize & Improve VS Code

#beginners #webdev #react #productivity

As web developers we spend a great amount of time staring at our IDE (Integrated Development Environment. It only makes sense that we should try to make that experience as pleasant and painless as possible. My personal choice of IDE is Microsoft Visual Studio Code. While it is pretty bare-bones out of the box, there is a practically endless amount of customizations and extensions that can be added to create quite the perfect well-polished tool to suit whatever your needs may be along your development Journey. Following are some of my favorite extensions and customizations that help me push through the code.

Extensions

VS Code comes along with a robust, active developer community that lives to make developers lives easier through the creation and maintenance of some amazing extensions. In fact, there are so many available to do just about anything you can think of, that it can be quite overwhelming trying to choose which ones you want to implement into your development environment. My personal advice would be that when you think of something you want to improve, start by installing one extension and seeing if that serves your needs before installing another one with a similar name/function.

Quality of Life Extensions

Simple React Snippets

One of my favorite types of extensions. Whichever language you happen to be using, there are robust code snippet extensions that exist to save you numerous repetitive key strokes. Currently, I am doing a majority of my work in React and below you will find my current favorite snippet package. Note, if you are still in school or are in a bootcamp you may want to hold off on using too many code snippet extensions. While they are extremely helpful, it may be best to solidify understanding of syntax and commit it to memory before utilizing a snippet to do the heavy lifting for you.

Contains a short list of keystroke commands that save you from repetitive work like creating scaffolding for classes or importing components.



Typing "imrc" produces:

import React, { Component } from 'react';

Typing "ccc" produces:

class  extends Component {

  constructor(props) {

    super(props);

    this.state = {  }

  }

  render() { 

    return (  );

  }

}

export default ;

There are tons of snippet extensions for just about every language out there.

Code Spell Checker

Does exactly what it sounds like. A simple spellchecker that responds well to camelCase code.

Babel Javascript

An excellent syntax highlighter for Javascript. It will highlight a portion of code when the syntax is not going to make it past the compiler. Syntax highlighters also exist for most languages out there.

Open HTML in Default Browser

Another extremely accurate named extension. It adds an option that appears when right-clicking on a file in the file-browser pane to simply open that given file in whatever is set as your default browser.

Path Intellisense

Adds intellisense auto-complete to file paths. For instance if you are importing a component from another file in your file tree, it will make suggestions for pathing:

Sensitive Replace

When replacing multiple selections, it will preserve the casing on each item even if they are all differently cased.

Prettier Code Formatter

One of my favorite extensions at the moment. It formats Javascript/TypeScript/CSS on save. It will format your code based on the length of lines, and other attributes to make your code more readable and a lot "Prettier" It will also automatically delete trailing commas, and unnecessary parenthesis and semicolons. It it completely customizable in the event you want it to ignore its formatting rules.

Before Prettier:

After Prettier:

Aesthetic Extensions

If we are going to stare at something the majority of the time we are awake, we might as well make it as pleasant to our eyes as possible. VS Code has thousands of themes (most free, some that require purchase) to make our coding experience just the way we want it. Certain color themes are also much easier on the eyes than the default code or provide specific color scheming that makes it much easier to identify specific components and/or attributes of an App.

Dracula Official & Night Owl

My favorite theme at the moment. I think the colors are fun and it makes it extremely easy to identify different aspects of the code I am working on:

Another one of my favorite themes. Similar colors, really easy on the eyes at night:

Material Icon Theme

Add some flair to your icons:

Finding a Font You Like. My Choice is Fira Code

Fira Code has Ligatures enabled. This just means that it supports symbols taking the place of common comparison operators:

Final Thoughts and one more Customization

In summation, make VS Code your own. Make it so you enjoy using it as much as possible and make it so it is pleasing to your eye. If you find yourself struggling with syntax or repeating the same keystrokes over and over again, go see if there is an extension that can make your life easier.

One last customization, get rid of the annoying "Parameter Hints" that blocks half of your screen as you type

This Pop-up is enabled by default. Sometimes it will block half of your screen and you will no longer be able to see your code. Navigate to your settings.json file and add the following line if you would like to disable this annoying suggestion box: