WordPress Development

As a developer, it is always good to keep up with as many text editors as possible. If you have, I would like to introduce you to a newer IDE called Visual Studio Code. This is a free, open-source code editor that offers numerous features just like IDEs like PhpStorm or Web Storm. It is also lightweight just like Sublime Text. This article will check out some of the best features and extensions of VS Code and how to use it in your WordPress development.

WordPress VS Code Integration

If you are planning to use VS Code out-of-the-box with WordPress then you need to know that it doesn’t support WordPress and PHP in general as well as some other development environments like PhpStorm. Fortunately, there are extensions available to change this. One of them is the PHP Intelephense extension. This extension is used to add PHP auto-completion, symbol navigation support, and a much better way to find references in your workspace.

This is a great tool that allows you to add auto-completion for PHP core functions. However, it won’t pick up on any WordPress core functions. If you want to use it with WordPress then I suggest that you install the WordPress Snippet extension. Using this tool will allow you to add helpful auto-completion for most WordPress core functions including classes and constants. You can work with these tools very easily with WordPress themes and plugins. There are some features from PHP Storm that you won’t find in VS Code like parameter hinting and auto-completion for action hooks and filters. However, what the tool offers is good enough for now. Since it’s a new code editor, we expect more integration to come in the future as more people continue using it.

XDebug

For those who have used xDebug, and then you understand how hard it is to set up. Fortunately, VS Code makes it incredibly easy to configure xDebug, and in my experience, it just works. All that is needed to do is to install the PHP Debug extension and reload the editor. In the debug, click the gear icon to create a new PHP debug configuration. A VS code/launch json at the root of your project will be created containing options for any debug configurations that you have. You’ll need to edit xDebug run on a port other than 9000 which is the default setting while configuring it. Once you have configured xDebug, you can start debugging straight away. It is a great tool that doesn’t need fiddling with path mappings or opening up multiple windows to debug different sites.

Debugging JavaScript

Besides debugging PHP, you also have to know how to debug JavaScript. Since it is integrated into the IDE, you will spend little time fiddling around with the browser’s console. To easily do this, use Google Chrome as the main browser and install the debugger for Chrome extension which integrates VS Code with the Chrome Dev Tools Protocol. Once the extension is installed, update the created launch json file when setting up xDebug so that you can add another debug configuration for JavaScript. You should see the JavaScript debug configuration in the debug configuration drop-down, once you have added it

Sometimes you may find out that the breakpoints aren’t working. In this case, you may need to add some configuration to tell VS Code where to look for the files, if you are using something like Browserify to bundle your JavaScript files together. This is done easily in the launch. Json file, using the source Map Path Overrides parameter.

Start a JavaScript debug session and enter .scripts in the VS Code Debug Console if you want to find out what your overrides look like. You will be shown a list of the scripts that were loaded during the debug request. It will also show you any files they map to, and where the VS Code thinks they are located. You will find more information about the .scripts command in the documentation.

In some instances, VS Code may think that JavaScript files were stored in a similar file structure as the URL used to load the files in WordPress when you are trying to debug. JavaScript debugging. In this case, you can use other helpful integrations.

Other Helpful Extensions

You will come across some other extensions that will be helpful in everyday development if you continue to use VS Code in all your WordPress development. One such extension is the Git Lens extension. This extension is used to add simple git blame annotations to the line that you’re currently working on, which works faster than Php Storms’ implementation. This is so because it runs on the whole file at once.

Another extension that is worth installing, if you work with a lot of modern JavaScript, is the Babel ES6/ES7 extension used for adding syntax highlighting for ES6/ES7 (duh). You can also try out the Instant Markdown plugin installed, used for writing posts and is an awesome way of previewing your markdown in the browser.


Final remarks

If you decide to use the VS Code, it is more likely that you will fall in love with it. I have because it took my favorite features of PhpStorm and Sublime Text, and combined them. This combination resulted in an ultimate lightweight IDE. As a WordPress developer, you will also love the way it allows you to browse and install extensions directly from within VS Code. Viewing of documentation is also possible without necessarily leaving the editor. Try it out to get the best experience in code editing.
Naman Modi is a Professional Blogger, SEO Expert & Guest blogger at NamanModi.com, He is an Award-Winning Freelancer & Web Entrepreneur helping new entrepreneur’s launches their first successful online business.

 Social Media Links Below: