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
Visual Studio Code

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!

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

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.

Material Theme

Material Theme

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

Auto Import

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

Import Cost

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

Indent-Rainbow

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

IntelliSense for CSS Class Names in HTML

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


Prettier — Code Formatter

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

React Native Tools

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 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

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

Lit-html

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


Git Project Manager

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

Git History

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

File Utils

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

Bracket Pair Colorizer

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

Color Highlight

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

CSS Peek

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

Debugger for Chrome

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

Quokka.js

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



WakaTime

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


Code Runner

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

PHP IntelliSense

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



React.js Code Snippets

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

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

Engineer, founder. Let’s change the world together for the better. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade