En menos de un año, el editor de código Sublime Text 2, disponible para Mac, Windows y Linux, se ha disparado hasta convertirse en el editor de elección para una gran cantidad de desarrolladores. ¿Cómo? Bueno, es un editor sofisticado, con velocidad de rayo, una comunidad de complementos increíblemente vibrante, configuración fácil, modo Vintage (Vim), cursores múltiples, y la lista continúa.
Si aún no ha hecho el cambio, por un cierto sentido de lealtad a su editor actual, permítame veinte minutos y lo convenceré.!
Tenga en cuenta que este artículo, por conveniencia y legibilidad, utilizará exclusivamente los enlaces de teclado específicos de Mac. Consulte aquí las versiones equivalentes de Windows / Linux..
Comencemos con la característica que te sorprenderá: varios cursores. Una nota de precaución: una vez que experimente la flexibilidad de tener varios cursores al alcance de la mano, no podrá volver a la forma antigua..
Imagina que necesitas cambiar cada aparición de la palabra, mi método
, a Nuevo método
. Tradicionalmente, puede realizar una búsqueda y reemplazo; Sin embargo, en Sublime, es mucho más fácil. Simplemente coloca el cursor dentro de la palabra, y escribe Control + Comando + g
. Solo con esta pulsación de tecla, ahora ha seleccionado cada aparición de mi método
, y tener múltiples cursores a tu alcance. ¡Cambia el texto y mira cómo se actualizan todos! Quitar la mandíbula, a la derecha?
Alternativamente, puede presionar Comando + d
repetidamente para seleccionar incrementalmente cada aparición adicional de la palabra.
La paleta de comandos de Sublime es un envío de Dios para aquellos que prefieren tocar el mouse lo menos posible (más sobre esto en breve). Esta paleta le permite ejecutar innumerables comandos, como cambiar el tipo de sintaxis del documento actual, instalar complementos y buscar fragmentos, por nombrar algunos.
Para, por ejemplo, cambiar el resaltado de sintaxis actual para el documento actual de, digamos, HTML, a CSS, presione Comando + Shift + p
, y escriba "css". La opción "Establecer sintaxis: CSS" debería aparecer ahora. Pulsa enter, y listo! Tenga en cuenta que puede aprovechar la búsqueda difusa aquí; como tal, no necesitas escribir toda la palabra.
Memoriza este comando del teclado y úsalo a menudo..
Creado por Will Bond, Package Control es un poderoso administrador de paquetes que le permite, directamente desde el editor de código, instalar cualquier paquete (o complemento) que pueda imaginar. ¿Necesita codificación Zen? Instálalo en tres segundos. ¿Qué hay de la compatibilidad con Prefixr o el resaltado de sintaxis de CoffeeScript? Sólo se necesita un par de pulsaciones para configurar. No más recorriendo la web en busca del complemento correcto, y luego investigando dónde instalarlo.
Para instalar Package Control, visite el sitio de Will Bond, copie el fragmento del código provisto, regrese a Sublime Text, presione Controlar +
', y pegue el fragmento y reinicie. Has terminado!
Instalemos la codificación Zen. Abra la paleta de comandos (Comando + Shift + p
) y escriba "instalar". Una vez que presionas Entrar
, Sublime proporcionará una lista de todos los diversos complementos que están disponibles para ser instalados. Buscar zen
para abrir "Codificación Zen" y golpear Entrar
para instalarlo. Sí, es así de fácil! Para confirmar que funcionó, en un archivo HTML vacío, escriba ul> li * 4 + Tabulador
. Tada!
Es probable que los lectores de Mac estén utilizando TextMate. Afortunadamente, Sublime Text ofrece soporte completo para los temas de TextMate. Esto significa que, sí, su esquema de color personalizado se puede migrar a Sublime Text sin una onza de configuración. Simplemente colóquelo en su directorio de "Paquetes" como está.
¿Cuántas veces ha descargado manualmente, por ejemplo, HTML5 Boilerplate, o la biblioteca jQuery? Eso es un desperdicio; ¿No sería más fácil si pudiéramos ejecutar una pulsación rápida y descargarlos instantáneamente al proyecto actual? ¡Por supuesto que sí! Nettuts + Fetch es la solución.
Instálelo a través de Package Control y luego busque "Fetch: Manage Remote Files". Esto mostrará dos objetos para recuperar archivos individuales y paquetes, respectivamente; Se han proporcionado dos para ti.
Para probarlo, cree un nuevo archivo, busque "Fetch" en la paleta de comandos, elija "Single File -> jQuery" y vea cómo se agrega instantáneamente la última versión de la biblioteca. A continuación, intente instalar un paquete completo y sorpréndase.
Visite cualquier clase o lista de funciones que tenga disponibles, escriba Comando + r
, y se te presentará una lista de todos los símbolos en la página. Observe cómo usamos el @
símbolo para ver los métodos.
Como ejemplo, si estás viendo una clase de PHP, Comando + r
listará todos los nombres de métodos. Luego puede usar la búsqueda difusa para moverse instantáneamente al método deseado.
Cuando combinamos esto con las capacidades de cambio de archivos instantáneo de Sublime, este comando se vuelve particularmente útil. Imagina que necesitas editar style.css
, y, específicamente, la .caja
clase dentro de ese archivo; tipo Comando + p
, style @ box
, y tu estas ahi!
Prefixr es un servicio web que aplica automáticamente los prefijos de proveedores de CSS necesarios a sus hojas de estilo, para que no tenga que recordar qué proveedores utilizar para cualquier propiedad de CSS3 determinada. El complemento Prefixr trae esta funcionalidad directamente a su editor!
Una vez que instale el complemento a través del Control de Paquetes, seleccione el contenido de su hoja de estilos y active el complemento escribiendo Control + Comando + x
. Voila! Su archivo ha sido actualizado al instante. Use la sintaxis oficial y deje que Prefixr resuelva los requisitos específicos del proveedor.
Cuanto menos toques el mouse, mejor. Desafortunadamente, de forma predeterminada, crear un nuevo archivo en Sublime Text puede demorar un poco más de lo que nos gustaría. El complemento "Advanced New File", que puede, como siempre, instalarse a través de Package Control, soluciona esto.
Una vez instalado, escriba Comando + Opción + n
, y verás un nuevo panel emergente en la parte inferior.
Lo fantástico de este complemento es que también puede crear archivos dentro de carpetas que aún no existen. Quizás necesites crear una nueva scripts.js
archivo, pero aún no ha creado el js
directorio. Esta bien; El complemento sabrá crear la carpeta si aún no existe. Simplemente escriba la ruta completa al nuevo archivo deseado y listo..
Vamos a crear un nuevo archivo jQuery.js dentro de un js / libs
directorio que aún no se ha creado; Opción + Comando + n
, js / libs / jquery.js
, salvar, Comando + Shift + p
, "Fetch", "Archivo único", "jQuery". Ahora, en segundos, hemos creado un árbol de directorios y descargado la última versión de la biblioteca.
Si lo desean, los usuarios de Vim pueden migrar fácilmente a Sublime Text, gracias a su modo Vintage opcional. Para habilitarlo, edite el archivo "Preferencias predeterminadas" dentro del menú Preferencias, desplácese hasta la parte inferior y elimine el elemento "Vintage" de la paquetes ignorados
formación.
Ahora presiona Escapar
, y estás en modo de comando! Encontrarás que las combinaciones de teclas de Sublime Vi son bastante precisas.!
Cada fragmento de texto Sublime se refiere a un solo archivo y permite completar la pestaña y los valores predeterminados. Para crear un nuevo fragmento de código, seleccione "Herramientas -> Nuevo fragmento de código". En este nuevo archivo, puede, dentro de la
etiqueta, inserte su fragmento. También tiene la capacidad de seleccionar un disparador y un ámbito de pestañas, lo que garantiza que solo se pueda acceder al fragmento desde un tipo de archivo específico..
Guarde el archivo con un .fragmento sublime
extensión, y probarlo!
Si bien los fragmentos nativos de Sublime ciertamente hacen el trabajo, para fragmentos más grandes, prefiero aprovechar GistHub Gists y el control de versiones..
Comience por instalar el complemento "Gist" a través de Control de Paquetes. Esto ahora nos dará un puñado de nuevas opciones en la paleta de comandos..
Cuando intente crear un Gist nuevo, descubrirá que primero debe proporcionar el complemento con sus credenciales de GitHub. Te recomiendo que crees una cuenta especial específicamente para tus fragmentos. Una vez que lo haga, configure las credenciales y vuelva a intentarlo. Una vez que haya creado un puñado de fragmentos, puede enumerarlos a través de la paleta de comandos, seleccionando "Gist: Open Gist".
La mejor parte es que, cuando bifurcas fragmentos de código existentes a través de gist.github.com, estarán automáticamente disponibles para ti en Sublime Text - además, control de versión gratuita para tus fragmentos de código.!
El sistema de compilación de Sublime nos permite aplicar combinaciones de teclas, que pueden canalizarse a través de programas externos, como CoffeeScript, Sass, Grunt y más. Esto significa que, en lugar de cambiar a la Terminal para ejecutar su comando de compilación, puede lograr lo mismo directamente desde el editor.
Usemos CoffeeScript como ejemplo, ya que es bastante popular en estos días. Comience creando un coffeescript.sublime-build
archivo dentro de su directorio "Paquetes /". A continuación, pegue el siguiente código en:
"cmd": ["coffee", "- c", "$ file"], "selector": "source.coffee", "path": "/ usr / local / bin /"
Si bien hay múltiples opciones disponibles para nosotros, nos limitaremos a estas tres por ahora.. cmd
Especifica el comando que debe ejecutarse, junto con los argumentos y las banderas. En este caso, estamos ejecutando el archivo actual a través del comando de compilación CoffeeScript. En segundo lugar, camino
solo es necesario si CoffeeScript no está instalado en su ruta base.
Una vez que haya guardado el archivo, una nueva opción estará disponible a través de "Herramientas -> Crear sistema". Elija "CoffeeScript" y, ahora, cuando ejecute el comando "construir" con Comando + b
, El archivo CoffeeScript actual será compilado.!
Addy Osmani tiene un artículo fantástico sobre las capacidades de construcción de Sublime Text..
A veces, necesitamos filtrar toda la pelusa adicional que se interpone en el camino de nuestra codificación. Utilice el "Modo sin distracciones" para borrar la pantalla, excepto el código. Esta opción está disponible, a través del menú Ver. Seleccione "Entrar en modo libre de distracción"? o usa el atajo de teclado de Mac, Control + Shift + Comando + F
.
Una de las características sobresalientes de Sublime es su barra lateral única que ofrece una vista aérea del archivo actual. Esto puede ser increíblemente útil para archivos grandes, ya que nos permite escanear un archivo en segundos, sin tener que desplazar manualmente la página.
¿Prefieres editar múltiples archivos dentro de la misma ventana? Sublime ofrece un puñado de vistas divididas, incluidas filas y columnas. Ir a Ver -> Diseño
para ver las opciones disponibles y asegúrese de memorizar los comandos del teclado, ya que utilizará esta función a menudo!
El complemento "Live CSS" es simple, pero útil. Automáticamente establecerá el fondo de cualquier valor de color en su hoja de estilo igual a lo que ha especificado. Ciertamente, es una pequeña conveniencia, pero, no obstante, puede ser útil!
Durante el desarrollo, muchas veces, todavía no tenemos el contenido final para una aplicación web. En estos casos, usualmente usamos texto e imágenes de marcador de posición. Al considerar la frecuencia con la que hacemos esto, ¿no sería inteligente crear un puñado de fragmentos de marcadores de posición? Bueno, el plugin de marcador de posición hace esto mismo!
Si necesita una imagen temporal, algunos párrafos "lorem ipsum" o incluso una lista de definiciones con texto ficticio, este complemento será perfecto para el trabajo..
Una conveniencia sorprendentemente rara, encontrada en Notepad ++, son las guías de sangría. A veces, cuando se navega por archivos masivos, puede ser difícil hacer coincidir la sangría sin un poco de ayuda.
Las guías de sangrado de Sublime proporcionan visuales de puntos útiles para solucionar este problema.
El texto sublime a veces se critica porque no ofrece una interfaz llamativa para configurar las opciones de configuración. Irónicamente, en opinión de este autor, el hecho de que Sublime muestre literalmente un objeto editable de JavaScript es una de sus mayores fortalezas. Esto hace que el proceso de ajustar las configuraciones de Sublime a sus necesidades sea lo más simple posible..
Por ejemplo, para deshabilitar las "Pautas de sangría", abra el archivo de configuración "Predeterminado", busque draw_indent_guides
(con Comando + i
), y establece su valor en falso
. ¡Fácil! Asegúrese de revisar todas las configuraciones disponibles.
Si aún estás refiriéndose manualmente a la barra lateral para encontrar el archivo que deseas cambiar, lo estás haciendo mal. El cambio instantáneo de archivos de Sublime es increíble, y es más rápido que nunca en un editor.
Tipo Comando + p
para que aparezca una lista de todos los archivos en el proyecto actual. Ahora puede utilizar la búsqueda difusa para elegir el archivo al que desea cambiar. ¿Necesita una lista de todos los archivos JavaScript? Tipo .js
. Encontrará que, a medida que escribe su búsqueda, Sublime Text, con la velocidad del rayo, cambiará al archivo más alto que coincida con su consulta de búsqueda..
Este es el método preferido para navegar a nuevos archivos. La barra lateral es un último recurso..
Sublime nos da la capacidad de establecer fácilmente enlaces de teclas para activar cualquier comando. Si bien una gran cantidad de enlaces ya están incorporados, si lo desea, puede modificarlos según sus necesidades..
Considere el enlace para mover un archivo a una ventana diferente, cuando trabaje con varias columnas. Por defecto, deberíamos presionar Control + Mayús + 2
; Sin embargo, esto puede ser un poco difícil de recordar. Vamos a reasignar esto a Opción + 2
.
Si bien podemos editar el archivo de combinaciones de teclas predeterminadas, esta es una mala práctica, ya que cualquier actualización Sublime restablecerá sus personalizaciones. En su lugar, es mejor editar el archivo de enlaces de clave de usuario.
["keys": ["alt + 1"], "command": "move_to_group", "args": "group": 0, "keys": ["alt + 2"], "command ":" move_to_group "," args ": " group ": 1, " keys ": [" alt + 3 "]," command ":" move_to_group "," args ": " group ": 2 , "keys": ["alt + 4"], "command": "move_to_group", "args": "group": 3]
No te preocupes si esto parece confuso, busque en el archivo de combinaciones de teclas predeterminadas la configuración que necesita modificar, luego cópielos y péguelos en su archivo de combinaciones de teclas de usuario y actualice las "claves" según corresponda.
Cuando necesitamos buscar un archivo, a menudo recurrimos a un panel de "Buscar y reemplazar", que requiere tiempo. En su lugar, pulse Comando + i
para realizar una búsqueda en vivo en el archivo actual. Te sorprenderá lo rápido que es este método..
Naturalmente, Sublime Text brinda soporte para el plegado de código de múltiples niveles. Digamos que está trabajando en una hoja de estilo y desea ocultar todas las propiedades; elija "Editar -> Plegado en frío -> Plegar todo", o presione Comando + k + 1
.
¡Bonito! Para desplegar todos los bloques, pulse Comando + k + j
.
Las combinaciones de teclas pueden tardar un tiempo en memorizarse, pero vale la pena el esfuerzo.
No olvides que Sublime Text 2 está siendo desarrollado activamente. Le animo a usar la versión de desarrollo, disponible en sublimetext.com/dev. No te preocupes A pesar de que son versiones de desarrollo, rara vez te encontrarás con errores..
El complemento de Alineación, por Will Bond, ajustará instantáneamente su código para crear un código más bellamente diseñado. En la mayoría de los casos, se utiliza para garantizar que el signo igual, =
, para asignaciones de variables alineadas.
Instalado a través de Package Control, el complemento de Alineación se puede activar al seleccionar un fragmento de código aplicable y presionar Control + Shift + a
.
En efecto, el plugin se traducirá:
var primero = 'Joe'; var last = 'Black'; var job_title = 'Death'; var status = 'En vacaciones';
Dentro:
var primero = 'Joe'; var last = 'Black'; var job_title = 'Death'; var status = 'En vacaciones';
Simple, pero útil!
Claramente, hay muchos más secretos y trucos en Sublime Text 2, ¡pero esta lista te ayudará a comenzar! Si desea obtener más información sobre este fantástico editor, asegúrese de consultar nuestro próximo curso: "Flujo de trabajo perfecto en texto sublime 2".