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.
WooCommerce Snippets
Much like WordPress Snippets, WooCommerce Snippets provides autocompletion for WooCommerce functions, classes and hooks. Perfect for WooCommerce development.
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.
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.
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.
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.
File Utils
Arguably this should be merged in to VS Code – File Utils allows you to simply create, duplicate, move, rename and delete files and directories – both from the command palette and the right click menu in the sidebar. A must have.
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.