Using Visual Studio Code for editing Drupal 8

After seeing many people use VSCode as their code editor, I’m starting to use it myself at work. So far I have been using vim, but with the move to Drupal 8 I think having code completion and an explorer pane would be helpful. Time to check it out!

Code completion & Syntax Highlighting

The most important thing is to get IntelliSense, which is Microsoft’s implementation of code completion, to work with PHP. By default, if you select you want to set up Visual Studio Code for PHP, it installs a couple of PHP extensions — including a PHP IntelliSense plugin that I couldn’t get to work properly – at least not with Drupal 8. The one that works for me is the Crane PHP IntelliSense plugin. However, I couldn’t get it to recognize variable types — even when it’s an argument with type hint — so you can’t get code completion when trying to get a value for

Furthermore, there are some drupal specific plugins — you can search the extensions for “Drupal”, and I installed the “Drupal Syntax Highlighting” and “Drupal 8 Snippets” plugins, although I have yet to find out how useful these are.

Debugging

In order to debug, I installed XDebug and enablee the php-debug extension. Following the instructions given by the plugin, I was then able to debug Drupal8, and it works great. Two things to note:

  1. Always use this with the “Listen for XDebug” setting. Running the active script won’t work because you don’t get Drupal set up.
  2. Once XDebug is installed, you can set breakpoints in your code by calling xdebug_break().

As an aside, the installation wizard for XDebug on Windows is amazing, especially compared to other extensions for PHP on Windows.

Configuration

I’m currently using the using the following user configuration, to comply with Drupal coding standards:


{
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "files.trimTrailingWhitespace": true,

  /* Crane php intellisense */
  "crane.showStatusBarBugReportLink": false,

  /* Ignore some D8 paths */
  "crane.ignoredPaths": [
    "sites/default/files/*",
    "vendor/*",
    "core/themes/*",
    "core/tests/*",
    "core/scripts/*",
    "core/profiles/*",
    "core/misc/*",
    "core/assets/vendor/*",
    "themes/*",
    "sites/*"
  ]
}

This is based on the post “Configuring VSCode” on Drupal.org.

Conclusions

So far, it seems to work well. I’m still quite new, and I’ll keep looking for improvements — one is the “rainbow-indent” plugin, which is quite nice. I’ll keep this post updated in case I have more results or better recommendations.

back to overview