14 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 editor’s theme, keyboard shortcuts, and preferences. It is free and open-source, although the official download is under a proprietary license

So, without further ado let’s dive in!

1. WordPress Gutenberg Components List

It lists out all the components of Gutenberg so that you don’t 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 doesn’t 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 –

1. Dashboard Snippets

wp_change_admin_footer_text                    // Change Dashboard footer text
wp_disable_visual_editor                       // Disable Visual Editor
wp_change_admin_logo                           // Change Admin Logo
wp_column_thumbnail_to_post_list               // Add thumbnail column to post listing
wp_remove_admin_bar                            // Remove Admin Bar
wp_remove_dashboard_css                        // Remove Dashboard Css
wp_remove_dashboard_widget                     // Remove dashboard widget

2. Meta Tag Snippets

wp_meta_open_graph                               // Add open graph meta tag

3. Shortcode Snippets

wp_shortcode_member_content                      // Only Member can view the content

3. Widget Snippets

wp_widget_disable_page                           //Disbale widget from custom page
wp_widget_disable_page_and_role                  //Disable Widget from Specific page by user role

4. WordPress Core Snippets

ADMIN_COOKIE_PATH                 // Core ADMIN COOKIE PATH constant
add_blog_option                   // Add a new option for a given blog id.
add_action                        // Core Hooks a function on to a specific action.

5. Custom Snippets List

1. Dashboard functions          // 20 Added
2. Meta tag functions           // 5 Added
3. Shoertcode functions         // 5 Added
2. 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.

Features:

• 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

Usage

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

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

Requirements

These snippets are bound to the PHP language context. Your cursor will need to be inside a set of <?php ?> 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

Extensions included

• PHP Extension Pack – Includes the most important extensions to get you started with PHP development in Visual Studio Code
• WordPress Snippet – WordPress Snippets
• ACF-Snippet – Advanced Custom Field Snippets
• WooCommerce – Snippets & autocomplete – A collection of WooCommerce snippets and autocompletions
• PHP DocBlocker – A simple, dependency free PHP specific DocBlocking package
• phpcs – PHP CodeSniffer for Visual Studio Code
• WPCS Whitelist Flags – Add WordPress Coding Standards whitelist flags to your code
• REST Client – REST Client allows you to send HTTP request and view the response in Visual Studio Code directly

Recommended installations

• WordPress Coding Standards for PHP_CodeSniffer – Collection of PHP_CodeSniffer rules (sniffs) to validate code developed for WordPress

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.

Sanitization

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 you’re 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.

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.2

Functions : 522
Actions   : 496
Filters   : 496
Constants : 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 –

Basic Fields

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

Get a field by name. (Header / text / link fields will be wrapped in <h*> / <p> / <a> tags)

<?php if ( get_field('field_name') ) : ?>
  <?php echo get_field('field_name'); ?>
<?php endif; ?>

field:date (HTML/PHP)

Get and format a date field

<?php if ( get_field('field_name') ) : $date = DateTime::createFromFormat('Ymd', get_field('field_name')); ?>
  <?php echo $date->format('d-m-Y'); ?>
<?php endif; ?>

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

Field conditional. Also used for true/false fields.

<?php if ( get_field('field_name') ) : ?>
<?php endif; ?>

field:sub (HTML/PHP)

Get a field by name, within repeater/flexible.

<?php if ( get_sub_field('field_name') ) : ?>
  <?php echo get_sub_field('field_name'); ?>
<?php endif; ?>

Image Field

field:image (HTML/PHP)

Image field with a return value of “Image URL”

<?php if ( get_field('field_name') ) : ?>
    <img src="<?php the_field('field_name'); ?>" alt="<?php the_field(''); ?>">
<?php endif; ?>

field:image:id (HTML/PHP)

Image field with a return value of “Image ID”

<?php
if ( get_field('field_name') ) {
  $attachment_id = get_field('field_name');
  $size = "full"; // (thumbnail, medium, large, full or custom size)
  wp_get_attachment_image( $attachment_id, $size );
}
?>

field:image:object (HTML/PHP)

Image field with a return value of “Image Object”

<?php if ( get_field('field_name') ) : $image = get_field('field_name'); ?>

  <!-- Full size image -->
  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/>

  <!-- Thumbnail image -->
  <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>"/>

<?php endif; ?>

File Field

field:file (HTML/PHP)

File field with a return value of “File URL”

<?php if ( get_field('field_name') ) : ?>
  <a href="<?php the_field('field_name'); ?>" >Download File</a>
<?php endif; ?>

field:file:id (HTML/PHP)

File field with a return value of “File ID”

<?php
  if ( get_field('field_name') ) :
    $attachment_id = get_field('field_name');
    $url = wp_get_attachment_url( $attachment_id );
    $title = get_the_title( $attachment_id );
?>
  <a href="<?php echo $url; ?>" ><?php echo $title; ?></a>
<?php endif; ?>

field:file:object (HTML/PHP)

File field with a return value of “File Object”

<?php if ( get_field('field_name') ) : $file = get_field('field_name'); ?>
  <a href="<?php echo $file['url']; ?>"><?php echo $file['title']; ?></a>
<?php endif; ?>

Flexible Content Field

field:flex (HTML/PHP)

Flexible Content basic field returns 1 row deep:

<?php if ( have_rows( 'field_name' ) ) : ?>
    <?php while ( have_rows('field_name' ) ) : the_row();
        if ( get_row_layout() == 'layout_field' ) : ?>
            <div class="class">
                <?php the_sub_field( 'field_name' ); ?>
            </div>
        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

field:flex:nested (HTML/PHP)

Flexible Content nested field returns the below:

<?php if( have_rows('field_name') ): ?>
    <?php while ( have_rows('field_name') ) : the_row(); ?>
        <?php if( get_row_layout() == 'layout_field' ): ?>
            <?php if( have_rows('layout_rows') ): ?>
                <ul>
                    <?php while ( have_rows('layout_rows') ) : the_row(); $image = get_sub_field('sub_field'); ?>
                        <li><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></li>
                    <?php endwhile; ?>
                </ul>
            <?php endif; ?>
        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

Repeater Field

field:repeater (HTML)

Get and loop over a repeater field

<?php if ( have_rows('field_name') ) : ?>


<?php while( have_rows('field_name') ) : the_row(); ?>


<?php the_sub_field('sub_field_name'); ?>


<?php endfor; ?>


<?php endif; ?>

Gravity Form Field

field:form (HTML/PHP)

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

<?php if ( get_field('field_name') ) {
  $form = get_field('field_name');
  gravity_form_enqueue_scripts($form->id, true);
  gravity_form($form->id, display_title, display_description, false, field_values, enable_ajax, 1);
} ?>

Relationship Field

field:relationship (HTML/PHP)

Get a relationship field and loop over all returned posts.

<?php $posts = get_field('field_name'); ?>
<?php if ( $posts ): ?>
  <ul>
    <?php foreach ( $posts as $post ) : setup_postdata( $post ); ?>
      <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endforeach; wp_reset_postdata(); ?>
  </ul>
<?php endif; ?>

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.

Preview

right mouse-click, in context menu, select ‘Format Document’. Here using the WordPress-Core standard. You can also enable formatting on save.

Additional standards

If you add a standard to phpcs, it will be available for phpcbf. Some popular standards are: Drupal, WordPress, Yii2, Magento 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 –

1. Standard Field Snippets

1. Sub Field Snippets

1. Options Page Field Snippets

1. Repeater Field Snippets

1. Flexible Field Snippets

1. Gallery Field Snippets

1. Google Map Field Snippets
2. Utility Snippets

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 Jason’s 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+
Reviews:13
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 google’s 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!