Guía de Sublime Text: ¿El mejor editor de código?

Autor: | Posteado en Trucos Sin comentarios

Sublime Text es un excepcional editor de textos que aporta algunas funciones útiles a la hora de programar o editar código. El editor esta cargado de funcionalidades útiles y cómodas desde el punto de la usabilidad y eficiencia, usando el método geek y transformando vuestro trabajo de edición de texto en una destreza cada vez mas sencilla y agradable, a medida que vamos estudiando a usar todas sus funcionalidades.

Editor de codigo Sublime Text
Editor de codigo Sublime Text

Su licencia cuesta próximamente 50 euros, pese a que acepta utilizarse a modo de prueba gratis durante un tiempo con todas sus funcionalidades y sin ningun tipo de limitación. Es multiplataforma y puede utilizarse desde Windows, GNU/Linux o Mac® OS X (10.7+). Puedes descargarlo desde el siguiente enlace:

URL | Sublime Text 3

Características interesantes

Pestañas

Al equivalente que otras programas de la actualidad, Sublime Text soporta pestañas, una característica que popularizaron los navegadores web. En cada una de estas pestañas, se muestra una x para cerrar la misma, que cambia a un circulo gris cuando se han redactado cambios en el archivo y no se han guardado todavía.

Sublime Text: Pestañas
Sublime Text: Pestañas

Autocompletado

Sublime Text tiene resaltado a color de sintaxis para facilitar la lectura de código, así como numerado de línea. También muestra un diminuto índice gráfico a la derecha, por el cuál logramos desplazarnos inmediatamente a golpe de click del ratón.

Pero quizas una de las funciones que mas se agradecen (sobre todo a los visitantes que no tienen buena memoria), es el autocompletado. Esta funcionalidad nos apoyará a recordar como se escriben ciertos comandos, funciones o textos del idioma o marcado en el que nos encontramos.

Un ejemplo de autocompletado en CSS
Un ejemplo de autocompletado en CSS

Además, en varios idiomas (como por ejemplo, PHP), Sublime Text nos facilita el orden de los parámetros, por si no los recordamos, algo muy común en PHP con funciones como strpos o explode, donde el orden de los parámetros es diferente.

Sublime Text: Ayuda de sintaxis
Sublime Text: Ayuda de sintaxis

Selecciones múltiples

Una de las funciones mas atrayentes de Sublime Text es su flexibilidad para efectuar actividades comunes de una forma sencilla y rápida. Por ejemplo, si seleccionamos una frase con el ratón (en el ejemplo, len), presionando CTRL+D podremos ir seleccionando las siguientes coincidencias y modificarlas todas a la vez:

Sublime Text: Selecciones múltiples
Sublime Text: Selecciones múltiples

También podrias usar la mezcla CTRL+K para saltarte alguna selección que no quieras usar en el reemplazo.

Ediciones múltiples

Seleccionando algunas líneas y usando la mezcla de teclas CTRL+SHIFT+L podrias editar algunas líneas a la vez, muy util para cambios paralelos repetitivos:

Sublime Text: Ediciones múltiples
Sublime Text: Ediciones múltiples

Acceso directo a métodos o funciones

Es factible entrar directamente a métodos o funciones de un archivo con codigo fuente, lo cuál es muy atrayente cuando vuestro codigo alcanza enormes proporciones. Se puede inventar presionando la mezcla de teclas CTRL+R, y escribiendo a continuidad el nombre de la función:

Sublime Text: Índice de métodos
Sublime Text: Índice de métodos

Auto-cerrado de etiquetas

Si nos acostumbramos a utilizarla, la mezcla de teclas ALT+. puede ayudarnos a cerrar inmediatamente cualquier etiqueta HTML que tengamos abierta de forma instantánea:

Sublime Text: Auto-cerrado de etiquetas
Sublime Text: Auto-cerrado de etiquetas

Acceder a una linea concreta

Existe un atajo mediante el cual es factible brincar a una linea concreta de un archivo, simplemente presionando la mezcla de teclas CTRL+G y escribiendo a continuidad el numero de la linea deseada.

Combinaciones de teclado

Existen algunas otras combinaciones de teclas que convendría conocer, ya que son acciones que utilizaremos frecuentemente:

Atajo de teclado Significado Atajo de teclado Significado
CTRL+N Nueva pestaña CTRL+Z Deshacer último cambio
CTRL+W Cerrar pestaña CTRL+Y Revertir último cambio
CTRL+S Salvar pestaña actual CTRL+X Cortar texto seleccionado
CTRL+SHIFT+T Reabrir pestaña cerrada CTRL+C Copiar texto seleccionado
CTRL+M Saltar a llave/paréntesis CTRL+V Pegar texto seleccionado

Code-folding

Sublime Text además proporciona la oportunidad de plegar o desplegar bloques de código, tanto en HTML como en idiomas de programación. De esta forma, logramos centrarnos en la parte del codigo que nos interesa sin desorientarnos o perder el foco en lo que no tenemos finalidad de tocar.

Para usar esta funcionalidad, basta con mover el ratón hacia la parte izquierda del codigo (donde llegan los números) y pulsar sobre las flechas para contraer o desplegar el código:

Sublime Text: Code folding
Sublime Text: Code folding

La zona reducida se ofrecerá con un diminuto símbolo que indica que hay mas contenido en su interior.

Búsquedas

A medida que el codigo que manejamos se hace mas grande, necesitaremos efectuar operaciones de busquedas de la forma mas rápida posible. Para ello, pulsamos CTRL+F y nos aparecerá un diminuto panel donde escribir nuestra búsqueda. Esto resaltará en color la 1ª coincidencia y en color «hueco» las coincidencias sucesivas a medida que escribimos la frase a buscar.

Sublime Text: Búsquedas
Sublime Text: Búsquedas

Por otro lado, si lo que queremos es efectuar una busqueda para reemplazar un texto por otro, pulsamos CTRL+H, lo que hará que nos aparezca el mismo menú, sin embargo esta vez organizado para efectuar una busqueda con oportunidad de reemplazo.

Sublime Text: Reemplazar
Sublime Text: Reemplazar

Expresiones regulares

Es muy atrayente saber que Sublime Text acepta efectuar busquedas o reemplazos usando Expresiones regulares. Esto es una forma excelente de inventar cambios usando patrones no exactos. Para activar el soporte de expresiones regulares simplemente hay que pulsar el 1° boton de la barra de búsqueda, simbolizado por los caracteres .*.

Una vez activo, podremos efectuar busquedas o reemplazos usando expresiones regulares. En el siguiente ejemplo se ha aprovechado la expresión regular d.. que significa "Cualquier texto con una d seguido de 2 caracteres cualquiera":

Sublime Text: Expresiones regulares
Sublime Text: Expresiones regulares

El planeta de las expresiones regulares es muy amplio, sin embargo es muy util para automatizar actividades de busqueda con patrones muy variables o desconocidos. Aquí algunos ejemplos:

Expresiones regulares atómicas
RegEx Significado
^texto Línea que empiece por a
texto$ Línea que acabe en a
. Cualquier carácter
a* Cero o mas "a"
a+ Una o mas "a"
a|b Carácter "a" o "b"
[aeiou] Una vocal minúscula
[^aeiou] Carácter no vocal minúscula
Expresiones regulares básicas
RegEx Significado
[a-zA-Z0-9]+ Letras o números
[0-9]{2} Cifra de 2 dígitos
[0-9]{1,3} Cifra de 1 a 3 dígitos
[0-9]A? Número que puede (o no) terminar en "A"
Expresiones regulares de agrupación (captura)
RegEx Significado Valor capturado ($ 1)
h(.+)a Textos como: hola, hala, hasta, hora… ol, al, ast, or…
Nivel ([0-9]+) Textos como: Nivel 0, Nivel 1, Nivel 2… 0, 1, 2…

Lo atrayente de estas ultimas expresiones regulares es que los paréntesis efectúan una labor de agrupación, capturando el contenido y guardándolo en una variable $ 1. En el caso de que la expresión regular contenga mas paréntesis, irá capturando en variables sucesivas: $ 1, $ 2, $ 3, etc…

Todo esto puede ser muy util para efectuar reemplazos con fragmentos capturados en dichas variables.

  • Puedes practicar expresiones regulares con la tool Regular Expression Test Page, que acepta verificar si varios casos distintos casan o no.

Snippets

Tanto con datos de texto como idiomas de marcado o etiqueta o codigo de programación, es muy común encontrarnos en la circuntancia de tener que escribir textos repetitivos frecuentemente, lo que puede resultar algo tedioso y hasta desagradable.

Sublime Text acepta inventar snippets: diminuto fragmentos de codigo que podrias expandir a partir de la escritura de un diminuto texto seguido de la tecla TAB, ahorrando así mucho tiempo. En el siguiente ejemplo observaremos como inventar un fácil snippet usando el texto disparador «hola», que lo expanderá a un texto predefinido mas largo.

Creación de un Snippet

Lo primero, nos dirigimos al menú Tools / New Snippet…. Se nos creará un nuevo informe XML con la estructura apropiada para inventar el snippet. Esta estructura tiene 3 partes que debemos modificar:

1. Etiqueta content

Dentro de la etiqueta content escribiremos el texto expandido. Este texto debe estar rodeado de las etiquetas <[CDATA[ y ]]> para eludir problemas con el escapado. Escribimos el texto en su interior, teniéndo en cuenta que además se puede usar el formato $ {1:palabra} para que al expandir un texto se seleccione de forma automatica esa frase (y podamos convertir a las sucesivas presionando TAB). De esta forma facilitaremos la edición del snippet.

Sublime Text: Crear snippets
Sublime Text: Crear snippets

2. Etiqueta tabTrigger

Esta será la frase que tenemos que escribir y pulsar TAB para expandir. Utiliza frases lo suficientemente complejas para no escribirlas accidentalmente, sin embargo lo suficientemente sencillas como para resultar cómodas y útiles.

3. Etiqueta scope

Este parámetro (opcional) nos acepta especificar si el snippet funcionará sólo en un tipo de archivo concreto, como archivos HTML (text.html) o codigo fuente Python (source.python), por ejemplo.

Eso es todo. Con esos parámetros especificados tendremos el snippet organizado para funcionar. Guardamos el archivo en la carpeta Data  Packages  User con el nombre hola.sublime-snippet (debe terminar con la extensión .sublime-snippet).

Listo. Ya logramos probarlo en el editor:

Snippet de ejemplo para Sublime Text
Snippet de ejemplo para Sublime Text

Obviamente, estas funciones logramos utilizarlas para automatizar actividades mas interesantes, como por ejemplo, una estructura personalizada o template de un informe HTML nuevo, escribiendo html y presionando TAB, posicionándose de forma automatica en el titulo de la página. Pero mas adelante observaremos un pack llamado EMMET que maneja la filosofía ZEN Coding, mucho mas util para economizar tiempo:

EMMET para Sublime Text
EMMET para Sublime Text

Paquetes (plugins)

Por si pareciera poco y Sublime Text no fuera ya un excelente editor con sus funcionalidades de serie, además acepta expandir sus capacidades mediante la instalación de plugins (paquetes) desde un prolongado repositorio.

¿Cómo instalar paquetes?

Por defecto, el Package Control llega desactivado en Sublime Text. Para activarlo, vamos al menú View / Show Console y pegamos el siguiente texto (ST3):

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try tutorial install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Con esto ya tendremos el gestor de paquetes organizado para Sublime Text 3.

Ahora, cada vez que queramos investigar un pack en el repositorio para instalarlo, pulsamos CTRL+SHIFT+P y escribimos Install Package. Entonces podremos investigar entre la enorme suma de paquetes que existen para Sublime Text e instalarlos con un simple click.

Instalar paquetes de forma automatica en Sublime Text
Instalar paquetes de forma automatica en Sublime Text

De la misma forma, presionando CTRL+SHIFT+P y escribiendo Remove Package logramos desinstalar paquetes que no queramos usar más.

Si lo deseas, además podrias entrar a Package Control Repository para investigar paquetes vía web, categorizados en categorias como nuevos, tendencias, populares, autores u otros.

  • IMPORTANTE: Asegúrate de instalar plugins compatibles con la version de Sublime Text que estés utilizando. Si estás usando ST3, es factible que no puedas usar paquetes diseñados para otra versión.

Editor de configuración

Como ya hemos dicho, uno de los puntos poderosos de Sublime Text es su capacidad de personalización. En el menú Preferences se puede entrar a los archivos de configuración para personalizar ciertas funciones del editor y/o de sus complementos.

Diferencias entre Default y User

Encontrarás siempre las configuraciones divididas en 2 categorías diferentes: Default y User.

Los archivos con el sufijo Default son los que contienen las alternativas y parámetros de la app recién establecida y no son modificables. Por otro lado, los archivos con el sufijo User si son modificables, ya que son los que guardarán nuestros cambios, eliminando los valores de Default.

Por ejemplo, en Settings – Default vemos que una de las alternativas es "font_size": 10, si insertamos en Settings – User una linea con "font_size": 14 comprobaremos que al guardar, el tamaño de la sigla cambia.

  • Los archivos de configuración de Sublime Text realmente son archivos JSON con la extensión .settings, que a efectos prácticos son un archivo JSON que acepta comentarios. Si teneis problemas con algún archivo de configuración, podrias validarlos para asegurarte de que están correctamente escritos. Puedes usar JSON Validator o JSON Lint.

Esquemas de colores

En el menú Preferences / Color Scheme se localizan varios esquemas que cambian las combinaciones de colores del editor. Existen desde combinaciones con temas claros a temas mas oscuros, como el que llega de serie. El esquema de colores que trae Sublime Text por defecto se llama Monokai.

En los paquetes del repositorio además podrias hallar varios otros esquemas de colores y temas instalables, como por ejemplo Flatron, Predawn, Brogrammer o Devastate:

Themes para Sublime Text
Themes para Sublime Text

Paquetes o plugins interesantes

1. GutterColor

Si sueles escribir archivos de estilos CSS con frecuencia, este pack te será de mucha ayuda, puesto que se encarga de ubicar un diminuto circulo a la izquierda de la linea en la que has colocado un color hexadecimal:

GutterColor: Colores CSS en Sublime Text
GutterColor: Colores CSS en Sublime Text

Para el correcto funcionamiento de este paquete, necesitaremos tener implementado en vuestro dispositivo la tool ImageMagick. Debemos asegurarnos de que el archivo convert.exe esta en el PATH del metodo y que en la configuración User de Sublime Text tenemos la siguiente opción:

{      "convert_path" : "convert.exe"  }

NOTA: En sistemas Windows esta extensión puede dar problemas (en lugar de los círculos, exponer un cuadrado con líneas) ya que convert.exe es una aplicación de particionado del sistema. Se aconseja establecer la ruta en el PATH del metodo y especificar la ruta concreta.

2. ColorPicker

También para diseñadores, este pack acepta abrir un panel de elección de color al pulsar la mezcla de teclas CTRL+SHIFT+C. Al seleccionar un color y pulsar aceptar, nos establecerá el codigo hexadecimal, ahorrándonos el tener que usar un software externo para tal fin.

ColorPicker: Elegir colores CSS en Sublime Text
ColorPicker: Elegir colores CSS en Sublime Text

3. EMMET (Zen Coding)

EMMET (antes popular como Zen Coding) es un genial plugin para Sublime Text que acepta aprovechar la sintaxis CSS para economizar tiempo en la creación de codigo HTML.

Por ejemplo, logramos especificar el texto **ul>li*5>strong+em** con el que le indicamos:

  • Construye una serie desordenada (ul).
  • Que contenga cinco puntos (li*5).
  • Que cada punto contenga una etiqueta strong, seguida de em.
EMMET: Zen coding en Sublime Text
EMMET: Zen coding en Sublime Text

Obviamente, esto sólo es un ejemplo. Se pueden edificar cosas muchísimo mas complicadas con una personalización mas potente. La siguiente referencia muestra los operadores existentes que pueden utilizarse y combinarse con EMMET:

Operadores Significado
> Hijo (dentro de…)
+ Hermano (al lado de..)
^ Salir de la etiqueta actual
* Multiplicador (repite x veces)
() Agrupador
. Clase
# ID
[attr] Atributos
$ Número de iteración
{} Añadir texto

Para comprender preferible estas opciones, prueba con los siguientes ejemplos:

  • strong
  • **ul>li*5>strong{Punto $ }+em**
  • div#header+div#container>div#content+div#menu^+div#footer

URL | EMMET CheatSheet

4. BracketHighlighter

Este fácil pack nos acepta resaltar visualmente el ámbito de la zona donde estamos escribiendo en vuestro código. Así, si nos posicionamos sobre la abertura de una llave o unos paréntesis, se resaltará visualmente donde se cierran.

BracketHighlighter: Resaltado de llaves en Sublime Text
BracketHighlighter: Resaltado de llaves en Sublime Text

5. CSS Snippets

El pack CSS Snippets incluye una enorme suma de snippets fundamentalmente diseñados para economizar tiempo en el desarrollo de codigo CSS. Por ejemplo, snippets que admitan inventar codigo compatible con todos los navegadores, usando prefijos vendor de funciones que todavía no están implementadas por completo:

CSS Snippets en Sublime Text
CSS Snippets en Sublime Text

URL | Lista termina de snippets para CSS

Otros paquetes

Puedes echar un mirada a la amplia variedad de paquetes existentes en el repositorio de Sublime Text. Existen paquetes de funcionalidades añadidas, temas o esquemas de colores y hasta multitud de paquetes para autocompletado o resaltado de sintaxis de otros idiomas de programación.

Algunos otros paquetes dignos de mención:

  • Git (Control de versiones con Git)
  • SFTP (Gestor integrado de SFTP/FTP)
  • CSS Color Converter (Transforma entre formatos hexadecimales, RGB y HSL)
  • LESS2CSS (Convierte codigo LESS a CSS al guardar)
  • Terminal (Abre una dispositivo en la carpeta de trabajo)

En el capítulo Los mejores editores de texto para programar podrias hallar otros geniales editores como Adobe Brackets, LightTable o ATOM, e incluso, 15 editores de texto basados en terminal, por si acostumbras a programar desde remoto vía SSH.

Este capítulo es un fragmento del Curso online de Diseño web(www) con CSS3 que impartiré el siguiente 17 de Noviembre en la Universidad de La Laguna. Puedes registrarte aquí.

Emezeta blog

Visita también:



El mejor vídeo del día Trucos de Android


Nota: La creación de esta noticia le pertenece al autor original que aparece en la firma de más arriba. No hemos eliminado en ningún momento los enlaces oficiales, ni tampoco intentamos perjudicar su posicionamiento en los motores de búsqueda.

El Administrador de QueEsGoogle.Com

Agrega tu comentario