I am slowly moving away from Sublime Text to Microsoft’s Visual Studio Code due to VS Code’s superior feature-set like a built-in file navigation tree (which is better than ST’s SideBarEnhancements package), IntelliSense and built-in Git.
Below are the steps
to have VS Code automatically sniff and display warnings/errors (if any) in your PHP files per WordPress Coding Standards.
Step 1
Install Composer globally.
Step 2
In the system terminal (navigate to your home directory, if you are elsewhere) run
composer create-project wp-coding-standards/wpcs --no-dev
Running this command will
- install WordPress standards into ~/wpcs directory.
- install PHP_CodeSniffer.
- register WordPress standards in PHP_CodeSniffer configuration.
- make
phpcs
command available from ~/wpcs/vendor/bin.
Step
3
Mac
Run
ln -s ~/wpcs/vendor/bin/phpcs /usr/local/bin/phpcs
This will create /usr/local/bin/phpcs
as an alias or symbolic link to ~/wpcs/vendor/bin/phpcs
where ~
is your home directory (Ex.: /Users/sridharkatakam
).
Windows
Go to Control Panel. Search for path
and click on “Edit the system environment variables”.
Click on “Environment Variables…” in the System Properties’ Advanced tab.
In the bottom “System variables” section, select Path
and click Edit.
Add a new entry having this
path:
C:\Users\Admin\wpcs\vendor\bin
where Admin
is your current admin-level username.
Step 4
In VS Code, go to Extensions, search for phpcs
and install it.
Bring up your user settings by pressing ⌘, and add
"phpcs.standard": "WordPress"
Step 5
Restart
VS Code.
That’s it.
Note:
- To check the value of $PATH environment in a terminal run
echo $PATH
. - To add a directory to $PATH, run
open ~/.bash_profile
. Then in the text editor add export PATH="/Users/sridharkatakam/wpcs/vendor/bin:$PATH"
where /Users/sridharkatakam/wpcs/vendor/bin
is the directory whose path is to be added.
Debug WordPress with Visual Studio Code | VSCode WordPress Debug Setup | WordPress xDebug Setup for Local by FlyWheel with VSCode | Part of the VSCode Learning Course → https://VSCode.pro
Consider supporting my work by purchasing the course this tutorial is a part of i.e.
VSCode Power User →
🚅 TL;DR
- Make sure your
Local by FlyWheel
WordPress install is a custom install - Configure
xdebug.remote_autostart = 1
- Restart your site container in
Local by FlyWheel
to apply new settings - Install PHP Debugger extension and add PHP Debugger
configuration with an extra property for the
Listen for Xdebug
section i.e. Add this "pathMappings": {"/app/public": "${workspaceRoot}"}
🚥 Detailed Tutorial
Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode:
- 🚅 TL;DR
- 🚥
Detailed Tutorial
- 1️⃣ Custom WordPress Install
- 2️⃣ Configure Xdebug
- 3️⃣ Restart The Site
- 4️⃣ Visual Studio Code Configuration
- 5️⃣ Debug Your WordPress
- 🔥 Extra Plugin (optional)
1️⃣ Custom WordPress Install
Make sure your Local by FlyWheel
WordPress install is a custom install.
- ✅ Flywheel Local has Xdebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new
local environment.
- ⚠️ You can check your already installed WP with the ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running and you have Xdebug installed.
- ⚠️ If not, just export your site, import it
back while creating a new site and this time choose “Custom”.
Configure xdebug.remote_autostart = 1
.
Now in the right environment we need to configure Xdebug for that:
- Go to your local WordPress install path E.g.
/PATH_WHERE_YOU_INSTALLED_WORDPRESS/conf/php/7.x.x/php.ini
- Search for the
[Xdebug]
section - Add
the following line in this section
xdebug.remote_autostart = 1
While only the above option is required but some 3rd party extension/plugin for local can sometimes change things so make sure in the [Xdebug]
section all the following settings are set to 1
(only if your debugger is not working).
xdebug.scream = 1
xdebug.remote_enable = 1
xdebug.show_local_vars = 1
xdebug.remote_autostart = 1
xdebug.remote_connect_back = 1
Save the php.ini file.
3️⃣ Restart The Site
Restart your site container in Local by FlyWheel
to apply new settings.
- On the left side menu, right click on your site
- Select
Restart
option to restart the site.
4️⃣ Visual Studio Code Configuration
Let's start configuration of VSCode:
- First of all, install PHP Debug extension
- Open your Local WordPress site project folder in VSCode. You should open the entire
WordPress site folder i.e.
/PATH_WHERE_YOU_INSTALLED_WORDPRESS/app/public
- Go to the Debug view in VSCode
COMMAND (⌘) + SHIFT (⇧) + D
- Click “Add configuration” from the top toolbar
- Select
PHP
and add the configuration - In the
.vscode/launch.json
file that was created inside the Listen for Xdebug
section add "pathMappings": {"/app/public": "${workspaceRoot}"}
In short, your debug launch.json
file will look like this:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/app/public": "${workspaceRoot}"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
5️⃣ Debug Your WordPress
Now go ahead and debug your WordPress app/plugin/theme and what not.
- After all this, click the play button next to “Listen for Xdebug” in the top debug bar
- Create a breakpoint in your PHP code e.g. add this line and a breakpoint
to header.php
of your theme - Browse your site and VSCode should pop up showing all your debug info
Remember to stop debugging process when you stop working. A good theme helps with that, install
🦄 Shades of Purple →
You can also install a local plugin called
local-addon-xdebug-control
for UI based control of Xdebug settings in your Local by FlyWheel
software.
Make sure everything is set to yes for a sane debugging experience.
Consider supporting my work by purchasing the course this tutorial is a part of i.e. VSCode Power User →
For more follow @MrAhmadAwais →
Peace! ✌️