Immensely Upgrade Your Development Environment With These Visual Studio Code Extensions

Let’s talk about code — Visual Studio Code

Indrek Lasn
Jun 23, 2018 · 5 min read
Image for post
Image for post

Let’s talk about code — Visual Studio Code.

Some of my readers requested that I write about the extensions I use — so here we go!

Image for post
Image for post

Our VSC will be a five-horned laser powered unicorn. Here are the most useful extensions I use every day!

If you’re new to VSC, click on the bottom icon on the sidebar to install extensions.

Image for post
Image for post

Material Theme

The most epic theme now for Visual Studio Code:

Image for post
Image for post

Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

Image for post
Image for post

Import Cost

This extension will display the size of the imported package, inline in the editor. The extension utilizes Webpack with the babili-webpack-plugin in order to detect the imported size.

Image for post
Image for post

Indent-Rainbow

A simple extension to make indentation more readable.

Image for post
Image for post

IntelliSense for CSS Class Names in HTML

A VS Code extension that provides CSS class name completion for the HTML class attribute, based on the definitions found in your workspace or external files, referenced through the link element.

Image for post
Image for post


Prettier — Code Formatter

Can’t live without this one! A VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

Image for post
Image for post

React Native Tools

Code hinting, debugging, and integrated commands for React Native.

Image for post
Image for post

Sublime Text Keymap and Settings Importer

Image for post
Image for post

This extension converts Visual Studio Code bindings to the same as ST3. Give it a spin and try this:

cmd ⌘ + P — Mac

ctrl + P — Windows

Image for post
Image for post

You can go to files, and if you add the > symbol in front of the search you can search for actions — like toggling the built in terminal, installing extensions, and so on.

Big win for those of us who are used to ST3 shortcuts.


npm Intellisense

VSCode plugin that autocompletes npm modules in import statements.

Image for post
Image for post

Lit-html

Adds syntax highlighting and language support for HTML, inside of JavaScript and TypeScript tagged template strings, as is used in lit-html and other frameworks.

Image for post
Image for post


Git Project Manager

Git Project Manager (GPM) is a Microsoft VS Code extension that allows you to open a new window, targeting a Git repository directly from a VS Code window.

Image for post
Image for post

Git History

View a Git log or file history, and compare branches or commits.

Image for post
Image for post

File Utils

A convenient way of creating, duplicating, moving, renaming and deleting files and directories.

Image for post
Image for post

Bracket Pair Colorizer

A customizable extension for colorizing matching brackets. Very useful when working with a lot of callbacks.

Image for post
Image for post

Color Highlight

This extension styles CSS/web colors found in your document.

Image for post
Image for post

CSS Peek

Allow peeking to CSS ID and class strings as definitions, from HTML files to respective CSS. Allows peek and go to definition.

Image for post
Image for post

Debugger for Chrome

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome debugger protocol.

Image for post
Image for post

Quokka.js

Live Scratchpad for JavaScript (useful for quick demos).

Image for post
Image for post



WakaTime

Metrics, insights, and time tracking — automatically generated from your programming activity.

Image for post
Image for post


Code Runner

Run a code snippet or code file for multiple languages.

Image for post
Image for post

PHP IntelliSense

Advanced autocompletion and refactoring support for PHP.

Image for post
Image for post
Image for post
Image for post



React.js Code Snippets

Code snippets for React.js development in ES6 syntax.

Image for post
Image for post

If you know any handy extensions, please post them below and I’ll add them to the list.

If you want to take your JavaScript abilities to the next level, I’d recommend reading the “You Don’t Know JS” book series.

Thanks for reading!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Fullstack web engineer, startup founder, I help teams building new products, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Fullstack web engineer, startup founder, I help teams building new products, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store