Configuring Visual Studio Code for PHP development

Two weeks ago I was a speaker at the PHP Benelux conference, where I talked about Azure Machine Learning. For writing and debugging my demo PHP source code, I used Visual Studio Code.

In this blog post I’ll describe the steps for configuring VS Code for doing PHP development. For more details about how VS Code supports PHP, check out the PHP topic in the documentation center.

TL;DR

  1. Download and install Visual Studio Code
  2. Configure PHP linting in user settings
  3. Download and install the PHP Debug extension from the Visual Studio Marketplace
  4. Configure the PHP Debug extension for XDebug

 

Download and install Visual Studio Code

Visual Studio Code is Microsoft’s free, cross-platform lightweight code editor. While you download it (it’s only a 42MB download), let’s look a bit closer at what I just said…

  • Free: indeed, VS Code is entirely free, no gotchas.
  • Cross-platform: VS Code is available for Windows, Linux and OS X
  • Lightweight code editor: as opposed to Visual Studio, VS Code is not a full-fledged IDE but a code editor. It’s a code editor with a number of powerful features you might also find in an IDE, such as intellisense, debugging and Git source control integration.

And by the way, VS Code is also open source – you can contribute to the sources or submit issues in the GitHub repository.

Once you have downloaded the installer package, set it up on your machine. You can find the detailed instructions here. You should now be able to open a command prompt and launch Visual Studio Code and start editing all files in a folder.

image

If you open a file with the .php extension, Code will recognize this file as a PHP file. Alternatively, you can manually change the file type through the Language Mode button at the bottom right of the editor or by pressing Ctrl+K and M keyboard sequence.

image

 

PHP out-of-the-box experience

VS Code supports many languages out of the box, and PHP is one of those languages. Note that more languages are supported through VS Code extensions in the Visual Studio Marketplace. For PHP we provide syntax coloring, bracket matching and code snippets.

As you start typing code in a PHP file, you’ll notice that you get syntax coloring, bracket matching and IntelliSense as you type.

image

 

Configure PHP linting

By default, VS Code will perform PHP linting to validate your code when you save your file. To do so, it is using the php executable. As you use VS Code for the first time, you’ll get an error message that the PHP executable cannot be found.

CannotValidate

As mentioned in the message, you need to specify the path the PHP executable on your machine. This is done in the settings file (VS Code has different levels of settings files, for more details check out the documentation). In this case, we’ll configure the PHP settings globally for the user.

Open the user settings through the command panel: press F1 > type ‘user’ > press Enter.

UserSetting cmd

You will now get two JSON documents: the leftmost document are the default settings, on the right hand side you find the user settings. In the user settings you can override the default settings. For enabling PHP linting, we have 3 settings.

UserSettings

To configure the path to the PHP executable you specify it in the user settings file:

UserSettingsDone

Now you should see validation enabled for you PHP files. In the event of invalid PHP, you’ll see a red squiggly lines in your source code (in below code sample, a semi-colon is missing on line number 2).

image

 

Configure debugging

VS Code provides XDebug debugging support using the PHP Debug extension (kudos to Felix Becker!). First, install the extension from the VS Code command panel: press F1 > type ‘install ext’ and select ‘Install Extensions’. Then type ‘PHP Debug’ in the search box and install the extension. You will have to restart VS Code after installing the extension to activate it.

image

Install Extension

Note that this extension uses XDebug. Therefore you need to ensure that you have installed XDebug. You can download XDebug here (for Windows, you should get the non-thread-safe 32-bit version).

Then, update your php.ini file with the following settings. In my case, I have installed XDebug in the ext subfolder of the PHP install directory. If you installed XDebug elsewhere, make sure that zend_extension points to the correct location.

image

Make sure to point your webserver root to your project and each time you request a PHP file, XDebug will try to connect to port 9000 for debugging.

To start debugging, and navigate to the Debugging tab in VS Code.

image

Then press the little gear icon to generate the launch.json file, which will allow VS Code to start the XDebug debugging session. Make sure to choose PHP as the debug environment.

image

 

To start debugging you can press F5 or click the green arrow in the Debugging tab. You can set breakpoints in your source code by selecting a line and pressing F9.

If you now hit the specific web page, VS Code will break into your source code at the specified breakpoint. You’ll then get information about variables, call stack, etc. in the left hand pane.

image

Conclusion

Visual Studio Code provides great PHP language support out of the box, and with the PHP Debug extension you can now also debug your PHP code. And all this for free, and cross-platform.

There are more PHP extensions in the Visual Studio Marketplace for you to try out.

 

Links: