VS Code Extensions
Microsoft’s Visual Studio Code (VSCode) is a robust, open-source(!), multi-platform editor that has quickly become my code editor of choice. VSCode has some really great features like Intellisense, native Git support and Emmet implementation. It’s also extensible and quite customizable.
VS Code is a powerful editor right out of the box, but there are many great extensions available that add some great functionality and flavor. What follows is my top-10 list of the most useful extensions for front-end development in VSCode:
10. Dracula or One Dark Pro
Up first is one of two color themes. I get a lot of simple pleasure out of a well balanced color palette for my coding environment. I also find that dark color palettes are easier on my eyes, especially when working late at night.
Take your pick of the following two themes—they’re both nicely designed, highly rated, and have a wide fan base, which means that you’ll likely be able to find versions of each theme for a plethora of other apps.
Dracula is a popular theme that has support for lots of different applications, including Slack and Terminal. Dracula is my current theme of choice, though One Dark Pro is a close second.
Before switching to VSCode, I used Atom and really enjoyed Atom’s default theme, One Dark. One Dark Pro is a port of One Dark, which is quite nice on its own.
HTML CSS Support scans your project directory for CSS and SCSS files and provides HTML attribute autocomplete for classes and ids.
8. Code Runner
The npm extension provides a few helpful features when working with npm packages. Notably, it provides validation for
package.json files, alerting you to extraneous or outdated modules. It also provides shortcuts for common npm commands, like Rerun last script.
Setting Sync allows you to sync your editor settings, extensions, and snippets between different environments. It does this by using GitHub’s gist system as a central store. The process is simple and the extension makes it even simpler with detailed instructions. I use this extension regularly to sync settings between my work and home environments.
This is a particularly biased pick. Vue.js is my reactive library of choice. It’s incredibly easy to pick up, yet is powerful and extensible enough to be used for complex projects.
Vetur is an extension with a suite of features useful for working with Vue, like syntax highlighting and scaffolding for single file components, snippets, linting, etc.
Path Intellisense makes working with file paths incredibly simple. It parses your project directory and provides an inline intellisense menu for file paths in your project directory. This is especially hand when searching through deeply nested directories like
The ESLint extension greatly enhances this functionality by linting your code as you type. You can also autocorrect many errors right from the editor itself.
ESLint is incredibly useful and the one extension that I would recommend to any front-end developer.
VSCode is a powerful and robust editor even without any of the preceding extensions, but each extension provides some convenient and handy functionality. Be sure to visit the Visual Studio Marketplace where you can explore all sorts of extensions.
Do you have a favorite extension that you find essential? Let me know @splode.