Desarrollo Drupal con Sublime Editor 3

Sábado, Septiembre 2, 2017 - 15:20

Sublime Text lleva siendo mi editor preferido para trabajar desde hace un montón de años. Es muy ligero, me gustan los atajos de teclado, muy configurable y tiene un sistema de plugins que le da mucha potencia.

La versión 3 lleva en beta por lo menos desde 2013, y todo el tiempo que llevo usándola no he tenido problemas.

Quería escribir un articulo con mi configuración personal que utilizo para trabajar en proyectos Drupal, y que aporta funcionalidad y facilita la vida. Como resumen:

Revisión de código al momento: Marcado de estándares de Drupal, errores de sintaxis, etc.
Marcado de modificaciones en Git: Cada cambio que hacemos en un fichero lo vemos resaltado, muy útil para saber de un vistazo las modificaciones que hemos hecho al archivo.

Lo primero de todo es instalar el editor. Estamos de suerte porque tenemos paquetes binarios empaquetados para unas cuantas distribuciones Linux. Este es el enlace de descargas:

https://www.sublimetext.com/docs/3/linux_repositories.html

Package Control

La primera extensión que vamos a instalar es básica para sacarle buen partido a este editor: Package Control. Este plugin nos va a ayudar a instalar fácilmente otros plugins, básicamente. Para instalar paquete Package Control, vayamos a su pagina:

https://packagecontrol.io/installation

Una vez instalado podremos utilizar CTRL + SHIFT + p para abrir una consola donde podremos ejecutar comandos.

Instalar Sublime linter

Sublime Linter es un plugin genérico que sirve de base para otros 'linters' mas específicos (PHP, Java, SASS, etc.) que necesitamos instalar primero. Estos plugins nos ayudarán a mantener nuestro código limpio y seguir los estándares del lenguaje en el que estamos programando, de forma que nos van avisando si cometemos errores de formato o sintaxis, a media que escribimos el código. Lint significa pelusa en ingles, y eso es justo lo que hacen estos plugins, quitar pelusa.

Instalarlo es sencillo una vez tenemos el package manager instalado:

Abrimos comandos con CTRL+SHIFT+p
Teclear install y ENTER
buscamos el paquete SublimeLinter
ENTER otra vez

Y ya lo tenemos. Seguimos adelante.

Instalar PHP_CodeSniffer (phpcs)

PHP_CodeSniffer es la herramienta que nos va a ayudar a identificar cualquier violación de los estándares de PHP. Es un ejecutable que debemos instalar en nuestro sistema, por lo que necesitamos tenerlo en nuestra variable PATH. La ultima versión a fecha de escribir este articulo es la 3.0.2, pero para hacerlo funcionar con el modulo Coder de Drupal necesitamos quedarnos con la 2.7.0. Cuidado con esto que puede cambiar en el futuro, así que revisa las versiones antes de instalar.

La forma mas sencilla de instalarlo es usando pear:

sudo pear install PHP_CodeSniffer-2.7.0

Con esto tendremos dos ejecutables:

phpcs: el "code sniffer" para inspeccionar el código y reportar errores.
phpcbf: el "Code Beautifier and Fixer", que se utiliza para realizar correcciones automáticas en el código.

Añadir los estándares de Drupal a phpcs. Módulo Coder

Ahora que ya tenemos instalado phpcs, necesitamos incluirle las definiciones de los estándares de código de Drupal. Para esto instalaremos el módulo Coder de Drupal. Vayamos a la carpeta donde lo queramos dejar instalado, que puede ser cualquier sitio, no hace falta que sea dentro de un proyecto o sitio Drupal. Eso si, antes necesitaremos tener instalado Drush. Por ejemplo:

cd /path/para/coder

drush dl coder

Con esto deberíamos haber instalado la versión 8.x que es la última. Ahora ya podemos decir a phpcs donde están estos estándares de Drupal:

sudo phpcs --config-set installed_paths /path/para/coder/coder/coder_sniffer

Y ahora ya podemos ejecutar phpcs para revisar cualquier archivo de código Drupal, así:

phpcs --standard=Drupal ruta/al/archivo/a/revisar

Volvemos a Sublime: SublimeLinter-phpcs

Ahora que ya tenemos phpcs funcionando nos volvemos a Sublime para instalar el plugin que vamos usar mientras picamos código, SublimeLinter-phpcs. Para instalarlo:

Abrimos comandos con CTRL+SHIFT+p
Teclear install y ENTER
buscamos el paquete SublimeLinter-phpcs
ENTER otra vez

Una vez instalado el paquete, seguimos las instrucciones de configuración que nos detallan. Al final, si vamos a Preferences / Package settings / Sublime linter / User, debemos tener una sección en la configuración parecida a esto:

        "linters": {
            "phpcs": {
                "@disable": false,
                "args": [],
                "excludes": [],
                "standard": "Drupal"
            }
        },

Cuando funcione, Sublime nos ira mostrando los errores que tengamos en el código de esta manera:

SublimeLinter-phpcs

Cambios en Git: GitGutter

Por ultimo, otro pequeño plugin que nos mostrará los cambios que hayamos hecho al archivo en local, desde el último commit de Git. Es muy útil porque de un vistazo nos deja ver las lineas que hemos añadido, modificado o borrado del fichero. Si lo combinamos con cualquiera de los otros plugins de Git para Sublime, nos puede ayudar bastante para tener claro que estamos tocando.

Instalarlo es sencillo, como los anteriores:

Abrimos comandos con CTRL+SHIFT+p
Teclear install y ENTER
buscamos el paquete gitgutter
ENTER otra vez

Una vez este funcionando, podremos ir viendo las modificaciones que vayamos haciendo en el fichero en la parte de la izquierda, con diferentes símbolos para líneas nuevas o modificadas, como se puede ver en la siguiente imagen.

Sublime-gitgutter

Preferencias generales de Sublime

Para terminar os dejo aquí las preferencias básicas de Sublime que utilizo con proyectos Drupal

{
  "bold_folder_labels": true,
  "caret_style": "wide",
  "default_line_ending": "unix",
  "draw_white_space": "all",
  "ensure_newline_at_eof_on_save": true,
  "fade_fold_buttons": false,
  "fallback_encoding": "UTF-8",
  "find_selected_text": true,
  "font_options":
  [
      "subpixel_antialias"
  ],
  "highlight_line": true,
  "line_padding_bottom": 1,
  "open_files_in_new_window": false,
  "rulers":
  [
      80
  ],
  "shift_tab_unindent": true,
  "soda_classic_tabs": true,
  "tab_size": 2,
  "theme": "Flatland Dark.sublime-theme",
  "translate_tabs_to_spaces": true,
  "trim_automatic_white_space": true,
  "trim_trailing_white_space_on_save": true,
  "use_tab_stops": true,
  "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?",
}