Visual Studio Code for Drupal 8 development

Image on Jaxenter.com

Visual Studio Code is a free tool for editing and debugging Web apps based on the Visual Studio Code — Open Source code base.

VS Code is the most used IDE for both frontnend and backend development. The extensions in the Visual Sttudio code marketplace streamline the development process more easier.

Drupal 8 along with VS Code is an amazing integration. The marketplace has many extensions not only for Drupal but also for PHP.

This guide will thoroughly explain the process of setting up Drupal 8 along with PHP XDebug and PHP Code Sniffer.

Setup PHP Code Sniffer

CodeSniffer can be installed system wise by using pear and project wise using composer. For installing CodeSniffer we need pear in our system. Install pear if it isn’t installed already.

sudo apt-get install php-pear

Currently CodeSniffer version greater than 3.0 will not support the Drupal coding standard, so I prefer version 2.9.1, which is PHP_CodeSniffer-2.9.1.

sudo pear install PHP_CodeSniffer-2.9.1

if you have already installed PHP_CodeSniffer version greater than 3.0, then uninstall that version by sudo pear uninstall PHP_CodeSniffer and install the version 2.9.1.

Install composer if it is not installed yet

sudo apt install composer

Type composer in terminal to verify installation

Install Coder (8.x-2.x) in your global Composer directory in your home directory.

sudo composer global require drupal/coder

Check installation location by

composer global show -P

Install dealerdirect/phpcodesniffer-composer-installer package

sudo composer global require dealerdirect/phpcodesniffer-composer-installer

Install CodeSniffer to composer

sudo composer require --dev squizlabs/php_codesniffer

Or you can simply edit the global composer.json file and update composer

{
	  “require”:{
	    “squizlabs/php_codesniffer”:”2.9.1”,
    “drupal/coder”:”^8.2”	
  }
}

Set coder path

sudo phpcs --config-set installed_paths  [path of 'drupal/coder’]/coder_sniffer

You can view the path by typing

composer global show -P

Usually path is

~/.composer/vendor/drupal/coder/coder_sniffer

To see registered PHP CodeSniffer coding standards

phpcs -i

Set Drupal coding standard as default

sudo phpcs --config-set default_standard Drupal

Enable the phpcs plugin in the VS code and reload.

To work in Drupal project, update the composer of the drupal project after all the above steps.

composer update

After updating you can see that in your project Drupal coding standard by CodeSniffer is installed.

Get Anonymous Hackers’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

View

your_project_directory/vendor/drupal/coder/coder_sniffer

Then add array elements:

‘default_stanedard’ => ‘Drupal’,

‘installed_paths’ => ‘../../drupal/coder/coder_sniffer/’,

to $phpCodeSnifferConfig array, which you can find in

your_project_directory/vendor/squizlabs/php_codesniffer/CodeSniffer.conf

The file should look like this.

<?php
$phpCodeSnifferConfig = array (
 'installed_paths' => '../../drupal/coder/coder_sniffer/',
 'default_standard' => 'Drupal',
)
?>

Now you can check out coding standard in VS code. An example picture is given. The red underline indication and the popup contain ‘[phpcs]’ shows coding standard error.

Or we can simply type phpcs yourfile_name.php in terminal it will list out all the coding standard errors in the file.

phpcs yourfile_name.php

In Drupal, following coding standards is mandatory. By using Visual Studio Code Editor we can learn and understand Drupal coding standards while working on a project and it will also help to avoid mistakes in coding.

Setup PHP XDebug

Launch Configuration

Now we need to setup launch configuration file in Visual Studio Code. Go to debug menu on left sidebar then click config button.

A window will coming up and open the launch.json file, add these lines into it:

...
"configurations":[
{
  "name": "Listen for XDebug",
  "type": "php",
  "request": "launch",
  "log": true,
  "pathMappings": {
  "/var/www/html": "/Users/KingpinLulzsec/Code/php/my_project"
  }
}
...

Now open any document and test the debugger. Here, I am testing an old PHP project.