Knowledge Programación Entornos de Programación
Este material didáctico forma parte del Curso online de HTML5 Accesible con Sublime Text (UF1302)

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.

Sublime Text - Operaciones con 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.

Sublime Text - Listado de paquetes a instalar

Sublime Text - Listado de paquetes 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.

Sublime Text - Paquetes ya instalados

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

Sublime Text - Eliminar Paquetes ya instalados

Sublime Text - Eliminar Paquetes ya instalados

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

Sublime Text - Comandos para gestionar etiquetas

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.

Sublime Text - Paquete BracketHighLighter

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.

Sublime Text - Paquete Trailing Spaces

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

Sublime Text - Configuración del Paquete 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.

Sublime Text - Instalación del paquete 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.jsSoftware situado en el lado de un servidor, que posibilita la ejecución de aplicaciones multiplataforma, basado en el lenguaje ECMAScript, es decir, JavaScript. Es un proyecto de código abierto. Funciona de forma asíncrona, con entrada y salida de datos en una arquitectura orientada a eventos y usando el motor V8 de Google, para la interpretación del lenguaje JavaScript. Su objetivo es la creación de programas en red altamente escalables como, por ejemplo, servidores Web. El código JavaScript no se ejecutará de esta forma en el navegador sino en el servidor. Es una arquitectura modular, y cada módulo, compilado en formato binario proporciona funcionalidades adicionales, pudiéndose así añadir módulos creados por terceros, instalándose con la utilidad npm, que facilitará la instalación, actualización y dependencias de los módulos..

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.

Sublime Text - Instalación del paquete 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.

Sublime Text - Instalación Node.js

Sublime Text - Instalación Node.js

Sublime Text - Instalación Node.js

Sublime Text - Instalación Node.js

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.

Sublime Text - Comprobación de npm

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

Node.js - Instalación del paquete 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 PathVariable de entorno en varios sistemas operativos, entre ellos, Mac OS, Linux, Unix y Windows, que especifica las rutas en las cuales el intérprete de comandos debe buscar los programas a ejecutar. Esta variable debe contener todos las carpetas o directorios en los que se quiera que el intérprete busque programas, siendo un orden de izquierda a derecha en la cadena de caracteres que contenga esta variable. 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á:

Sublime Text - SublimeLinter muestra un error

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:

Sublime Text - Comentarios con el paquete DocBlockr

Hayaku

El paquete Hayaku nos permitirá escribir código CSS mucho más rápidamente, utilizando abreviaturas. Soporta preprocesadores CSSUn preprocesador CSS es la aplicación de características que poseen los lenguajes de programación, para la creación de código CSS que los navegadores entiendan. Extienden las funcionalidades estándar del lenguaje CSS y generando un código compilable, son capaces de producir así código CSS estándar entendible por los navegadores. Los más utilizados hoy día son SASS, LESS y Stylus. Entre las ventajas de utilizarlos están reducir considerablemente el tiempo de desarrollo, ya que con ellos se escribe menos código y este será de más calidad y estará mejor organizado. Y, por otra parte, el uso de un preprocesador implicará también un cambio en la forma de trabajar para el programador, trabajando en local y llevando a explotación CSS limpio y minimizado. Los preprocesadores CSS permiten incorporar variables, funciones, reglas anidadas, una mayor reutilización del código, operaciones, inclusión de archivos e incluso CSS orientado a objetos u OOCSS. 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.

Uso del paquete Emmet
Ver Actividad Actividad de autoevaluación: Paquetes para desarrollo Web

Otros paquetes 

GitEs un software de control de versiones de ficheros que pueden formar parte del código fuente de una aplicación. Es un sistema que aporta eficiencia y confiabilidad al mantenimiento de versiones de los ficheros de una aplicación cuando el número de éstos es grande. Posibilita ramas de desarrollo, historial, gestión distribuida, múltiples protocolos para la comunicación de repositorios, varios tipos de repositorios y gestión de eficiente de proyectos grandes entre otras muchas características. 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.
 

Este contenido didáctico abierto está extraído del Curso online de HTML5 Accesible con Sublime Text (UF1302).

Amplía tus conocimientos con el Curso Online de HTML5 Accesible con Sublime Text (UF1302)

Puedes continuar ahora la formación matriculándote en el curso, o si lo prefieres, consultar nuestro catálogo con cerca de 400 actividades formativas acreditadas.

Este sitio web utiliza cookies de terceros con la finalidad de analizar el uso que hace de nuestra web y personalizar el contenido de los anuncios. Si continúa navegando entendemos que acepta su uso. Más información