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

WordPress-Gutenberg-Component-gutensnip-screenshot.png

Installs: 10+
Reviews: 0
Average Ratings: n/a
Last Updated: 22/10/18
Publisher: Asphalt Themes
Supported WP version: 4.9.8

 

 

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 snippets of WordPress but 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: 40K+
Reviews: 10
Average Ratings: 4.9
Last Updated: 2/2/17
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 auto complete for –


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
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 page
wp_widget_disable_page_and_role                  //Disable Widget from Specific page by user role
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.
1. Dashboard functions          // 20 Added
2. Meta tag functions           // 5 Added
3. Shoertcode functions         // 5 Added
2. Widget functions           // 5 Added

Installs: 7K+
Reviews: 2
Average Ratings: 5.0
Last Updated: 8/18/17
Publisher: Hridoy
Supported WP version: 4.6.1

 

 

4. WordPress Toolbox

This one the best of WordPress Visual Studio Code extensions. It cover more than 3000 snippets and for has 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: 2.1K+
Reviews: 1
Average Ratings: 5.0
Last Updated: 2/7/18
Publisher: wordpresstoolbox.io
Supported WP version: 4.9.4

 

 

5. WordPress VS Code Extension Pack

A collection of extensions for working with WordPress sites in VSCode

Installs: 2K+
Reviews: 0
Average Ratings: n/a
Last Updated: 12/9/17
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.

WordPress Visual Studio Code Extensions For Developers

 

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: 2.4K+
Reviews: 11
Average Ratings: 5.0
Last Updated: 11/21/17
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.

WordPress Visual Studio Code Extensions For Developers
Installs: 2.4K+
Reviews: 2
Average Ratings: 5.0
Last Updated: 11/24/2017
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 –

 

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; ?>

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; ?>

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; ?>

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; ?>

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);
} ?>

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: 15K+
Reviews: 1
Average Ratings: 5.0
Last Updated: 11/24/2017
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: 3K+
Reviews: 1
Average Ratings: 5
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: 500+
Reviews: 0
Average Ratings: n/a
Last Updated: 8/6/18
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: 800+
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: 70+
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: 1400+
Reviews: 3
Average Ratings: 3.7
Last Updated: 14/10/18
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: 2000+
Reviews: 1
Average Ratings: 5
Last Updated: 15/8/18
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

Get Free Resources To Grow Your Business :

- Free Web Resources

- Tips & Insights

- Theme releases

 

Enter your email address

Subscribe!