Can i use vs code for wordpress?

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

Table of Contents Show

WordPress Snippets
WooCommerce Snippets
PHP IntelliSense
Highlight Matching Tag
SCSS IntelliSense
WordPress Hooks Intellisense for VS Code
Which functions does the autocomplete list and hover information work with?
How can I trigger the autocomplete list if it doesn't show up?
Can I disable or adjust the type declarations / type hints / docblock?
Where does the list of hook names come from?
Can we use VS Code for PHP?
Can you use code in WordPress?

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

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.

Can we use VS Code for PHP?

Visual Studio Code is a great editor for PHP development. You get features like syntax highlighting and bracket matching, IntelliSense (code completion), and snippets out of the box and you can add more functionality through community-created VS Code extensions.

Can you use code in WordPress?

To get more control on how your WordPress site looks and functions, you can edit your WordPress code to customize different areas: The new block editor and the classic editor allow your to edit HTML code for individual posts or pages. If you want to edit your WordPress theme's source code, use a child theme.