Visual Studio Code Custom Settings

The custom VS Code settings herein focus on a development workflow geared toward PHP, Drupal, Twig, Sass (SCSS), Liquid, and Javascript. You can get up and running with these custom settings by leveraging the VS Code Settings Sync extension.

Highlights

• PHP code sniffer
• Xdebug
• Material UI and icons
• PHP code intelligence and formatter
• SCSS formatting and intelligence
• Javascript & jQuery code hinting and linting

(List below)

To get up and running with these settings:

Warning: Syncing these settings will wipe out your own custom settings so it might be a good idea to sync your current settings to a dedicated Gist first.

If you end up liking these settings, theoretically, you could create a new empty Gist and then point and upload to the new Gist with these settings as of course you would not be able to write to my gist.

1. Install the Settings Sync extension from within VS Code.

2. From the command palette: >Sync > Advanced options > open settings

3. Here, you are presented with an option for a Gist ID and custom access token which you will need to create in your github account.

4. Input the Gist ID, 365a204e173853452b436f53cc2fbb28 and the custom access token you just created above. (You can see the full gist here.)

5. Now download the custom settings using the keyboard command, Shift + Option + d. This will also download dependent extensions into ~/.vscode/extensions.

6. Note, if you were already using the sync extension, you may need to set Settings sync to force download.

7. For Xdebug to work, you will need to create a launch.json file in the root of your project located at /.vscode/launch.json. You can read about the settings, here. I use Docksal for my local development environment and here are my custom Xdebug settings that are in launch.json. (These settings may vary depending on your local environment setup.)

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Listen for XDebug via Docksal",
          "type": "php",
          "request": "launch",
          "port": 9000,
          "pathMappings": {
            "/var/www/": "${workspaceRoot}"
          }
        },
        {
          "name": "Launch currently open script",
          "type": "php",
          "request": "launch",
          "program": "${file}",
          "cwd": "${fileDirname}",
          "port": 9000
        }
      ]
    }
   

8. There are a few tweaks that I needed to make.

   • Set curly braces for Intelephense on functions to not go to the next line. "intelephense.format.braces": "k&r", ¹ You would put this in your VS Code settings.json file which can be opened from the command palette, >Preferences: Open Settings (JSON)
   • Drupal .module files not recognized by PHPCS - This is a known issue and there is a pull request open. Add "extensions" configuration setting #172 - Since the PR has not been approved yet, a quick fix is here: ikappas/vscode-phpcs#159 (comment)

   lintArgs.push('--extensions=inc,install,module,php,profile,theme');

Highlighted extensions

• VS Code PHPCS - Integrates phpcs into Visual Studio Code
• Bracket Pair Colorizer - allows matching brackets to be identified with colors
• PHP Debug Adapter for Visual Studio Code (Xdebug)
• PHP Intelephense - PHP code intelligence and formatter for Visual Studio Code
• Settings Sync - must have extension to sync all your VS Code settings to a Github Gist
• Material Theme, the most epic theme for Visual Studio Code
• Material Icon Theme
• VSCode Color Info
• VS Code SCSS Formatter - an extension for Visual Studio Code to format SCSS.
• SCSS IntelliSense - smart autocomplete of variables, mixins, and functions for all files in the project
• VS Code JSHint extension

PHPCS / Drupal Coder

To use the PHPCS VS Code extension, you will need to install these globally via Composer.

composer global require squizlabs/php_codesniffer
composer global require drupal/coder

Then, symlink them:

ln -s ~/.composer/vendor/drupal/coder/coder_sniffer/Drupal ~/.composer/vendor/squizlabs/php_codesniffer/src/Standards/Drupal
ln -s ~/.composer/vendor/drupal/coder/coder_sniffer/Drupal ~/.composer/vendor/squizlabs/php_codesniffer/src/Standards/DrupalPractice
ln -s ~/.composer/vendor/bin/phpcs /usr/local/bin/phpcs

1: "The K&R style (Kernighan & Ritchie Style), which is also called "the one true brace style" in hacker jargon (abbreviated as 1TBS), is commonly used in C, C++, and other curly brace programming languages." https://en.wikipedia.org/wiki/Indentation_style#K&R_style