Espresso vs Sublime Text

por Natalia Ventre el ・ podés leerlo en 6 minutos ・

Espresso y Sublime Text tienen las características básicas de cualquier editor de código, por ej. soporte de diversos lenguajes (resaltado de sintaxis y auto-completado), snippets inteligentes, búsqueda dentro de un archivo o proyecto, etc. pero, ¿qué los diferencia? ¿cuál es mejor?

Round 1: UI y espacio de trabajo

Captura de pantalla de Espresso
Captura de pantalla de Espresso (tema Quiet Night)

Espresso

  • Espresso tiene la típica interfaz de una aplicación de Mac, un simpático icono de aplicación (una tacita de café), y en el estado en blanco hay una ilustración de Veerle Pieters.
  • Los archivos del proyecto se abren en “pestañas”, que se apilan verticalmente (workspace) arriba del árbol del proyecto en la barra lateral.
  • El navigator permite visualizar y navegar el árbol DOM y puede ser útil para localizar etiquetas mal cerradas.
  • Se puede trabajar a pantalla completa.
  • Se pueden instalar temas manualmente copiándolos a ~/Library/Application Support/Espresso/Themes.
Captura de pantalla de Sublime Text 2
Captura de pantalla de Sublime Text (esquema de color Patriot por Dayle Rees)

Sublime Text

  • A primera vista, la interfaz de Sublime Text es super austera y poco amigable.
  • Los archivos del proyecto se abren en pestañas, se puede mostrar/ocultar la barra lateral (⌘K, ⌘ B) y el minimapa.
  • Se puede dividir la pantalla en filas y columnas (paneles).
  • Se puede trabajar a pantalla completa o en el modo distraction free (sólo el texto en la mitad de la pantalla).
  • Sublime Text viene con 22 esquemas de colores y además se pueden instalar más con Package Control, por ej. los Dayle Rees Color Schemes, que son 33 en total y están todos muy buenos.

Round 2: Extensiones

Espresso

Se puede extender la funcionalidad de Espresso con sugars (azúcares), que se descargan e instalan haciendo doble click y de desinstalan manualmente. Hay una lista de sugars en el sitio web de MacRabbit y se puede encontrar alguna más en GitHub.

Sublime Text

Sublime Text tiene un administrador de paquetes que permite buscar, instalar, listar e eliminar paquetes desde la propia aplicación.

  1. Para instalar el Package Control, abrir la consola y pegar el siguiente comando: import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(’ ’,’%20’)).read()); print(‘Please restart Sublime Text to finish installation’)

  2. Presionar ⇧⌘P, empezar a tipear “install”, enter en “Package Control: Install Package” para ver y buscar en el listado de paquetes disponibles.

Algunos paquetes para desarrollo front-end:

  • AdvancedNewFile (⌘⌥N): permite crear un archivo dentro de un directorio nuevo o existente, escribiendo la ruta, ej.: /sass/style.scss
  • CoffeScript
  • Emmet
  • Placehold.it Image Tag Generator
  • Sass

Round 3: Características distintivas

Espresso

Espresso tiene varias funcionalidades únicas, útiles para diseñadores web y principiantes.

  • Vista web: Espresso tiene una vista web de archivos HTML y un inspector integrado para visualizar los márgenes, padding y otros estilos CSS aplicados a un elemento. La previsualización de Espresso no me resulta útil, estoy acostumbrada a trabajar con el editor de código y el navegador simultáneamente, usando LiveReload para compilar los archivos necesarios y refrescar la página y las Chrome Developers Tools para inspeccionar elementos y otras tareas.
  • Editor visual de CSS: Espresso viene con CSSEdit integrado (antes se vendía por separado), una herramienta visual para crear CSS, es básicamente un cuadro de diálogo (al estilo Dreamweaver) y resulta sobre todo útil para generar el código de los degradés con CSS3.
  • Publicación rápida: Tiene un cliente de FTP incorporado, para sincronizar el proyecto local con el servidor web.

Sublime Text

Sublime Text posibilita realizar las acciones más comunes con el teclado, al principio cuesta un poco memorizar los atajos del teclado, pero a larga, se ahorra tiempo.

  • Ir a cualquier cosa: Con ⌘P se pueden abrir archivos (tipeando algunas letras del nombre)1, usar @ para saltar a símbolos2, # para buscar dentro del archivo y : para ir a un número de línea.
  • Cursores múltiples: hasta que no los empezás a usar, no sabés de qué te estabas perdiendo. Presionando ⌘D seleccionás una palabra y presionando repetidamente, te selecciona otras ocurrencias de esa palabra y podés editarlas simultáneamente, es una alternativa más rápida a buscar y reemplazar. Se puede usar en combinación con ⇧⌘L que divide una selección en líneas.
  • Paleta de comandos: Con ⇧⌘P se accede a la paleta de comandos, que replica todas las funciones de los menús, más las funciones de los plugins instalados.

Round 4: Actividad

Espresso

  • La versión actual es la 2.0.5, no pude encontrar la fecha de lanzamiento, pero si mal no recuerdo fue a mediados del 2012.
  • De Espresso leí reseñas positivas, pero ni de casualidad, ni buscando encontré algún tip que pudiera resultarme útil.

Sublime Text

  • La versión actual es la 2.0.1 de julio del 2012, pero en el Sublime Blog ya se anunció que la primer beta de Sublime Text 3 ya está disponible para descargar.
  • A la fecha, hay 1003 paquetes para descargar a través de Package Control.
  • En Nettuts+ hay un curso gratuito en video Perfect Workflow in Sublime Text donde Jeffrey Way explica desde las funciones básicas hasta los paquetes más populares. Además hay cantidad de artículos en diversos blogs con tutoriales, tips, etc.

Round 5: Otros detalles

Espresso

  • Espresso tiene pocas aunque suficientes preferencias, en un cuadro de diálogo tradicional.
  • Es sólo para Mac.
  • Se puede probar gratis durante 15 días y cuesta $75.

Sublime Text

  • Las preferencias en Sublime Text se pueden configurar a través de un archivo JSON, es un enfoque diferente, pero el archivo por defecto está profusamente comentado y se entiende bien.
  • Está disponible para Mac, Windows y Linux.
  • Se puede probar indefinidamente y actualmente cuesta $70.

Y el ganador es… ¡Sublime Text!

Usé Espresso durante más de 2 años3 y no tengo quejas, pero hace unos meses me decidí a cambiarme a Sublime Text. Lo había visto funcionando en algunos videos y me atrajo mucho la posibilidad de trabajar con el teclado similar a Alfred. Me llevó un rato configurarlo, descargar algunos paquetes y aprender los comandos con el teclado, pero estoy muy conforme. No volví a abrir Espresso y estoy segura que voy a seguir usando Sublime Text por muchos años.


  1. La búsqueda de Sublime Text es difusa, para abrir un archivo basta con tipear algunas letras que aparezcan en el nombre, sin importar el orden.

  2. La definición de “símbolo” depende del tipo de archivo, en JavaScript puede ser un método, en CSS una clase, etc.

  3. Anteriormente usé Dreamweaver y Komodo Edit.