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.
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.
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.
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.
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.
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.
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.
.js file open in the editor. The extension can also minify the newer ES6 syntax.
for of, and
for in loops, anonymous functions, arrow functions, Promises, and more.
.eslintrc configuration file to each.
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.
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.
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.