Visual Studio Code treasures

a list of Visual Studio Code extensions I can’t live without

It has almost been a year since I published my story about Atom the hackable text editor from our friends at GitHub

In a year lots have happened, I switched from doing PHP full time to doing JavaScript full time. With that change also came the change of editors professionally I mostly used WebStorm and in my spare time, I switched from Atom to Visual Studio Code.

@Microsoft did an exceptional job by creating a super performant and flexible editor. There’s a big community behind it and it’s constantly improving. Besides flexibility and performance, it also offers IntelliSense, interactive debugging and build-in GIT commands.

If you haven’t switched yet, give it a try and let me know what you think about it.

How to install extensions?

Installing extensions in Visual Studio Code is a breeze! Launch Visual Studio Code Quick Open Ctrl+P(⌘P) and paste the extension installation command in there ext install prettier-vscode

Another thing you can do is open the extensions marketplace by clicking on the extension icon in Visual Studio Code

The list

Prettier

This extension enables you to use Prettier in your projects.

Prettier is an opinionated code formatter with support for: JavaScript, (including ES2017) JSX, Flow, TypeScript, CSS, LESS, SCSS, JSON and GraphQL

You can learn more about prettier by watching this React Conf video.

Quokka

This extension enables you to use Quokka.js in your projects.

Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.

Use command Start on current file from the quokka.js command list or press Ctrl+K(⌘K)

Import Cost

This extension enables you to display import/require package size inside the file you are working in.

ESLint

This extension enables you to use ESLint. ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

Markdown all in one

This extension enables you to have keyboard shortcuts (toggle bold, italic, code span and heading), a table of contents generator, automatically show preview, list editing and much more.

Because we all ❤ Markdown, don’t we?

Project manager

This extension allows you to manage multiple projects inside visual studio code, the projects are listed in a projects.json that gives you full control over names and paths

Regex previewer

This extension enables you to validate your regular expressions in real-time.

Shows the current regular expression matches in a side-by-side document. This can be turned on/off with Ctrl+Alt+M (⌥⌘M).

Settings sync

This extension enables you to synchronize: settings, snippets, themes, file icons, key bindings, workspaces and extensions across multiple machines using GitHub gist.

It basically does the same as sync-settings did in Atom

Auto close tag

This extension allows you to automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

Path intellisense

This extension enables auto completion of file paths in your HTML tags.

Auto rename tag

This extension allows you to automatically rename paired HTML/XML tag.

Change case

This extension enables you to quickly change the case of the current selection or current word, you can change the cases to camelCase, CONSTANT_CASE, snake_case, kebab-case, etc.

Stylelint

This extension enables you to use Stylelint in your project, Styelint is a modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets.

Don’t forget to add a .stylelintrc config file to your project root. https://stylelint.io/user-guide/configuration/

Git Lens

This extension supercharges the built-in Visual Studio Code Git capabilities. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparison commands, and so much more.

TODO Highlight

This extension allows you to highlight TODOs, FIXMEs, and any keywords, annotations.

SVG Viewer

This extension enables you to view SVG’s on the fly, just right click the file and view.

Extra

Color Info

This extension enables you to view color information specifics on a color entry in CSS.

VScode icons

This extension enables you to have specific file icons for almost every extension. By default Visual Studio Code now uses seti as icon pack, this is why I didn’t list VScode icons in the main list.

You can see it in action here

VS Code Spotify

This extensions allows you to use Spotify inside Visual Studio Code.

Calculate

This extension allows you to do evaluate your math.

Insert Numbers

This extension allows you to insert incrementing/decrementing numbers with a custom starting point.

Did I miss something powerful? ⚡

If there’s a good extension available that’s not listed, please let me know in the comments. I tried to create a list of extensions that fit well into the generic workflow of a web developer. I might do a write up on specifics if requested, there are pretty powerful extensions out there if you are an Angular or React developer.


Thank you for taking the time to reading this story! If you enjoyed reading this story, clap for me by clicking the 👏🏻 below so other people will see this here on Medium.

You can follow me on Twitter @0x1ad2 and feel free to tweet me anything!

Also, I work at Wehkamp.nl one of the biggest e-commerce companies of 🇳🇱
We do have a Tech blog, check it out and subscribe if you want to read more stories like this one. Or look at our job offers if you are looking for a great job!