Visual Studio Code for PHP Development

As mentioned earlier this week, I've been meaning to post this for a while. Since it's now a month since the original talk, and the PHP Adelaide meet-up is scheduled for tonight, it's about time that I finally get this done!

This is effectively just a dump of my notes, slightly formatted for the blog. The information may be slightly out-of-date, so get in contact with me if you'd like to ask for my current recommendations.

About me

I've used PHP for work for a number of years, and have worked with a number of frameworks (Laravel, Yii2) and applications (SugarCRM, and several bespoke projects) in that time.

Previous editor

For the past 2.5 years, I have been using PhpStorm. It's a very well-rounded IDE and I highly recommend it. It's also a paid product, so there's a slight barrier of entry for some. But for your payment you get a regularly updated, comprehensive editor that handles almost all aspects of development that you could want: the code, the database, and version control. And it does each of these very well.

Introducing, VS Code

Visual Studio Code, or VS Code, is built by Microsoft. Not to be confused with their other Visual Studio product for .NET development, Code is a more general-purpose editor and IDE designed to work with a number of programming languages. It's more similar to Sublime Text than it is to the other Visual Studio product line. It's also different when it comes to cost: VS Code is completely free, the other Visual Studio is a paid offering.

Code is an Electron app, which means that it's written in JavaScript and is easy to release cross-platform... which is probably the main reason it is available for macOS, Windows and Linux. It's also very actively maintained by Microsoft, with monthly releases being the norm.

Quick Features

VS Code has a number of key features that are likely to be useful for PHP developers:

  • Debugging support with Xdebug
  • Support for Git out of the box
  • Quick navigation (opening any file using only the keyboard, using Cmd+P)
  • Command interface similar to Sublime's, for mouse-free control (Cmd+Shift+P)
  • Faster than PhpStorm (but naturally, slower than Sublime Text ... and definitely slower than Vim)
  • Automatic updates (for both the IDE and extensions)
  • As alluded to above, it also has a comprehensive extension system
  • Super easy to report issues directly from the editor (as long as you have a GitHub account)
  • Configuration is handled by JSON files, where you add your setting overrides to a JSON array. There is also a settings UI in development which you can test.
  • User Snippets (aka. "Live Templates" in PhpStorm) are also available
  • Snippets and configuration can be language-specific
  • Themes / Icon Packs

Recommended VS Code Extensions for PHP

When you first launch VS Code, the welcome page has a number of links to helpful information. On the right, you'll find a link to pre-install recommended extensions for PHP. I'd highly recommend that you do this. It will install and enable:

  • PHP Debug
  • PHP Extension Pack
  • PHP IntelliSense

Additional extensions that I recommend you install:

  • PHP DocBlocker - Enter /** above a function and it will generate a basic PHPDoc block for you to fill out.
  • PHP Intelephense - More comprehensive auto-complete and linting than the official IntelliSense extension (if you install this one, disable IntelliSense).

VS Code Extensions: Laravel

  • DotENV
  • Laravel 5 Snippets
  • Laravel Blade Snippets
  • Laravel Artisan

VS Code Extensions: Git

GitLens - Git supercharged

  • In-line git blame / annotations
  • Each line of the file has a coloured indicator of additions/changes/removals
  • Significantly better handling of branches and history, compared to the already decent built-in support.

VS Code Extensions: JavaScript

Import Cost

  • Show size of imported assets next to the import statement, which serves as a good reminder to only pull in what you actually need to use, rather than the entire package.

VS Code Extensions: APIs

REST Client

  • Alternative to Postman
  • Make GET/POST/PUT/DELETE requests directly in the editor!
  • See output in a side panel
  • For ease of use, I'd recommend saving a file with the .http extension somewhere, and opening that in VS Code, to automatically enable the extension's functionality.

VS Code Extensions: XML

XML Tools

  • Syntax Highlighting
  • Quick formatting (Cmd+K F)

VS Code Extensions: CSV and TSV Files

Rainbow CSV

  • Colour-coded columns, hover for header text. Makes it extremely easy to scan over a CSV file without mixing up columns.
  • More natural editing than a table UI, but there are extensions available for that if you prefer it.
  • Excel is still better for large sets of columns (12+)

VS Code Extensions: Database (MySQL and PostgreSQL)

In my opinion, none of the database options come close to what PhpStorm offers just yet. However, I have Sequel Pro (macOS only) to fill that gap, so it doesn't particularly bother me.

vscode-database

  • Supports both MySQL and PostgreSQL

MySQL

  • Supports MySQL only

PostgreSQL

  • Use the extension by 'Chris Kolkman'. There is another extension with the same name that I do not recommend.

VS Code Extensions: Local Development (Docker and Vagrant)

If you're working from a local development environment (let's face it ... we all should!) you are likely to also be using Docker or Vagrant.

Docker

  • This extension is actually an official one by Microsoft
  • Solid implementation. Allows you to start/stop/list containers.
  • See the current status of your containers
  • Has web integration with DockerHub, if that is something you use.

Vagrant

  • Allows you to start/stop/etc Vagrant machines using the VS Code command interface (Cmd+Shift+P)
  • See the current status of your machines

VS Code Extensions: Debugging with Xdebug

One of the extensions mentioned right at the top of this list was 'PHP Debug', which is added automatically when you click the 'PHP' link on the welcome screen. It adds integration for Xdebug that easily rivals what PhpStorm offers - and that's saying something, since PhpStorm has a very solid implementation.

VS Code Extensions: Anything else

As you open new file types, VS Code will automatically detect this and suggest extensions for you to use. The editor makes discovery of new extensions very easy, and I found most of the above using this method.

Closing remarks

I encourage you to try VS Code. You can download it for your operating system here: code.visualstudio.com

And if you're a podcaster, listen to the "20 Percent Time" podcast and their episode titled "Editors".

Lastly, let me know if this list helped you! Or, point out an error. I'd love to hear from you. Get in touch here.

Happy coding.

PHP PHP Adelaide Talks Visual Studio Code