Using VS Code for WordPress Development

If you keep up with the many different text editors and developer tools available, you may have heard of a newer IDE called Visual Studio Code. VS Code is a free, open source code editor that is lightweight like Sublime Text, but offers many of the same features as bigger IDEs like PhpStorm or WebStorm.

In this article I’ll review some features and extensions of VS Code that I really appreciate, and show you how to make the most out of it for WordPress and general web development.

WordPress Integration

Out-of-the-box, VS Code doesn’t support WordPress and PHP in general as well as some other development environments like PhpStorm. Luckily, that’s easy to change by installing some extensions. I recommend installing the PHP Intelephense extension, which adds PHP auto-completions, symbol navigation support, and a much better way to find references in your workspace.

While that will add autocompletions for PHP core functions and any functions that you have defined in your project, it won’t pick up on any WordPress core functions. For that I recommend installing the WordPress Snippet extension, which adds helpful autocompletions for most WordPress core functions, classes, and constants.

These extensions make it much easier to work with WordPress plugins and themes. While there are still some things I miss coming from PHPStorm, like parameter hinting and autocompletion for action hooks and filters, it’s definitely good enough for now. I’m sure that as more people start using VS Code, there will more extensions to make this integration even more solid.

xDebug

xDebug is an invaluable tool to have for debugging PHP, but it can sometimes be tricky to set up. Luckily, VS Code makes it incredibly easy to configure xDebug, and in my experience it just works.

You only need to install the PHP Debug extension and reload the editor. You can then go to the debug tab and click the gear icon to create a new PHP debug configuration.

Debug configuration dropdown

This will create .vscode/launch.json at the root of your project, which contains options for any debug configurations that you have. If you’ve configured xDebug to run on a port other than 9000 (the default), you’ll want to edit that here.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9005
        }
    ]
}

That’s it! You should be able to start debugging from here – no fiddling with path mappings or opening up multiple windows to debug different sites.

Debugging JavaScript

Debugging PHP is only half the problem – we also need to be able to debug JavaScript, and having that integrated into the IDE means less time spent fiddling around with the browser’s console. Since I use Google Chrome as my main browser, I installed the Debugger for Chrome extension which integrates VS Code with the Chrome DevTools Protocol.

Once you’ve installed the extension, you’ll need to update the launch.json file that was created when setting up xDebug to add another debug configuration for JavaScript:

    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://yoursite.dev/path-to-your-plugin",
        "webRoot": "${workspaceRoot}",
    }

Once that’s been added, you should see the JavaScript debug configuration in the debug configuration drop down:

VS Code debug dropdown

If breakpoints aren’t working and you’re using something like Browserify to bundle your JavaScript files together, you may need to add some configuration to tell VS Code where to look for the files. You can do this with the sourceMapPathOverrides parameter in the launch.json file.

To find out what your overrides should look like, start a JavaScript debug session and enter .scripts in the VS Code Debug Console. This will show you a list of the scripts that were loaded during the debug request and any files they map to, as well as where VS Code thinks they are located. More info on the .scripts command can be found in the documentation.

In my case, I was trying to debug WP Migrate DB Pro which was installed via symlink. This was causing VS Code to think that the JavaScript files were stored in a similar file structure as the URL used to load the files in WordPress:

› http://mdb.dev/wp-content/plugins/wp-migrate-db-pro/asset/dist/js/script-181.js
    - src/wp-migrate-db-pro/asset/src/js/script.js (~/Projects/wp-migrate-db-pro/wp-content/plugins/wp-migrate-db-pro/asset/dist/js/src/wp-migrate-db-pro/asset/src/js/script.js)

In the above output from the .scripts command, the first line is the compiled file that was loaded. The file path in parentheses is where VS Code thinks the source file is loaded from, and in this case, it was incorrectly adding wp-content/plugins/wp-migrate-db-pro/asset/dist/js to the file path. This was easily fixed by adding the following sourceMapOverride:

"sourceMapPathOverrides": {
    "src/wp-migrate-db-pro/*": "${webRoot}/src/wp-migrate-db-pro/*"
}

Here’s my complete .vscode/launch.json file so far:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9005
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://mdb.dev/wp-admin/tools.php?page=wp-migrate-db-pro",
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "src/wp-migrate-db-pro/*": "${webRoot}/src/wp-migrate-db-pro/*",
                "src/wp-migrate-db-pro-media-files/*": "${webRoot}/src/wp-migrate-db-pro-media-files/*",
                "src/wp-migrate-db-pro-multisite-tools/*": "${webRoot}/src/wp-migrate-db-pro-multisite-tools/*"
            }
        }
    ]
}

With that in place, it’s now super easy to debug JavaScript from within VS Code, using the same UI that is used for xDebug:

JavaScript debugging

Other Helpful Extensions

Since I’ve been using VS Code for a few weeks now, I’ve come across some other extensions that have been helpful in everyday development. I like the Git Lens extension, which adds simple git blame annotations to the line that you’re currently working on. This single line annotation of git blame works noticeably faster than PhpStorms’ implementation, which tries to run on the whole file at once.

If you work with a lot of modern JavaScript it’s also worth installing the Babel ES6/ES7 extension, which adds syntax highlighting for ES6/ES7 (duh). I also have the Instant Markdown plugin installed, which I used to write this post and is a cool way of previewing your markdown in the browser.

Closing Thoughts

I’ve fallen in love with VS Code. It’s like it took my favorite features of PhpStorm and Sublime Text, and combined them to create the ultimate lightweight IDE. I also really like the way that you can browse and install extensions directly from within VS Code, and you can even view the documentation for that extension without leaving the editor.

I’ve since removed both PhpStorm and Sublime Text from my dock, and don’t have any plans to bring them back.

Have you tried out VS Code yet? What did you think? Let us know in the comments.

About the Author

Matt Shaw

Matt is a WordPress plugin developer located near Philadelphia, PA. He loves to create awesome new tools with PHP, Javascript, and whatever else he happens to get his hands on.

  • colmtroy

    Hey Matt, I’d also recommend configuring PHP Code Sniffer as per Tom’s guide https://github.com/tommcfarlin/phpcs-wpcs-vscode

    • Rui Guerreiro

      Yes, PHP Code Sniffer is a must have. Also check “Project manager” and “Bookmarks” from Alessandro Fragnani

    • Matt Shaw

      Yep, I’ve been meaning to set that up!

  • Erick Olivares

    I also was big fan of PHP Storm and transitioned into sublime. I’m definitely going to give VS Code a closer look now.

  • Shessvy Lepekelly

    Thank you. I use Netbeans currently but I look forward to trying this out!

  • Per Søderlind

    With the multi-root workspaces support, in vscode 1.18, you just have to add the wp-include folder (or ABSPATH-folder) to your workspace and PHP Intelephense will give you autocomplete for the WP methods.

  • Thanks for the post, Matt. I have been slowly moving away from Sublime and towards VSCode. It just works and it does combine the best features of both the worlds. Mostly developing JS at the moment yet to have setup a WordPress project in it.

  • Stefan Stankovic

    I’ve tryed VS Code. But once I opened wordpress dev in it, coundt set up snipped for , I just gave up.

  • Tim Gieseking

    While overall VS Code has been great, I’ve been having trouble putting together the right set of extensions to handle PHP+HTML at the same time, which is crucial for WP themes. There are just a few small annoyances out of the box.

    The biggest problems are how HTML is auto-closed and how HTML is auto-indented while in PHP mode. It works decently in HTML mode. Typically with a WP theme I’m in PHP mode, and HTML indenting no longer works. Auto-close will work with an extension, but will close before the PHP block, not after I start to type a close tag farther down in the code.

    The best experience I’ve had with this is actually Coda 2, which handles indention and closing tags perfectly in PHP+HTML. Has anyone found any extensions that help with this?

  • What about compiling SCSS/SASS and using gulp?

  • Amit Ramani

    Does vsCode support sftp? Can I login to a remote server to edit code over sftp? Sorry if I missed that in the article. It would be great to do that, even if its by using an extension.

  • Shahroze Nawaz

    In short VScode is love <3 and thanks for the article I was looking for the debugging solution in vscode.

  • Pablo Pacheco

    Hello, thanks. It’s working flawlessly here.
    Do you know how can I indent / format code in WordPress coding standards?