Configurar VSCode para programar en Drupal

Configurar VSCode para programar en Drupal 8 es muy sencillo. En este artículo voy a mostrarte como hacerlo (y podrás descargar la configuración que yo uso).

Cuando queremos comenzar a programar módulos o temas para Drupal (o cualquier plataforma), es indispensable que nuestro IDE o nuestro editor de código tengan instalados los plugins adecuados.

Los módulos que yo uso

En el caso de Drupal 8 yo utilizo los siguientes plugins que me ayudan a realizar una codificación limpia, ajustarme a la hoja de estilo de Drupal, utilizar SASS, Composer, Git...

Aquí tienes el listado por orden alfabético:

• Bootstrap v4 Snippets: Snippets que nos facilitan la codificación para el framework Bootstrap.
• Debugger for Chrome: para poder depurar nuestro javascript en Chrome.
• PHP IntelliSense: una de las mejores extensiones para programar en PHP dentro de VSCode. Nos ayuda a completar código, nos da referencias de las funciones...
• Drupal 8 Snippets: snippets que nos ayudan a completar código en hooks y otras funciones propias de Drupal 8.
• Drupal 8 Twig Snippets: igual que el plugin anterior pero esta vez para el diseño de las plantillas.
• Drupal Syntax Highlighting: nos permite mostrar la sintaxis de archivos específicos de Drupal como los .module, .theme, ...
• Empty Indent: imprescindible para una correcta codificación siguiendo la hoja de estilos de Drupal. Este plugin borra espacios en blanco donde no debería haberlos.
• Gitignore: para generar el archivo .gitignore a través de plantillas preestablecidas.
• HTML CSS Support: nos permite autocompletar ids y clases en nuestros archivos CSS y SCSS.
• IntelliSense for CSS class names in HTML: parecido al plugin anterior pero más orientado a HTML.
• Live Sass Compiler: nos permite no tener que compilar nuestros archivos SCSS desde la línea de comandos.
• Live Server: permite lanzar nuestro proyecto en el servidor local y que éste se refresque automáticamente.
• Markdown Preview Github Styling: para previsualizar los archivos README.MD de git.
• Path Autocomplete: nos va autocompletando las rutas en los include, src de la etiquetas img...
• PHP Debug: para dar soporte a XDebug.
• PHP DocBlocker: este plugin nos permite documentar nuestro código de forma semiautomática.
• PHP Intelephense: para ayudarnos en nuestra codificación PHP. Este plugin es indispensable.
• phpcs: este plugin es para dar soporte a CodeSnifer, así nos aseguramos de cumplir la hoja de estilo de Drupal 8.
• Sass: autocompletado, snippets, sintaxis... todo para usar Sass en nuestros proyectos.
• sftp: para conectarnos con nuestro FTP y subir los archivos que estamos modificando.
• SVG Viewer: nos permite visualizar los archivos SVG.
• Twig Language 2: snippets y más para trabajar con el lenguaje de plantillas de Drupal 8.

Configurando los plugins

Una vez tengas instalados todos estos plugins deberás configurarlos según tus necesidades.

Realizar la configuración de estos plugins para nuestros proyectos en VSCode es muy sencillo, pero para que no tengas que investigar mucho te dejo a continuación la configuración que yo uso para Drupal 8.

{
  /* CONFIGURACIONES GENERALES DEL EDITOR */
  "css.validate": true,

  "html.format.enable": true,
  "html.format.wrapLineLength": 80,

  "diffEditor.ignoreTrimWhitespace": false,

  "telemetry.enableTelemetry": false,

  "editor.tabSize": 2,
  "editor.autoIndent": true,
  "editor.insertSpaces": true,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.renderWhitespace": "boundary",
  "editor.wordWrapColumn": 80,
  "editor.wordWrap": "off",
  "editor.detectIndentation": true,
  "editor.fontSize": 14,

  "explorer.openEditors.visible": 0,

  "workbench.colorTheme": "Monokai Dimmed",

  "files.associations": {
    "*.inc": "php",
    "*.module": "php",
    "*.install": "php",
    "*.theme": "php",
    "*.tpl.php": "php",
    "*.test": "php",
    "*.php": "php",
    "*.twig": "html",
  },
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "files.autoSave": "onFocusChange",

  "emmet.includeLanguages": {
    "twig": "html"
  },

  /* SASS */
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.excludeList": [
    ".vscode/**",
    "css/**"
  ],
  "liveSassCompile.settings.showOutputWindow": false,

  /* SVG */
  "svgviewer.enableautopreview": true,

  /* PHP Code Sniffer */
  "phpcs.enable": true,
  "phpcs.standard": "Drupal,DrupalPractice",

  /* PHP Validation */
  "php.validate.enable": true,
  "php.validate.executablePath": "C:\xampp\php\php.exe",
  "php.validate.run": "onType",

  /* PHP Intellisense */
  "php.suggest.basic": false,

  /* PHP DocBlocks */
  "php-docblocker.gap": true,
  "php-docblocker.useShortNames": true,
  "php-docblocker.author": {
    "name": "Óscar Novás",
    "email": "hola@oscarnovas.com"
  },
  "php-docblocker.extra": [
      "@author Óscar Novás",
      "@version Unknown",
      "@todo Unknown"
  ],

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

  /* Crane PHP Intellisense */
  "crane.showStatusBarBugReportLink": false,
  "crane.ignoredPaths": [
    ".vscode/**"
  ],

  /* GIT */
  "git.showPushSuccessNotification": true,
  
  /* COMPOSER */
  "composer.executablePath": "C:\composer\composer.bat",
}

Los plugins sftp y PHP Debug tienen sus propios archivos de configuración.

Descarga mi configuración de VSCode

Para no abrumarte con tanta información, ya que el post me está quedando algo largo, te pongo el enlace para que puedas descargar los tres archivos de configuración:

Enlace GitHub (https://github.com/oscarnovasf/VSCode-settings)

Extra

En la descarga anterior se incluyen dos archivos con algunos snippets que te ayudaran en la generación de formularios con la FormApi de Drupal y también a no tener que recordar los namespaces de algunas de las principales clases.