How to use the VS Code for WordPress Development

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

WordPress VS Code Integration

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

This great tool allows you to add auto-completion for PHP core functions. However, it won't pick up on any WordPress core functions. Install the WordPress Snippet extension if you want to use it with WordPress. 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 efficiently 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, you understand how hard it is to set up. Fortunately, VS Code makes it incredibly easy to configure xDebug and works. All that is needed is to install the PHP Debug extension and reload the editor. Click the gear icon to create a new PHP debug configuration in the debug. A VS code/launch JSON at the root of your project will be created, containing options for any debug configurations you have. You'll need to edit xDebug run on a port to her than 9000, 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 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, 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 use Browserify to bundle your JavaScript files together. This is done quickly 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 to determine your overrides. You will be shown a list of the scripts loaded during the debug request. It will also show you any files they map to and where the VS Code thinks they are. 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 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 installed Instant Markdown plugin, which is used for writing posts and is an excellent way of previewing your markdown in the browser.

Final remarks

If you decide to use the VS Code, you will likely 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 how 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 entrepreneurs launch their first successful online business.

Social Media Links Below: