Instalación de paquetes en Sublime Text

Los paquetes añaden funcionalidades adicionales al editor Sublime Text, lo que constituye una de sus principales ventajas. El número de paquetes disponibles en la actualidad es muy grande. Así, por lo tanto, comentaremos únicamente algunos de los más interesantes para el desarrollo Web, que permitirán editar código más fácilmente.

Previamente a la instalación de paquetes hemos de tener instalado el componente Package Control o gestor de paquetes de Sublime Text, ya comentado en la instalación del editor.

Encontraremos las instrucciones detalladas de cómo instalar Package Control en la dirección Package Control. No olvidemos reiniciar el programa cuando finalice la instalación del mismo.

Para comprobar que lo tenemos bien instalado, utilicemos la combinación de teclas Ctrl + May + P, que mostrará la paleta de comandos. Si escribimos la palabra pack se nos mostrarán en inglés todas las operaciones que podemos hacer con el Package Control.

A partir de esta paleta de comandos podremos gestionar los paquetes que tenemos instalados en Sublime Text de forma cómoda. Siempre que necesitemos ejecutar uno de estos comandos, pulsaremos la combinación de teclas Ctrl + May + P y a continuación, entre otras muchas opciones, podremos:

Instalar un nuevo paquete

Escribiremos el comando Install Package. Se nos mostrará otra ventana con un listado de todos los paquetes disponibles para su instalación para que escribamos un nombre de paquete a instalar.

Mostrar la lista de paquetes ya instalados

Escribiremos el comando List Packages. Se nos mostrará otra ventana con un listado de todos los paquetes ya instalados.

Eliminar un paquete instalado

Escribiremos el comando Remove Package. Se nos mostrará otra ventana con un listado de todos los paquetes ya instalados para que escribamos un nombre de paquete a eliminar.

Actividad de autoevaluación: Instalar paquetes

Paquetes interesantes para desarrollo Web 

Tag

Facilita el trabajo con etiquetas HTML y XML. Una vez instalado, desde la paleta de comandos (Ctrl + May + P), escribiendo Tag encontramos las posibilidades de gestión de etiquetas. Algunas tienen una combinación de teclas asociada, como por ejemplo Ctrl + Alt + T que coloca las sangrías de las etiquetas del fichero correctamente.

Emmet

Antiguamente llamado Zen Coding, Emmet es uno de los paquetes más potentes. Permite escribir abreviaturas que facilitan la escritura de lenguajes como HTML y XML. Todas están basadas en escribir un texto y pulsar la tecla tabulador. Muchos editores permiten almacenar y reutilizar segmentos de código, llamados snippets. El problema que suelen tener es que hay que definir previamente dichos segmentos y la lista de segmentos no se puede extender en tiempo de ejecución. Con Emmet podremos escribir abreviaturas en una sintaxis muy similar a la de CSS, que serán analizadas dinámicamente y que producirán el resultado dependiendo de lo escrito en la abreviatura.

Por ejemplo, la siguiente abreviatura:

    #page>div.logo+ul#navegacion>li*5>a{Elemento $}

Producirá el siguiente código:

    <div id="page">
      <div class="logo"></div>
      <ul id="navegacion">
          <li><a href="">Elemento 1</a></li>
          <li><a href="">Elemento 2</a></li>
          <li><a href="">Elemento 3</a></li>
          <li><a href="">Elemento 4</a></li>
          <li><a href="">Elemento 5</a></li>
      </ul>
  </div>

Se recomienda encarecidamente visitar la documentación de este paquete en la dirección Emmet Documentation ? The essential toolkit for Web-developers y probar muchas de las abreviaturas disponibles.

Probar las siguientes abreviaturas y ver qué resultado produce Emmet:

  • html:5
  • documento
  • documento+notas
  • documento[titulo]
  • documento[titulo=?doc1?]
  • documento>autor
  • documento>autor>nombre
  • documento>autor>nombre+apellidos
  • documento>autor*3
  • documento>titulo+texto>tipo+linea*4
  • table>tr*3>td*3

 Una buena demostración de este paquete se encuentra en el siguiente vídeo: CSS-Tricks ? 129:Emmet is awesome.

BracketHighlighter

Este paquete permite colorear los elementos que agrupan código, por ejemplo, las etiquetas HTML, las llaves de lenguajes como JavaScript o PHP. Esto nos permitirá no olvidarnos de cerrar una etiqueta, una llave o corchete en estos lenguajes. Podemos además configurar los colores que vienen de forma predeterminada en sus archivos de configuración, si no nos gustan.

Podemos ver que este paquete permite resaltar tanto la etiqueta de apertura como la de cierre cuando nos situamos en una de las dos.

Trailing Spaces

Este paquete permite resaltar los espacios en blanco y tabulaciones innecesarios en el código al final de las líneas, que molestan y ocupan espacio inútil. Cuando lo instalemos, se resaltarán estos caracteres. Para eliminarlos de forma automática podemos usar el menú Edit > Trailing Spaces > Delete o con la combinación de teclas Ctrl + May + P, escribimos Spaces:Delete y pulsando Enter.

Para añadir una combinación de teclas para que haga la eliminación de estos caracteres automáticamente, debemos seleccionar el menú Preferences > Key Bindings ? User y añadir la siguiente línea, o una similar con la combinación de teclas que deseemos:

    { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }

SublimeLinter

Este paquete nos permitirá mejorar nuestra escritura de código en varios lenguajes. Puede ayudarnos a escribir más claro y mejor, para producir un código libre de errores, de forma sencilla. La instalación desde el gestor de paquetes de Sublime Text no supondrá ningún problema: usaremos la combinación de teclas Ctrl + May + P, escribiremos Install Package y después escribiremos SublimeLinter.

SublimeLinter utilizará programas que se conocen como de tipo linter es decir, aquellos diseñados para corregir código fuente de un determinado lenguaje de programación, a medida que se va escribiendo. De esta forma, sin necesidad de validar nuestro programa, ni compilarlo, desde el propio editor Sublime Text podremos ir viendo si el programa tiene algún tipo de error.

El término inglés linter no tiene una traducción clara al español. Lint es hilo, y linter podría referirse a quitar hilos, es decir, en el contexto del desarrollo Web, quitar código inservible.

Para poder utilizar el paquete SublimeLinter habrá por tanto que instalar estos programas tipo linter que necesita para analizar nuestro código. Estos programas se encargarán de realizar la verificación del código que escribamos. Existirá una instalación de un programa linter por cada lenguaje que necesitemos comprobar. Existen muchos disponibles para los lenguajes de programación de desarrollo Web como, por ejemplo para:

JavaScript

 jshint

HTML

html-tidy

CSS

csslint

PHP

php

Ruby

ruby

Python

pep257 o pep8

HAML

haml

XML

xmllint

Java

javac

Adicionalmente a estos programas linter tendremos además que tener el software necesario para poder programar en los lenguajes de programación que queramos desarrollar en el editor Sublime Text, por ejemplo, PHP, Python, etc.

Como hemos comentado, debemos instalar los programas linter como paquetes adicionales a la instalación del paquete SublimeLinter. Así que serán paquetes a añadir, y uno por cada lenguaje de programación que queramos que nos valide. Vamos a instalar el paquete linter para que valide el códigoJavaScript. Para ello, tendremos que hacer dos cosas: en primer lugar, instalar el paquete SublimeLinter-jshint y en segundo lugar, instalar el software en el sistema operativo Windows para tener disponible el lenguaje JavaScript. Esto último se hará mediante la instalación de Node.js.

Este programa, Node.js también permite añadir nuevas funcionalidades a través de componentes llamados también paquetes. Esto lo podremos hacer a través de un gestor de componentes que se instalará cuando instalemos Node.js, que se llama npm. Con él podremos instalar el paquete jshint dentro de Node.js, que es el verdadero programa linter para el lenguaje JavaScript. Así, para que el paquete SublimeLinter dentro del editor Sublime Text funcione, necesitaremos instalar todo este software previamente. Lo haremos paso a paso:

Instalación de SublimeLinter-jshint

Usamos la combinación de teclas Ctrl + May + P, escribimos Install Package, y después SublimeLinter-jshint.

Instalación de Node.js y npm

Al instalar Node.js también instalaremos el gestor de paquetes de software npm. Para ello, podemos descargar la última versión de Node.js desde su página Web Nodejs.org.

Una vez instalado Node.js comprobaremos que se ha instalado correctamente el gestor de paquetes npm. Para ello, podemos abrir una consola de comandos en nuestro sistema operativo. En Windows, por ejemplo, pulsaremos la combinación de teclas Windows + R y después escribiremos cmd. En la ventana que se abra, escribiremos npm -v para comprobar la versión de este programa que hemos instalado.

Instalación de jshint

Instalamos el paquete jshint dentro de Node.js para que así tengamos el programa linter para el lenguaje JavaScript disponible en el sistema operativo Windows como programa, como componente de Node.js, y que utilizaremos en Sublime Text a través de su paquete SublimeLinter. Para hacerlo, ejecutaremos en la consola de comandos del sistema operativo, el comando:

    npm install ?g jshint

Se recomienda cerrar y volver a abrir el editor Sublime Text para que todo lo anterior haga efecto en Sublime Text.

Estos programas validadores, o linters, deberán ser accesibles desde la línea de comandos de nuestro sistema operativo, lo que significará instalarlos adecuadamente, quizá añadiendo la ruta a dicho programa a la variable Path del sistema, en sistemas Windows.

A partir de ahora, todo el código JavaScript que escribamos, si cometemos algún error, el paquete SublimeLinter nos lo indicará:

El linter para JavaScript jshint nos indicará con puntos rojos los errores y con puntos amarillos las advertencias y en la barra de estado de Sublime Text veremos el texto del mensaje de error o advertencia.

Para instalar otros programas tipo linter realizaremos un proceso similar. Así, buscaremos e instalaremos los paquetes SublimeLinter-html-tidy y SublimeLinter-csslint para trabajar con HTML y CSS respectivamente. Aquí encontraremos la información para instalarlos bien:

SublimeLinter tiene muchas opciones de configuración y funcionalidades, como deshabilitar el análisis del código o no, cuándo deberá analizarlo, diferentes combinaciones de apariencia en cuanto a colores o iconos usados, que nos enseñe todos los errores o que haga un informe de ellos en una pestaña separada, si nos enseña los errores al guardar cada fichero, opciones de documentación para ciertos lenguajes de programación, etc.
Para más información sobre este paquete podemos acudir a su página Web SublimeLinter.

Goto Documentation

Este paquete permite consultar la documentación oficial del lenguaje en el que estamos escribiendo. Soporta JavaScript/CoffeScript, PHP, CSS/SASS/LESS, Python, Go, Ruby y otros muchos lenguajes. Una vez instalado, lo que debemos hacer para buscar información sobre algo del lenguaje es poner el cursor encima de la palabra y pulsar la combinación de teclas Windows + May + H o también mediante la paleta de comandos (Ctrl + May + P) y después escribiendo Goto Documentation. El resultado será que se abrirá el navegador con la página de ayuda para el término procedente del código en el que no hubiéramos posicionado.

DocBlockr

Este paquete permite que añadamos con comodidad bloques de comentarios a varios lenguajes de programación, entre ellos JavaScript, PHP y Java. Una vez instalado, por ejemplo, en JavaScript, si escribimos la secuencia /*, la completará al pulsar Enter con la secuencia */. Justo en la línea de encima de una función en JavaScript, al escribir la secuencia /** y al pulsar Enter, creará un bloque de comentario en el que creará una línea por cada parámetro de entrada de la función más otro adicional para el valor devuelto por la función:

Hayaku

El paquete Hayaku nos permitirá escribir código CSS mucho más rápidamente, utilizando abreviaturas. Soporta preprocesadores CSS como Sass, Less y Stylus. Obtenemos ayuda sobre las abreviaturas que podemos utilizar en el enlace Hayaku ? tools for writing CSS faster.

AutoPrefixer

Permite añadir a partir de una regla CSS, los diferentes prefijos aplicables a los navegadores más conocidos (Firefox: -moz-, Internet Explorer: -ms-, Chrome y Safari: -webkit- y Opera: -o-). Este paquete usa información de la base de datos del portal Caniuse.com para añadir los prefijos, el cual soporta tanto CSS3 como HTML5 y SVG. Por defecto añade los prefijos para las dos últimas versiones de cada navegador, pero esto se puede configurar para ser ampliado. Para usarlo, solo tendremos que ir al gestor de paquetes (Ctrl + May + P) y seleccionar el comando Autoprefix CSS. Esta es quizá la solución más completa para añadir los prefijos de los navegadores, aunque también es posible usar Emmet.

Editorconfig

Ayuda a definir y mantener estilos de codificación consistentes entre diferentes editores y entornos de desarrollo. Define en un fichero llamado .editorconfig una serie de estilos de codificación para que, no solo Sublime Text, sino otros muchos editores de desarrollo Web, compartan el mismo estilo de generación de ficheros de código fuente.

Actividad de autoevaluación: Paquetes para desarrollo Web

Otros paquetes 

Git Gutter

Este paquete permite ver las diferencias que hemos hecho en un fichero antes de ser gestionado con control de versiones tipo Git. Mostrará un icono en la parte izquierda de la numeración de líneas que indicará si se ha insertado una línea, si se ha modificado o eliminado. Necesita que antes esté instalado Git en nuestro equipo y que el programa git.exe esté añadido a la variable de entorno Path.

Compare Side-By-Side

Este paquete añade una sencilla herramienta comparación entre dos ficheros abiertos uno al lado del otro, en Sublime Text. Cada fichero estará en una pestaña distinta y los resultados pueden verse en una tercera. Mostrará los resultados en colores, contará el número de líneas modificadas, sincronizando el desplazamiento vertical.

BracketHighlighter

Este paquete nos ayuda con las muchas formas de crear, abrir y cerrar paréntesis y llaves en muchos lenguajes de programación como, por ejemplo: [], (), {}, ??, ??. #!xml, <tag></tag> y otros configurables por el usuario.

SublimeCodeIntel

Este paquete dará soporte para la escritura de código de muchos lenguajes de programación de forma inteligente, tales como JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit y PHP. Permitirá saltar a la definición de un símbolo, mostrar texto para autocompletar código en tiempo real y también mostrará información en la barra de estado sobre las funciones. Después de instalarlo, es necesario cerrar y volver a abrir Sublime Text. Por otra parte, también es recomendable copiar todo el contenido del fichero de configuración por defecto de este paquete al fichero de configuración del usuario de este paquete, es decir, de Preferences > Package Settings > SublimeCodeIntel > Settings ? Default, copiar todo el contenido del fichero al de Preferences > Package Settings > SublimeCodeIntel > Settings ? User. Al hacerlo, conviene volver a cerrar y abrir de nuevo Sublime Text.

Pueden encontrarse muchos más paquetes interesantes, ordenados por categorías en la dirección Package Control - Browse.