Share on FacebookTweet about this on TwitterShare on Google+

Sublime Text es uno de los editores de código más ligeros y utilizados en la actualidad.

Vamos a instalar la versión 3, que en Septiembre 2014 está en beta, por lo que la instalación más adecuada será añadir el respositorio para poder hacer posteriormente actualizaciones de nuestra versión mediante el comando apt-get upgrade o apt-get dist-upgrade.

Una vez instalado podremos consultar los paquetes que hay disponibles:

Instalaremos Sublime Text mediante el siguiente comando:

Preferencias

Las preferencias de Sublime Text se escriben en Preferences -> Settings – User. Tiene el ¿inconveniente? de que es en formato json y no una GUI pura y dura.
Podemos copiar y pegar las preferencias que nos interesen de Preferences -> Settings – Default a los ajustes de nuestro usuario. No debemos modificar directamente la configuración por defecto del sistema.

Atajos de teclado

Sublime está preparado para minimizar el uso del ratón, para optimizar nuestro tiempo.
Las combinaciones de teclas más utilizadas son las siguientes:
Paleta de comandos: CTRL + ALT + P.Nos permitirá seleccionar el comando del menú que queramos utilizar.
Goto anything: CTRL + P. Nos permite ir a cualquier fichero, función o clase(escribiendo @ + nombre función o clase), línea del fichero (escribiendo : + nº de línea)
Es útil tener una chuletilla con los comandos más habituales, para ir aprendiendo con el uso los que más nos interesen.
Sublime_cheat_sheet

Mis atajos de teclado

Los que yo uso más frecuentemente son los siguientes:

Navegación
Ir a una función dentro del fichero actual CTRL + p + @ (o CTRL + r)
Buscar en fichero: CTRL + f (F3 siguiente, MAYS + F3 anterior)
Buscar en todo: CTRL + MAYS + f
Paleta de comandos, para seleccionar opciones del menú de Sublime: CTRL + ALT + P
Ir a fichero: CTRL + P
Ir a una linea dentro del fichero actual CTRL + p + : + nº (o CTRL +g)

Selección y edición
Seleccionar palabra CTRL + d (aparecen marcadas las coincidencias de la palabra)
Seleccionar palabra y siguiente coincidencia: CTRL + d + d
Situar multicursor: CTRL + clic
Bajar o subir linea: CTRL + MAYS + flecha
Moverse palabra a palabra: CTRL + flecha
Seleccionar palabra o palabras: CTRL + MAYS + flecha
Duplicar línea: CTRL + MAYS + d
Selección de varias columnas: CTRL + MAYS + botón derecho

Configuración visual sublime:
Vista con uno o varios paneles: ALT + MAYS + 1 a 5
F11: Activar o desactivar pantalla completa: F11
Mostrar o quitar sidebar: CTRL + k + b

Multicursor

Si buscamos todas las ocurrencias de un texto (por ejemplo mediante CTRL + f) y las seleccionamos (mediante ALT + enter) podremos editar todas a la vez, mediante el uso del multicursor. Pulsaremos ESC para quitar el multicursor.
También podríamos ir seleccionando las ocurrencias de una en una mediante CTRL + d o quitar alguna ocurrencia de la selección mediante CTRL+k y CTRL+d.

Instalación de paquetes

Para personalizar más Sublime Text, lo suyo es instalar plugins o extensiones. Es lo que en Sublime Text se llaman paquetes. Y el primer paquete que tenemos que instalar, es un gestor de paquetes. Este nos facilitará que podamos instalar, borrar o configurar otros paquetes directamente desde Sublime Text.

Package Control

Es el primer paquete que debemos instalar. Nos servirá para poder buscar e instalar el resto de paquetes desde la interfaz gráfica.
Abrimos la consola de Sublime Text (View->show console) e insertando el código Python, que obtenemos de https://sublime.wbond.net/installation

Ahora podremos acceder al sistema de paquetes desde Preferences ->Package Control o pulsando CTRL + ALT + p y filtrando por ejemplo por el comando install package.
Para ver que paquetes debemos instalar para que nos alegran la vida, una buena opción es acudir a la web de Package Control y echar un ojo a los paquetes más populares.

Sidebar Enhacements

Mejoras en la barra lateral sobre ficheros y carpetas. Ojo, para ver la barra lateral tendremos que tener abierto un directorio (File->Open Folder), no un fichero.
Para mostrar y ocultar la barra lateral, pulsaremos CTRL + K + B.
Ejecutar ficheros en el navegador
Si trabajamos con web resulta cómodo abrir documentos en el navegador simplemente pulsando una tecla.
Siguiendo la documentación del plugin , configuraremos el fichero key-bindings user del plugin, que está situado en Preferences->Package Settings->Side Bar para que quede así:

Ahora cada vez que ejecutemos F12 se ejecutará el fichero según la ruta de testing. Si pulsamos ALT+F12 se ejecutará el fichero según la ruta de producción.
Definir URLS para ejecución de ficheros
Seleccionamos cualquier fichero del sidebar y con el botón derecho seleccionamos Project -> Edit Projects Preview URLs. Será imprescindible configurar URLs cuando nuestro proyecto exija el protocolo http en el navegador (por ejemplo trabajando con ajax). Un ejemplo de como configurarlo podría ser:

Emmet

Nos ayudará a escribir el código más rápido. Como utiliza sintaxis css su aprendizaje es rápido.
Para documentos web por ejemplo, podemos escribir html:5 y pulsar el tabulador. Nos creará un esqueleto básico basado en html5 sobre el que empezar a escribir nuestro código.
¡Ojo, es necesario que el documento tenga sintaxis html para que el trigger anterior se ejecute!
Te recomiendo que te eches un vistazo a este tutorial. Emmet una herramienta de productividad a la que le sacarás rendimiento enseguida. Observa que si vas a la paleta de comandos y escribes Emmet te aparecerán todas las opciones disponibles en Sublime.

AutoFileName

Nos muestra las sugerencias de carpetas y ficheros cuando queremos escribirlos en nuestro código: al rellenar el atributo src de una imagen, al cargar un script, etc.

SublimeLinter

Conviene echar un ojo a la documentación de SublimeLinter, ya que la instalación no es inmediata.
En este vídeo (en inglés) se puede ver paso a paso:

Básicamente, debemos instalar SublimeLinter, que sería el framework y luego los Linter que necesitemos: SublimeLinter-xxx.
Las herramientas más conocidas para depurar código en JavaScript son JsLint, y JsHint. Nosotros utilizaremos JsHint, que es un fork del primero. Para ello instalaremos el paquete SublimeLinter-jshint.
En caso de no estar instalados, instalamos node.js y npm en el equipo
Para que el plugin funcione será necesario tener instalado jshint en el sistema, esto se hace mediante el gestor de paquetes de node (la opción -g es para que lo instale de manera global, para todo el sistema).

Observa que una vez está el linter instalado, nos marca con puntos a la izquierda del código los warnings y los errores. La barra de estado (parte inferior) nos da detalles sobre los mismos:
linter

HTML-CSS-JS Prettify

Formateador de código HTML, CSS, JavaScript y JSON.
Este plugin necesita node. En caso de no estar instalados, instalamos node.js y npm en el equipo.
Pulsando CTRL + ALT + H nos formateará el código.

Autocompletado de JavaScript

Utilizaremos TernJS para Sublime. Los pasos son los siguientes:

  • En caso de no estar instalados, instalamos node.js y npm en el equipo.
  • Pulsamos CTRL+ALT+P y escribimos Install Package (o parte del texto), y poteriormente seleccionamos el paquete ternJS.
  • Configuramos el paquete en Sublime, a partir de sus settings por defecto. Si vamos a menú Preferences->Packet Settings->Tern JS->Settings user, el archivo debe quedar así:

AngularJS

Para trabajar con AngularJS.

Less

Para trabajar con Less

Instalación de snippets

Los snippets son trozos de código que Sublime genera por nosotros a partir de tan solo una palabra. Por ejemplo si escribimos “lorem” y tabulamos, mostrará el texto de lorem ipsum.
Podemos instalar snippets mediante la paleta de comandos (CTRL + ALT + p), elegimos Install Package y seleccionamos luego los snippets que queramos.
Puede ser útil crear nuestros propios snippets siguiendo la documentación de Sublime.
Por ejemplo si instalamos HTML Boilerplate, al escribir htmlboiler nos generará el código de la plantilla más utilizada de html5..
Cada vez que instalemos un paquete de snippets nos creará un fichero comprimido con extension .sublime-package en /home/usuario/.config/sublime-text-3/Installed Packages/ que contendrá un fichero con extensión .sublime-snippet por cada snippet.
Si miramos uno de ellos (paquete HTML Snippets, vemos el ámbito en el que funciona el snippet (scope, en este caso html) y el código que debemos escribir (trigger, en este caso doctype):

Reinstalar Sublime o copiar la instalación a otro equipo

Para volver a instalarlo y no tener que instalar de nuevo todos los paquetes, solo tendremos que copiar la carpeta de nuestro usuario: /home/usuario/.config/sublime-text-3 al nuevo equipo. Eso sí, tendremos que instalar nodejs y todos los módulos relacionados con el y que nos hagan falta en los paquetes.
Si nuestra instalación de Sublime funciona mal, una opción es borrar completamente el directorio /home/juanda/.config/sublime-text-3/Cache y volver a ejecutar Sublime.

Comments

  1. Pingback: Instalación y configuración de Brackets en Ubuntu 14.04 - formandomeformandome

Leave a Reply

Your email address will not be published. Required fields are marked *