by Indrek Lasn

✨ Immensely upgrade your development environment with these Visual Studio Code extensions

Visual Studio Code

Let’s talk about CodeVisual Studio Code.

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

VSC Download link: https://code.visualstudio.com/

This article was originally published at strilliant.com — please give the original some love! ❤

✨ Immensely upgrade your development environment with these Visual Studio Code extensions
Let's talk about Code--Visual Studio Codewww.strilliant.com

Our VSC will be a five horned laser powered unicorn — here are the most useful extensions I use everyday!

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

Material Theme

Material Theme

The most epic theme now for Visual Studio Code:

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Auto Import

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

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Import Cost

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

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Indent-Rainbow

A simple extension to make indentation more readable.

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense for CSS class names in HTML

A VSCode 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.

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

An easy way to preview SVGs.

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Prettier — Code formatter

Can’t live without this one — VSCode package to format your JavaScript / TypeScript / CSS using Prettier.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

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

https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap and Settings Importer

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

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

You can go to files, and also 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.

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

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.

https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

This extension is intended to provide the missing functionality that should be built-in out of the box in VSCode — to highlight matching opening or closing tags.

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Git Project Manager

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

https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

View a git log or file history, and compare branches or commits

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

File Utils

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

https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Bracket Pair Colorizer

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

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Color Highlight

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

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

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

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Debugger for Chrome

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

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

Live Scratchpad for JavaScript (useful for quick demos).

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

Highlight trailing spaces and delete them in a flash!

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

WakaTime

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

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

Vue tooling for VSCode

https://marketplace.visualstudio.com/items?itemName=octref.vetur

Code Runner

Run a code snippet or code file for multiple languages.

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

PHP IntelliSense

Advanced Autocompletion and Refactoring support for PHP.

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

vscode-icons

Icons for VSCode.

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Jest

Use Facebook’s Jest With Pleasure.

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

React.js code snippets

Code snippets for React.js development in ES6 syntax.

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

Thanks for reading! Check out this VSCode mega thread for more. If you know any handy extensions, please post them below and I’ll add them to the list ❤

I share a lot of treats and goodies on Twitter, might be worth your time to check out as well.

Indrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek): "I just published "Introducing https://t.co/wIhICx6ayg"…twitter.comHow to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Separating your frontend and backend has many advantages:medium.freecodecamp.orgThe ultimate list of resources for mastering Swift and iOS development — 2018 edition
Swift is a general-purpose, multi-paradigm, compiled programming language developed by Apple Inc. for iOS, macOS…hackernoon.comThe secret to being a top developer is building things! Here’s a list of fun apps to build!
You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…medium.freecodecamp.orgLet’s Build: Cryptocurrency Native Mobile App With React Native + Redux
Demo — What we will be buildingmedium.com