Visual Studio Code treasures
a list of Visual Studio Code extensions I can’t live without
@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.
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…code.visualstudio.com
How to install extensions?
Installing extensions in Visual Studio Code is a breeze! Launch Visual Studio Code Quick Open
⌘P) and paste the extension installation command in there
ext install prettier-vscode
This extension enables you to use Prettier in your projects.
Extension for Visual Studio Code - VS Code plugin for prettier/prettiermarketplace.visualstudio.com
You can learn more about prettier by watching this React Conf video.
This extension enables you to use Quokka.js in your projects.
Start on current file from the quokka.js command list or press
This extension enables you to display import/require package size inside the file you are working in.
Extension for Visual Studio Code - Display import/require package size in the editormarketplace.visualstudio.com
Extension for Visual Studio Code - Integrates ESLint into VS Code.marketplace.visualstudio.com
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.
Extension for Visual Studio Code - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview…marketplace.visualstudio.com
Because we all ❤ Markdown, don’t we?
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
Extension for Visual Studio Code - Easily switch between projectsmarketplace.visualstudio.com
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
This extension enables you to synchronize: settings, snippets, themes, file icons, key bindings, workspaces and extensions across multiple machines using GitHub gist.
Extension for Visual Studio Code - Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces…marketplace.visualstudio.com
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.
Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Textmarketplace.visualstudio.com
This extension enables auto completion of file paths in your HTML tags.
Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenamesmarketplace.visualstudio.com
Auto rename tag
This extension allows you to automatically rename paired HTML/XML tag.
Extension for Visual Studio Code - Auto rename paired HTML/XML tagmarketplace.visualstudio.com
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.
Extension for Visual Studio Code - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current…marketplace.visualstudio.com
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.
Extension for Visual Studio Code - Modern CSS/SCSS/Less lintermarketplace.visualstudio.com
Don’t forget to add a .stylelintrc config file to your project root. https://stylelint.io/user-guide/configuration/
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.
Extension for Visual Studio Code - Supercharge Visual Studio Code's Git capabilities - Visualize code authorship at a…marketplace.visualstudio.com
This extension allows you to highlight TODOs, FIXMEs, and any keywords, annotations.
Extension for Visual Studio Code - highlight TODOs, FIXMEs, and any keywords, annotations...marketplace.visualstudio.com
This extension enables you to view SVG’s on the fly, just right click the file and view.
Extension for Visual Studio Code - SVG Viewer for Visual Studio Code.marketplace.visualstudio.com
This extension enables you to view color information specifics on a color entry in CSS.
Extension for Visual Studio Code - Provides quick information about css colorsmarketplace.visualstudio.com
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.
Extension for Visual Studio Code - Icons for Visual Studio Codemarketplace.visualstudio.com
You can see it in action here
VS Code Spotify
This extensions allows you to use Spotify inside Visual Studio Code.
Extension for Visual Studio Code - Use Spotify inside vscode.marketplace.visualstudio.com
This extension allows you to do evaluate your math.
Extension for Visual Studio Code — Select some math, evaluate itmarketplace.visualstudio.com
This extension allows you to insert incrementing/decrementing numbers with a custom starting point.
Extension for Visual Studio Code - Insert increasing numbersmarketplace.visualstudio.com
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, click 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.