ūüŹ° Home

WordPress Dev Environment: VSCode - Code Completion and Debugging

In the past, I have used various tools to edit codes, from full-featured IDE (Integrated Development Environment) to simple text editors. Around this past 5 months, I have been using Visual Studio Code (shorten to VSCode) for my programming and text editing. The applications suited my needs in working with a variety of programming languages and also in developing WordPress plugin and theme.

The official guide for PHP environment can be found in here. In this post, I will show some basic extensions and settings I found useful in developing WordPress plugin.

Code Completion

The base installation already has some basic capabilities in PHP code completion. But one extension I found useful in expanding the capability is the PHP Intellisense Extension by Felix Becker.

To use the extension properly you need to set up the PHP 7+ executable path in VSCode setting. If you use XAMPP as my previous post then you probably can use this path to set up the extension (don't forget to surround the path with double quotes).

"php.executablePath": "/Applications/XAMPP/xamppfiles/bin/php"

You also might need to turn off the basic built-in PHP IntelliSense.

"php.suggest.basic": false


The Xdebug I explained before can be used in VSCode. This will integrate the Xdebug and the VSCode debugging capability.

To enable this you will need the PHP Debug Extension by Felix Becker. Then add additional settings in your php.ini file in etc folder XAMPP. Don't forget to change the .so filename according to your installed Xdebug.

; Enable Xdebug

zend_extension = /Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20170718/xdebug.so


xdebug.remote_enable = 1

xdebug.remote_autostart = 1

These two are the most basic extensions. There are several other extensions which can expand the editor capability for WordPress development, but I will write separate posts for them.