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. 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.WordPress Snippets
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.
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
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.
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.
WordPress Hooks Intellisense for VS Code
This extension provides intellisense and autocomplete for WordPress hooks, actions, and filters.
- Autocomplete for action and filter names
- Supports all actions and filters up to WordPress 6.0
- Autocomplete for action and filter callback functions
- Supports functions, class methods, closures, arrow functions, and more
- The parameter types, return type, and a docblock are included where appropriate
- Various options can be controlled in the settings for the extension
- Hover information on action and filter names
- Includes a useful link to the developer.wordpress.org documentation site
Usage
Start typing the name of a WordPress action or filter within add_action() or add_filter() and you'll get an autocomplete list of all matching actions or filters, plus information about the parameters and usage:
Autocomplete is also provided for the callback function. It's contextually aware and provides options for a function, a class method, a closure, an arrow function, and WordPress' built-in utility functions:
An autocompleted closure callback looks like this:
Hover information for an action or filter name looks like this:
FAQ
Which functions does the autocomplete list and hover information work with?
- add_action()
- add_filter()
- remove_action()
- remove_filter()
- has_action()
- has_filter()
- doing_action()
- doing_filter()
- did_action()
How can I trigger the autocomplete list if it doesn't show up?
Place your cursor within the first parameter of one of the supported functions, eg add_action() or add_filter(), and hit ctrl+space. This works with any autocomplete provider, not only this extension.
Can I disable or adjust the type declarations / type hints / docblock?
Yes, open the preferences for VS Code and go to the Extensions -> WordPress Hooks Intellisense section.
Where does the list of hook names come from?
They're generated directly from the WordPress core software and updated in time for each new release. They're bundled with this extension so there's no requirement for your project to include WordPress if you don't want to, and the extension doesn't scan the files in your project looking for actions and filters.
The time that I spend maintaining this extension and other tools is in part sponsored by:
Plus all my kind sponsors on GitHub:
Click here to find out about supporting this extension and my other WordPress development tools and plugins.
License
This extension is free and open source software. It's licensed under the GNU GPL version 3.
Thanks
- This extension uses the wp-hooks library as the hook information provider.
- This extension uses some code inspired by the Autocomplete WordPress Hooks extension for Atom.