Skip to main content Jump to list of all articles

Top Savvy VS Code Extensions 2019

VS Code has become popular since its initial release in 2015. Released 1 year after Adobe Brackets and a year before Atom.  The battle of the text editors began to rival Commercial software Sublime Text. VS Code was designed to be a next-generation Code editor built on top of the Electron Framework. Its lightweight functionality and its extensible features make it fully compatible with the majority of programming languages. Microsoft has also made it cross-platform so it supports Windows, Mac, and Linux. It can even run as a portable app.

VS Code Editor

Why Choose VS Code?

Finding the right code editor can be a tedious task. Whether or not you have multiple Code Editors installed for different projects. For example, you might prefer PyCharm (which is technically an IDE) for working with Python or Atom for working with PHP or WordPress. Whatever choice you make is entirely up to you. There is no harm in trying new things. If you have a negative experience to start with, if it is buggy etc, then wait and try it after a few releases. Open Source software relies on developers working together to make improvements so progress can be slow and steady at times. Check out the following extensions available on the marketplace to extend your VS Code.

Web Development

Beautify

Does what it says on the tin. The beautify extension extends the built-in beautifier to make your JavaScript, JSON, CSS, Sass, and HTML code look better.

More Info

Prettier

Prettier is an alternative to beautify, above. I don’t recommend that you install both together, however, I find prettier better at formatting Vue files.

More Info

Live Server

A quick development live-server to view your HTML Files. Featuring live browser reload, HTTPS support, SVG support, hotkeys and more.

More Info

HTML Snippets

Adds full HTML5 markup tags including snippets and information regarding their use.

More Info

Color Manager

A VS Code colour picker and palette which opens up in a side view and adapts to the width of your theme.
It supports CSS-Colors, HEX, RGBa and HSLa and Google Material Design palette. Other features allow you to convert between colour values and insert using the VS Code’s IntelliSense widget.

More Info

Sass

Indented Sass syntax highlighting, autocomplete and Formatter for VS Code.

More Info

Live Sass Compiler

A customisable VS Code Extension that helps you to compile/transpile your SASS/SCSS files to CSS files. Its features include being able to export your CSS file in several ways, ie. expanded, compact, compressed or nested with a .css or .min.css extension. It has support for autoprefix and uses the live-server extension, above, to reload.  All can be controlled by a quick status bar control.

More Info

CDN List

Add Javascript and CSS libraries to your HTML files easily through an extensive and editable list of CDN links.

More Info

CSScomb

Coding style formatter for CSS, Less, SCSS or Sass which organises your code into beautiful and consistent stylesheets.
More Info

Web Accessibility

Web accessibility over the past few years has become an important addition to any website. Ths promising extension will highlight and give you hints of elements that you should consider changing. At the time of writing this extension is still in its infancy but will look forward to seeing how it progresses.

More Info

JavaScript (ES6) Code Snippets

This VS Code extension contains ES6 code snippets for JavaScript which also supports the following languages and their file extensions.

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

More Info

CommandList

If you use a terminal frequently you will find entering the same command, repeatedly, tedious. This extremely useful utility which allows you to save and display shell command snippets. You can save snippets in an individual project or global commands which you can use in all of your projects.

More Info

General Tools

Project Manager

Easily organise, manage and switch between projects using project manager for VS Code. Other features include saving the current workspace, adding favourites, opening projects in a new window.

More Info

Live Share

Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you’re using or app types you’re building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.

More Info

Path Intellisense

With over 1.9 million installs Path Intellisense is a Visual Studio Code timesaving extension that autocompletes filenames.

More Info

TODO Tree

This extension quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane and highlights them in open files. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

More Info

SVG Viewer

Easily open and view SVG files in Visual Studio Code.

More Info

Placeholder Images

Generate and insert placeholder images into your HTML in Visual Studio Code using various 3rd party services like Unsplash, placehold.it, LoremFlickr and more. Choose image width, height, text and colours

More Info

Markdown Preview

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc.

More Info

JSON to CSV

A Visual Studio Code extension to convert the current editor selection from JSON to CSV, and vice versa.

More Info

Simple CSV Editor

This Visual Studio Code extension allows you to  show, edit and CSV data inside with this simple editor

More Info

Conclusion

This is far from an exhaustive list of the most popular extensions but with so many to pick from I hope you have found some that will be of use. Let me know your thoughts on your favourite extensions and the reasons why you have chosen them.

Comments are closed.