The Best VS Code Extensions for WordPress Development

Visual Studio Code (VS Code) is undoubtedly a great text editor. What makes it even better is the number of quality extensions available.

VS Code extensions add new functionality to the text editor, so you can really tailor the experience to your workflow. We’re going to run through some of the best and most useful extensions available for WordPress developers.

WordPress Snippets

There are a few plugins with similar features, but WordPress Snippets seems to be the most up-to-date. It includes autocompletion for every WordPress function, class and constant which saves a lot of skipping back and forth between the official docs. It also has some handy emmet-style abbreviations for example, typing ‘wes’ and hitting tab brings up the snippet for wp_enqueue_script.

Download Extension

WooCommerce Snippets

Much like WordPress Snippets, WooCommerce Snippets provides autocompletion for WooCommerce functions, classes and hooks. Perfect for WooCommerce development.

Download Extension

PHP IntelliSense

WordPress is built using PHP and most developers will find themselves reaching for built-in PHP functions. PHP IntelliSense provides advanced autocompletion and refactoring support for PHP. It does require some setup, but once you’re up and running it can really speed up your PHP workflow.

Download Extension

Highlight Matching Tag

VS Code comes with some basic tag matching, but it’s not the best especially when mixing PHP with HTML in very long files. Highlight matching tag does just what it says, but it’s also customizable, so you can make it look exactly as you need.

We’ve customized the matching tag with a striking yellow underline to match our theme.

SCSS IntelliSense

For those that use Sass during their WordPress development, SCSS IntelliSense can really speed up your workflow. It offers autocompletion suggestions for Sass variables, mixins and functions as well as easy code navigation such as “Go to” definition support, which can take you to the source code of a variable quickly and easily.

Download Extension

File Size

It’s nice to know the size of the files your working on, particularly with JavaScript and SVG, as this has an impact on the website load time. The File Size plugin does just as it says – it shows the size of the current file you’re working on in your editor window.

Download Extension

Conclusion

There you have it, some of our favourite VS Code extensions for WordPress developers. Have we missed any killer extensions? let us know in the comments.