Immensely Upgrade Your Development Environment With These Visual Studio Code Extensions
Let’s talk about code — 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!
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.
The most epic theme now for Visual Studio Code:
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
A simple extension to make indentation more readable.
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
An easy way to preview SVGs.
Prettier — Code Formatter
React Native Tools
Code hinting, debugging, and integrated commands for React Native.
Sublime Text Keymap and Settings Importer
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.
VSCode plugin that autocompletes npm modules in import statements.
GitLens — Git Supercharged
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.
View a Git log or file history, and compare branches or commits.
A convenient way of creating, duplicating, moving, renaming and deleting files and directories.
Bracket Pair Colorizer
A customizable extension for colorizing matching brackets. Very useful when working with a lot of callbacks.
This extension styles CSS/web colors found in your document.
Allow peeking to CSS ID and class strings as definitions, from HTML files to respective CSS. Allows peek and go to definition.
Debugger for Chrome
Highlight trailing spaces and delete them in a flash!
Metrics, insights, and time tracking — automatically generated from your programming activity.
Vue tooling for VSCode
Run a code snippet or code file for multiple languages.
Advanced autocompletion and refactoring support for PHP.
Icons for VS Code.
Use Facebook’s Jest With Pleasure.
React.js Code Snippets
Code snippets for React.js development in ES6 syntax.
If you know any handy extensions, please post them below and I’ll add them to the list.
Thanks for reading!