Sublime Text, un editor de código

21 May Sublime Text, un editor de código

Hace un tiempo mencionábamos Coda 2 y en los comentarios del post, Ignacio  nos sugería el editor de código Sublime Text. Por suerte, hemos tenido la posibilidad de conocerlo y queremos compartir nuestra experiencia con vosotros.

Tal vez lo conoces y lo usas, tal vez lo has escuchado o simplemente no sabes nada de este editor de código. Si es así, te invitamos a que descubras este magnifico editor. Vamos a explicar un poco de qué se trata:

Sublime text es un editor de texto multi-plataforma (Windows, Linux, Mac OS X) reconocido por su potencia en velocidad de rendimiento, procesado, múltiples funciones, permite la instalación de plugins / snippets y da la posibilidad al usuario de personalizarlo a su gusto.

Aunque ya está disponible una versión 3 beta, su última version estable es la 2.0.2, la cual se puede descargar desde la pagina oficial de SublimeText2. En ambos casos encontraremos las distintas versiones para cada plataforma. Existen dos versiones para este editor: gratis y de pago. No existen diferencias de funcionalidades entre estas. Y tú te preguntaras… ¿Por qué debo pagar algo que me ofrecen gratis? Buena pregunta! Pero seguro que conoces la respuesta. Si pruebas un producto, te gusta, lo consideras de calidad y lo valoras, comprándolo estarás colaborando para que su desarrollo avance.

Configuraciones generales

Al acceder por primera vez en nuestro editor veremos la pantalla así:

Se ve un poco vacía y sin mucha explicación. Veremos como con unos simple ajustes podemos dejarla mas amigable y sencilla para que nos facilite nuestro trabajo.

Sidebar

Desde el menú principal podemos activar nuestra sidebar.

View > Sidebar > Show Sidebar

Aquí puedes arrastrar las carpetas de tus proyectos dejándolas a mano para acceder a los archivos cuando lo necesites.

Multi-Layouts

Podemos dividir la pantalla de Sublime como nos sea mas útil. Desde la pestaña View activamos la visualización de nuestro layout.

View > layout >

• Single: una sola columna
• Columns:2 dos columnas
• Columns:3 tres columnas
• Columns:4 cuatro columnas
• Rows:2 dos filas
• Rows:3 tres filas
• Grid:4 es la combinación de dos filas y dos columnas quedando una cuadricula

Esto permite una mejor organización ya sea por proyecto, tipos de archivos o como más sencillo te resulte. También se pueden pasar pestañas de una columna a otra simplemente arrastrándolas. Por si os interesa, mi configuración es así, con el sidebar visible y dos layouts:

Colores de la interfaz

Desde la pestaña Preferences > Color Scheme podemos seleccionar distintas configuraciones preestablecidas de combinaciones de colores. Si ninguna se adapta a tus necesidades, puedes buscar en ColorSublime o en Theneum donde existen más alternativas que puedes instalar.

 

Resaltar archivos no guardados

Podemos configurarlo para que nos resalte los archivos que no han sido guardados. Por defecto lo indica con un punto al lado del nombre del archivo, pero para personalizarlo, vamos a: Prefenrences > Setting users

Donde nos abrirá un archivo en el que incluiremos la siguiente línea: «highlight_modified_tabs»: true

Pulsamos en Guardar y listo, ahora nos lo resaltará en color en la pestaña.

Visualizar un archivo sin abrirlo

Esto puede resultar muy útil cuando tenemos prisa. Si tenemos en el sidebar el archivo que queremos visualizar, haciendo clic sobre el mismo, podemos ver su código sin tener el archivo abierto. Podremos desplazarnos dentro del archivo, e incluso copiar texto sin necesidad de abrirlo.

 

Otra forma de visualizar archivos sin abrirlos, es utilizar la potente herramienta “Go to Anything”. Se activa con Ctrl + P (⌘ + P) y con esto podemos buscar cualquier archivo entre los abiertos y previsualizarlo.

Ctrl + P (⌘ + P) nos despliega una ventana donde podremos comenzar a escribir el nombre del archivo y nos listará los que coincidan con la búsqueda. Si hacemos clic sobre uno de ellos se abrirá.

Además podemos usar:

@ para saltar a símbolos
# para buscar dentro del archivo
a: para ir a un número de línea

Estos accesos directos se pueden combinar. Un ejemplo sería:

Navegación en un archivo

Dentro de un archivo podremos desplazarnos en él de varias maneras.

• Minimapa: es la barra lateral a la derecha donde se puede ver código, y navegar con facilidad por él, permitiéndote desplazarte por el archivo sin necesidad de utilizar el scroll. Esto es mas rápido y sencillo que utilizar un scroll común.

• Ir a numero de linea: Ctrl + G (⌘ + G) al presionar esta combinación de teclas nos abre una ventana en la parte superior donde podemos introducir el numero de línea donde queremos ir y automáticamente nos llevará a la misma resaltándola sobre el número de la línea.

Buscar

Nos da la posibilidad de buscar dentro de un archivo y también permite hacerlo en carpetas y múltiples archivos al mismo tiempo. Para buscar una palabra dentro de un archivo podemos hacerlo con Ctrl + F (⌘ + F). Nos abrirá una pestaña en la parte inferior donde podremos introducir el término de búsqueda:

Ahora bien, si quisiéramos buscar una palabra en un archivo pero no sabemos en cual, podemos hacerlo con: Ctrl+ SHIFT + F (⌘ + SHIFT + F). Aquí, la pestaña inferior tendrá más campos incluyendo uno para especificar donde queremos buscar.

Haciendo clic sobre el botón con tres puntitos «…» nos dará las opciones de:

• Clear: limpiar ruta
• Add folder: agregar una nueva carpeta
• Add include filter: agregar archivos con la extensión que especifiquemos
• Add exclude folder: excluye archivos con la extensión que especifiquemos
• open folders: agrega las carpetas que tengamos abiertas
• open files: agrega los ficheros que tengamos abiertos

Esta acción nos devolverá un listado de archivos en los que se encuentra nuestra palabra. Haciendo clic sobre el nombre de los archivos listados no los abrirá en una nueva pestaña.

Si bien esta función es común a muchos editores de texto, es muy bueno el rendimiento y rapidez con que Sublime Text resuelve esta tarea. Vale mencionar que siempre dependerá qué buscamos y en qué cantidad de ficheros.

Reemplazar una sentencia

Una vez que hemos buscado una palabra o sentencia en un archivo tal vez queremos reemplazarla pero de forma masiva. Presionado Ctrl + H (⌘ + H), nos despliega una ventana en la parte inferior donde podremos ingresar la sentencia a reemplazar y la nueva sentencia que reemplazará a la anterior. Esto también lo podemos hacer de forma masiva con más de un archivo al mismo tiempo.

Cuando usamos el comando Ctrl+ SHIFT + F (⌘ + SHIFT + F), ademas de poder utilizarlo para buscar en la linea inferior nos permite ingresar la nueva sentencia para reemplazar. Pulsamos Reemplazar y nos aparecerá un cartel con la cantidad de sentencias a reemplazar y en cuántos archivos se realizará el cambio.

Pulsamos en Aceptar si estamos seguros y nos abrirá los archivos modificados para que los guardemos con los nuevos cambios.

Guardar y cerrar mas de un archivo

Si has realizado la acción de reemplazar una sentencia de manera masiva en múltiples archivos te encontrarás con mas de un archivo abierto y sin guardar. Para guardarlos todos a la vez, ve a:

File > Save all

Para cerrar más de un archivo, presiona sobre una de las pestañas con el botón derecho, y verás las opciones:

CLOSE TABS TO THE RIGHT: Cierra las que están a la derecha (solo a la derecha) de la que hemos hecho clic.

CLOSE OTHERS: Cierra todo el resto de las pesataña excepto la que hemos hecho click.

Múltiples CURSORES PARA EDITAR VARIAS LINEAS A LA VEZ

Esto nos permite escribir en más de una linea al mismo tiempo. Manteniendo presionado Ctrl (⌘) y haciendo clic con el ratón donde queremos escribir vamos seleccionando tantas lineas como queramos para introducir texto.

Hacer clic sobre cada linea puede ser algo un poco lento, para ello podemos convertir una selección completa en un selector por linea  presionando Ctrl + L (⌘ + L) y quedaría algo así:

Algo más curioso:

Múltiple Selección, Múltiple Copy y Multile Paste
Se pueden seleccionar varios textos al mismo tiempo, manteniendo presionado Ctrl (⌘). Una vez que se ha seleccionado todo se puede reemplazar, borrar o editar, bien, eso es normal.

Si se seleccionan con múltiples cursores más de un elemento y cortamos o copiamos los elementos, debemos activar la misma cantidad de cursores para volver a pegar, nos pegara los elementos seleccionados  en orden e individualmente uno por cursor. Es importante que la cantidad de elementos cortados o copiados coincida con la cantidad de cursores habilitados, en caso contrario, se pegará el texto de forma completa en cada cursor.

 

 

Múltiple selección rápida

Supongamos que tenemos una cantidad de sentencias iguales a reemplazar pero no son absolutamente todas como para hacer Ctrl + H (⌘ + H).

Ejemplo: Queremos modificar el atributo name de estos li. queremos reemplazar name por class. Seleccionando la sentencia a identificar y presionando Ctrl + D (⌘ + D), nos comienza a seleccionar las sentencias que coincidan con la primera seleccionada. De esta manera nos seleccionaría así:

Y podremos editar varios al mismo tiempo.

Reindent

Si eres un programador prolijo esto es para ti! Es importante ser ordenado en el código para poder leerlo fácilmente en un futuro, sobre todo cuando se trabaja en equipo. Si tu código esta mal indentado o directamente no tiene indenteación Sublime Text te ayuda!
Selecciona el texto a corregir en identación y desde la opción Edit > line > Reindent ¡Lo tienes!

Ocultar texto

Si nos paramos sobre el lado izquierdo de nuestro código veremos que aparecen pequeñas flechas, las cuales podemos presionar y nos colapsará el texto contenido en una etiqueta. Cuando la flecha apunta hacia abajo indica que esta desplegado y si apunta hacia la derecha es porque hay texto colapsado.

Snippets

Es una de las características más jugosas de este editor. Los snippets son trozos de código predefinidos, a los que asignamos una combinación de teclas para que aparezcan, y que mediante campos, vamos rellenando para darles funcionalidad.

Para hacer un snippets vamos a

Tools > New Snippet

Nos abrirá un nuevo archivo con el siguiente código:

Aquí debes remplazar lo siguiente

<![CDATA[ CÓDIGO QUE DESEAMOS UTILIZAR ]]>

Para escribir los distintos parámetros configurables, debes poner:

<!– Opcional: Establece un tabTrigger. Activa el fragmento de código escribiendo la palabra escrita entre las etiquetas y pulsando TAB –>

<tabTrigger>palabra con la que llamamos nuestro snippet</tabTrigger>

<!– Opcional: Establece el ambito del snippet. Este fragmento sólo estará disponible en un documento con extensión .css –>
<scope>source.css</scope>

Así podemos escribir un código determinado y llamarlo escribiendo una palabra específica y presionando Tab o Enter.

Los snippets pueden ser más complejos y manejar variables. Y se pueden crear atajos de teclados para ellos.

Sublime Text también trabaja con pluggins los cuales nos pueden facilitar mucho nuestro trabajo. Seguro ya hablaremos de algunos de ellos.

Esta es una introducción básica de las funciones mas utilizadas de Sublime Text, pero para saber si te resulto útil solo queda que lo pruebes y nos cuentes!