14 Free WordPress Visual Studio Code Extensions For Developers

7 Free WordPress Visual Studio Code Extensions For Developers

Visual Studio Code by Microsoft is the new kid in the block and it is gaining popularity everyday.  Today we will explore free WordPress Visual Studio Code extensions. Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. It is also customizable, so users can change the editors theme, keyboard shortcuts, and preferences. It is free and open-source, although the official download is under a proprietary license

So, without further ado lets dive in!

1. WordPress Gutenberg Components List

It lists out all the components of Gutenberg so that you dont have to search and look out for components and then importing them in their right parent component.  All the official handbook components are included in the snippet.


Installs: 3.5+
Reviews: 0
Average Ratings: n/a
Last Updated: 24/12/18
Publisher: Asphalt Themes
Supported WP version: 5.0+

2.WordPress Snippet

Auto completes WordPress snippets for Visual Studio Code. A very handy extension when you code in WordPress way. Although this doesnt cover every snippet of WordPress sometimes makes WordPress coding easier. Some of the auto complete snippets are -

  • Comment form template
  • Comment template
  • Plugin base singleton
  • Plugin readme
  • Post template
  • Register nav menu
  • Register sidebar
  • Sidebar template
  • The loop
  • Widget template
  • WP query

Installs: 143K+
Reviews: 13
Average Ratings: 4.5
Last Updated: 13/8/18
Publisher: tungvn
Supported WP version: 4.6.1

3. WordPress Development

This extension adds various snippets for WordPress development. Helpful for auto completing different snippets, you can type part of a snippet and the extension will auto complete for you. Type

of snippets, you will get autocomplete for -

wp_change_admin_footer_text                    // Change Dashboard footer textwp_disable_visual_editor                       // Disable Visual Editorwp_change_admin_logo                           // Change Admin Logowp_column_thumbnail_to_post_list               // Add thumbnail column to post listingwp_remove_admin_bar                            // Remove Admin Barwp_remove_dashboard_css                        // Remove Dashboard Csswp_remove_dashboard_widget                     // Remove dashboard widget
wp_meta_open_graph                               // Add open graph meta tag
wp_shortcode_member_content                      // Only Member can view the content
wp_widget_disable_page                           //Disbale widget from custom pagewp_widget_disable_page_and_role                  //Disable Widget from Specific page by user role
ADMIN_COOKIE_PATH                 // Core ADMIN COOKIE PATH constantadd_blog_option                   // Add a new option for a given blog id.add_action                        // Core Hooks a function on to a specific action.
1. Dashboard functions          // 20 Added2. Meta tag functions           // 5 Added3. Shoertcode functions         // 5 Added2. Widget functions           // 5 Added

Installs: 57K+
Reviews: 3
Average Ratings: 5.0
Last Updated: 8/18/17
Publisher: Hridoy
Supported WP version: 4.8.1

4. WordPress Toolbox

This one the best of WordPress Visual Studio Code extensions. It covers more than 3000 snippets and for having snippets for every WordPress function, class and constant - complete with argument type hints and brief descriptions right in your inline editing experience. Just start typing the function, constant or class name, and the extension will provide an auto-complete list of matching entities.


  • Snippets for every WordPress function, class and constant, with argument type hints and brief descriptions
  • Spend less time checking documentation with argument type hints
  • Easy function completion with tab stops in all the right places
  • WordPress API Support: 4.9.4
    • 3,005 Functions
    • 401 Classes
    • 516 Constants


Just start typing the function, constant or class name, and the extension will provide an auto-complete list of matching entities. Once youve selected the correct entity, press Enter to trigger the

snippet. Use the Tab key to move through each function argument, where applicable.


These snippets are bound to the PHP language context. Your cursor will need to be inside a set of tags.

Installs: 210K+
Reviews: 5
Average Ratings: 5.0
Last Updated: 26/8/21
Publisher: wordpresstoolbox.io
Supported WP version: 5.8


5. WordPress VS Code Extension Pack

A collection of extensions for working with WordPress sites in VSCode

Installs: 25K+
Reviews: 0
Average Ratings: n/a
Last Updated: 19/11/18
Publisher: jpagano
WP version: n/a

6. WPCS Whitelist Flags

Inspired by WPCS whitelist flags for Sublime Text,  This extension for Visual Studio Code adds all WordPress Coding Standards whitelist flags as snippets.

Sometimes, a block of code will be flagged by WPCS with an error which you wish to ignore. An example of this could be a variable which is sanitized or escaped elsewhere before being used or

output. WPCS lets you white-list given errors for a line or block of code.

Available flags for whitelists

Escaping / XSS

WPCS 2013-06-11 +

// WPCS: XSS ok.


WPCS 0.4.0+

// WPCS: sanitization ok.

Nonce verification / CSRF

WPCS 0.5.0+

// WPCS: CSRF ok.

Loose comparison

WPCS 0.4.0+

// WPCS: loose comparison ok.

Overriding WordPress globals

WPCS 0.3.0+

// WPCS: override ok.

Unprepared SQL

WPCS 0.8.0+

// WPCS: unprepared SQL ok.

Tip: before whitelisting a query, if you are passing user-supplied data through $wpdb->prepare()as part of the $query parameter, even if that data is properly escaped, you also need to check that it is does not make the query vulnerable to sprintf()-related SQLi attacks.

Use of superglobal

WPCS 0.3.0+

// WPCS: input var ok.

Direct database query*

WPCS 0.3.0+

// WPCS: db call ok.

Database query without caching*

WPCS 0.3.0+

// WPCS: cache ok.

Slow (taxonomy) queries

WPCS 0.12.0+

// WPCS: slow query ok.

This flag was originally called tax_query and introduced in WPCS 0.10.0. The tax_query whitelist flag has been deprecated as of WPCS 0.12.0 and is superseded by the slow query flag.

Non-prefixed function/class/variable/constant in the global namespace

WPCS 0.12.0+

// WPCS: prefix ok.

WordPress spelling

WPCS 0.12.0+

// WPCS: spelling ok.

Precision alignment

WPCS 0.14.0+

// WPCS: precision alignment ok.

PreparedSQL placeholders vs replacements

WPCS 0.14.0+

// WPCS: PreparedSQLPlaceholders replacement count ok.

Installs: 30K+
Reviews: 2
Average Ratings: 5.0
Last Updated: 24/7/19
Publisher: Claudio Sances
WP version: n/a

7. WooCommerce – Snippets & autocomplete

If you develop mostly in WooCommerce and write related snippets daily then youre in luck this is a perfect match WordPress Visual Studio extension for you. This extension for Visual Studio

Code adds WooCommerce snippets and auto complete of functions, classes and hooks.

WordPress Visual Studio Code Extensions For Developers

Installs: 45K+
Reviews: 4
Average Ratings: 4.5
Last Updated: 22/1/19
Publisher: Claudio Sanches
WP version: n/a

Autocomplete for:

WooCommerce version: 3.2Functions : 522Actions   : 496Filters   : 496Constants : 22

8. ACF-Snippet

ACF dedicated snippets for WordPress Visual Studio Code users. This extension has lot of options to make your ACF coding easier in Visual Studio Code. All tab triggers follow the following

naming convention; field:{field type}:{type/option}. All fields also have appropriate tabstops setup, however the first will always be the field name. Some of the snippets are -

field / field:header / field:text / field:link / field:option (HTML/PHP)

Get a field by name. (Header / text / link fields will be wrapped in  / 

 /  tags)


field:date (HTML/PHP)

Get and format a date field

  format('d-m-Y'); ?>

field:if / field:ifelse (HTML/PHP)

Field conditional. Also used for true/false fields.

field:sub (HTML/PHP)

Get a field by name, within repeater/flexible.


field:image (HTML/PHP)

Image field with a return value of Image URL

    <?php the_field(''); ?>

field:image:id (HTML/PHP)

Image field with a return value of Image ID

field:image:object (HTML/PHP)

Image field with a return value of Image Object

    <?php echo $image['alt']; ?>    <?php echo $image['alt']; ?>

field:file (HTML/PHP)

File field with a return value of File URL

  Download File

field:file:id (HTML/PHP)

File field with a return value of File ID


field:file:object (HTML/PHP)

File field with a return value of File Object


field:flex (HTML/PHP)

Flexible Content basic field returns 1 row deep:


field:flex:nested (HTML/PHP)

Flexible Content nested field returns the below:

  • <?php echo $image['alt']; ?>

Repeater Field

field:repeater (HTML)

Get and loop over a repeater field

field:form (HTML/PHP)

Display a gravity form. The parameters for gravity_form() are outlined in the Gravity Forms documentation.

id, true);  gravity_form($form->id, display_title, display_description, false, field_values, enable_ajax, 1);} ?>

field:relationship (HTML/PHP)

Get a relationship field and loop over all returned posts.


Installs: 50K+
Reviews: 4
Average Ratings: 5.0
Last Updated: 17/5/2018
Publisher: Anthony Hubble
WP version: n/a

9. phpcbf

PHP Code Beautifier and Fixer for Visual Studio Code This extension provides the PHP Code Beautifier and Fixer (phpcbf) command for Visual Studio Code. phpcbf is the lesser known sibling of phpcs (PHP_CodeSniffer). phpcbf will try to fix and beautify your code according to a coding standard.

phpcbf preview

If you add a standard to phpcs, it will be available for phpcbf. Some popular standards are: DrupalWordPressYii2Magento and Symfony

Installs: 35K+
Reviews: 5
Average Ratings: 3.4
Last Updated: 1/10/18
Publisher:Per Soderlind


10. ACS Snippets – VSCode

This is a collection of VSCode Text snippets for the Advanced Custom Fields WordPress plugin. Might come handy for ACF heavy users. Snippets are categorized into -

Installs: 3k+
Reviews: 2
Average Ratings: 5 out of 5
Last Updated: 20/2/2019
Publisher:Shaun Baer

11. WordPress Genesis Toolbox

This project is aimed at helping folks using Genesis to work faster and more efficiently. This project was forked from Jasons VSCode WordPress Toolbox.  These snippets are bound to the PHP language context. Your cursor will need to be inside a set of PHP tags.

Installs: 3.5k+
Reviews: 0
Average Ratings: n/a
Last Updated: 31/3/18
Publisher:Craig Waton

12. WordPress i18n Tagger

This visual studio code extension for WordPress replace your manual work for adding localization. It wraps a string and then you can do a search/replace for text-domain. Extension can also wrap with string concatenation.

Installs: 1.5k+
Reviews: 0
Average Ratings: n/a
Last Updated: 21/9/18
Publisher: Cambam

13. WordPress Development ToolBox for Visual Code

This Toolbox helps you to develop in WordPress very fast. It has a lot of snippets for a lot of situations.

Snippets are:

  • 2-3 digits - Environment as WordPress and Plugins.
  • 1 - Action: A - Adding, R - Remove, M - Move, T - Setup a setting, S - Show HTML
  • 2-3 Name of snippet

For example: metafun - Met is for plugin Metabox, A for adding a function and Fun is the name of the snippet.

All snippets will respect WordPress Coding Standards.

Installs: 9k+
Average Ratings: 3.7
Last Updated: 9/10/2021
Publisher: Close Marketing

14. Search WordPress Docs

Search WordPress Docs is a VS Code extension that allows you to select text inside the VS Code editor and search the WordPress Codex/Code Reference sites for a matching function, class, method, or hook. The extension takes your selected text and opens googles first result that matches.

Installs: 19k+
Reviews: 2
Average Ratings: 5
Last Updated: 23/06/19
Publisher: Yogensia

Even though WordPress visual studio code extensions are fewer in number but we hope that over time they will increase in numbers. Did we miss any VS Code extensions?  Do you you have any special recommendation for any particular extension? Let us know in the comments!

Build your Websites with lightweight & Bloat free themes Without Any coding Knowledge

Browser Themes

Leave a Reply

Get Free Resources To Grow Your Business :

- Free Web Resources

- Tips & Insights

- Theme releases


Enter your email address