Instalación de paquetes en Sublime Text

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.

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

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.

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.

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.

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

    <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.

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.

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" }

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.

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:

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.

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.

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.