Visual Studio Code is one of the most popular source code editors for web developers. It was released in 2015 by Microsoft and offers many awesome features you can use in your everyday workflow. Just to name a few, it has built-in Git support, a smart auto-completion tool called IntelliSense, an advanced debugger, and a powerful search tool. Besides, you can also fully customize Visual Studio Code and extend its functionality according to your needs.
You can find thousands of Visual Studio Code extensions in the Visual Studio Marketplace, with which you can add different functionalities to the editor. You can easily install them right from Visual Studio Code, by clicking the View > Extensions menu in the top bar.
1. Font Awesome Codes for HTML
If you frequently use Font Awesome icons in your designs this extension will be a godsend for you. Font Awesome is truly awesome, as you only have to use a pre-built CSS class to add an icon font to any HTML element. Currently, Font Awesome has almost 1,000 icons that will cover most of your needs. However, as there are so many icons, it’s not easy to exactly remember the name of each Font Awesome class you may want to use. Sure, you can look it up in the docs, but why would you do so if you have access to this handy extension?
The extension works out of the box. After installation, you only need to begin to type the class name (each Font Awesome class starts with the fa- prefix). Then, a dropdown list appears on the screen you can easily choose from.
2. CSS Peek
With the CSS Peek extension, you can add an inline CSS editor to Visual Studio Code. The feature was inspired by the similar capability of Adobe’s Brackets code editor. CSS Peek allows you to load a CSS file inline while editing an HTML file.
When you “peek” into a class, ID, or HTML tag, CSS Peek displays all the related CSS rules within the inline editor. This way you can edit your stylesheet right from your HTML file and you don’t have to go through the whole CSS to find all the related rules.
3. VS Color Picker
If you work a lot with colors you will love the VS Color Picker extension. It adds an easy-to-use color picker to your Visual Studio Code editor. When you begin to type a hex value into your CSS file by hitting the # key, the extension displays a tiny color picker on the screen. You can easily pick a color from the color wheel. Moreover, you can also pick a color from your screen (for example from a photo) by moving a tool over the color you want to use in your CSS.
4. VS Code Can I Use
Visual Studio Code has a superb extension that integrates the popular Can I Use web app with the code editor. Can I Use is the go-to browser compatibility checker for many web developers. It allows you to check browser support for HTML, CSS, SVG, and JavaScript elements, properties, functions, and other syntaxes.
With this handy extension, you can highlight any text string within your code and hit the Alt + i keyboard shortcut. The compatibility data appears at the bottom of the screen, in the status bar. The extension displays the support data for the five most widely used browsers: Chrome, Edge, Firefox, Internet Explorer, and Safari.
5. CSSTree Validator
The CSSTree Validator extension helps you write valid CSS code in Visual Studio Code. It validates your code against the W3C specifications and browser implementations. The extension highlights wrong property names, wrong values, missing semicolons, and other errors.
The validator runs in the background while you are working, so you can see the issues in real-time. It also gives you suggestions about how you can fix the errors. If you add this extension to your Visual Studio Code editor you can save a lot of time by eliminating problems right on the go.
6. Live Sass Compiler
You can compile your Sass and SCSS files to CSS in real-time with the help of the Live Sass Compiler extension. It doesn’t only perform the compilation but also reloads the CSS in the browser whenever you save your file. Moreover, it also allows you to compile Sass or SCSS to minified CSS.
Live Sass Compiler has easy-to-use status bar controls as well. For instance, you can switch the “Watch Sass” feature on and off so that you can compile Sass files without using the Watch mode. You can also automatically add vendor prefixes for unsupported CSS properties with the Live Sass Compiler.
7. ES5/ES6 and CSS Minifier
CSS and JavaScript minifying will be a breeze with the help of this extension. After you add it to Visual Studio Code, a small “Minify” button appears in the status bar, at the bottom of the editor. When you click the button, the extension creates a minified version of your file within your working directory. The “Minify” button appears only when you have an active .css or .js file open in the editor. The extension can also minify the newer ES6 syntax.
Besides, you can combine it with the Clean CSS optimizer and the Uglify-ES JavaScript compressor and beautifier. The extension automatically looks for the related .cleancssrc and .uglifyrc configuration files. If it finds any of them it will use the configurations while minifying the CSS and JavaScript files.
8. Atom JavaScript Snippet
If you have used Atom before and already memorized the prefixes belonging to JavaScript code snippets you will find this extension super useful. It provides you with Atom’s JavaScript snippets, right inside Visual Studio Code. Even if you don’t know Atom snippets, this extension can still significantly improve your workflow and save you a lot of time.
It has easy-to-remember prefixes for a wide range of JavaScript syntax and logic. Just to name a few, you will have shortcuts for key-value pairs, if-else statements, for, for of, and for in loops, anonymous functions, arrow functions, Promises, and more.
9. ESLint
Using this extension, you can integrate the popular ESLint JavaScript and JSX linter with Visual Studio Code. ESLint allows you to discover JavaScript errors and inconsistencies before you execute the code. Therefore, this extension may save you a lot of debugging time.
By default, the ESLint extension checks errors in your JavaScript files while you are typing. However, you can also configure it to lint your whole folder or workspace at once. You can also create different linting rules for any folder by adding a .eslintrc configuration file to each.
10. JavaScript Booster
If you want to improve the quality of your JavaScript code then you will find the JavaScript Booster extension very useful. It adds hints and suggestions to your JavaScript files about how you can refine your code. You can access the hints by clicking the light bulb icon it adds to the beginning of each line.
JavaScript Booster has many smart suggestions you don’t necessarily think about while coding. For instance, it recommends shorthands, removals of redundancies, splitting or merging declarations, replacing strings with template strings, and more. It doesn’t only work with plain JavaScript but also with JSX, so React developers will find it helpful as well.
11. WordPress Snippet
The Visual Studio Marketplace also has some cool extensions for WordPress developers that can greatly facilitate their everyday work. For instance, the WordPress Snippet extension adds thousands of WordPress snippets to your Visual Studio Code editor. The extension is in line with the official WordPress documentation. It doesn’t only have snippets for function names but also for constants, classes, hooks, and other WordPress structures.
Basically, it integrates the whole WordPress API with Visual Studio Code. It also has a cool autocomplete feature, so the snippets appear real-time while you are typing into the editor. WordPress Snippet will definitely save a lot of time for everyone who regularly writes WordPress code.
12. WooCommerce Snippets & Autocomplete
If you are not only a WordPress developer but also build WooCommerce stores this extension will be a blessing for you. It works similar to the aforementioned WordPress Snippets extension, however it adds support to the WooCommerce API.
The snippets are displayed on the screen when you begin to type into the editor. This extension doesn’t only help you with function, class, and hook names but also adds editable placeholders for the parameters you need to use.
Next Steps
Visual Studio Code is an advanced source code editor that provides you with several extensions so that you can customize it to your needs. As extensions enforce you to use best practices while coding, your code quality will significantly improve and you will also save a lot of troubleshooting time. A well-configured code editor can make you a better programmer, for sure.
However, finding the best tools is just the first step toward being a great developer. If you want to learn more about how you can take your skills to the next level take a look at our articles on how you can keep your code clean and perform proficient debugging and troubleshooting.
To stay updated with the latest web development news, tips, and reviews, also don’t forget to follow us on Twitter and Facebook.
