Configuring VScode

VS Code is an free and OpenSource tool for Editing and Debugging Web Apps.

VS Code is available for Mac, Linux and Windows.

Base Configuration

Default configurations can be overridden by accessing Preferences -> User Settings. By default, VS Code defaults are fine for Drupal, just a few tweaks are required:

// Place your settings in this file to overwrite the default settings.
{
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "files.trimTrailingWhitespace": true
}

Extensibility

VS code provides a bunch of functionalities out of the box, like integration with Git and debugging. Besides that it can be extended using extensions. They can be installed using the extensions pane, accessing View -> Extensions. Below is a list of useful extensions to use during Drupal development:

• phpcs: Provides linter integration with phpcs
• Drupal 7 snippets: Provides autocompletion for main Drupal hooks structure (core).
• Drupal 7 hooks snippets: Provides autocompletion for main Drupal hooks (core, views, entity, libraries, ctools).
• Drupal Syntax Highlighting: Provides syntax highlight for Drupal specific file types.
• Empty Indent: Removes indent of empty lines on save.
• PHP Intellisense: Provides code completion without any dependencies.
• PHP Debug: Provides integration with xdebug.

After installing a new extension, it may be required to configure it in the User Settings file, the following example includes settings for phpcs, empty indent and Intellisense:

// Place your settings in this file to overwrite the default settings
{
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "files.trimTrailingWhitespace": true,
  "telemetry.enableTelemetry": false,

  /* PHPCS */
  "phpcs.enable": true,
  "phpcs.standard": "/Users/<your-username>/.composer/vendor/drupal/coder/coder_sniffer/Drupal/ruleset.xml",
  "phpcs.extensions": "php,module,inc,install,test,profile,theme",

  /* Empty Indent */
  "emptyIndent.removeIndent": true,
  "emptyIndent.highlightIndent": false,
  "emptyIndent.highlightColor": "rgba(246,36,89,0.6)",

  /* 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/*"
  ]
}