Cada desarrollador web tiene un editor de código favorito . Algunas personas confían en un entorno de desarrollo integrado (IDE), mientras que otras solo quieren simplicidad. Si prefiere lo último, puede apreciar los paquetes de Sublime Text .
Uno de los aspectos más atractivos de Sublime Text es que es altamente modular. Si eres un purista, puedes usar el editor tal como está. Sin embargo, varios paquetes pueden hacer que su flujo de trabajo de desarrollo sea mucho más fácil al ampliar su funcionalidad. ¡En este artículo, te presentaremos diez de nuestros favoritos!
Los paquetes son el equivalente de Sublime Text a los módulos o complementos de WordPress. Son complementos que puede configurar para ampliar la funcionalidad principal de la plataforma y facilitar su trabajo.
El concepto de paquetes de edición de código no es nada nuevo. Las plataformas más populares, como Atom , también ofrecen muchas extensiones. Sin embargo, Sublime Text sigue siendo una excelente opción si desea un editor de código liviano con una amplia selección de complementos.
En cuanto a cómo instalar paquetes de Sublime Text, el proceso es muy sencillo. Para comenzar, visite el repositorio de la extensión que desee y descárguela:
Una vez que tenga el . zip , navegue a su directorio de Paquetes de Sublime Text y expándalo dentro. En caso de que no pueda encontrarlo, el directorio debe estar en nombre de usuario/appdata/roaming/Sublime Text/Packages . La mayoría de las extensiones estarán listas para usar dentro de Sublime Text tan pronto como extraiga la carpeta sin necesidad de reiniciar el editor.
Si desea un proceso más simplificado, también puede utilizar el Control de paquete de texto Sublime oficial . En pocas palabras, esta herramienta le permite navegar por un repositorio de paquetes públicos e instalarlos usando comandos simples.
Para configurar Sublime Text Package Control, vaya a Tools > Install Package Control :
Una vez que se configura Package Control, puede usarlo a través de la consola de Sublime Text. Presione CTRL + ~ para abrirlo, luego escriba CONTROL DE PAQUETE: para ver una lista completa de los comandos que puede usar:
Para instalar un nuevo paquete, escriba Package Control: Install Package y la herramienta abrirá una lista de todos los paquetes públicos dentro de su repositorio:
Puede navegar por la lista usando la consola. Sin embargo, antes de instalar cualquier cosa, probablemente querrá saber un poco más sobre los paquetes disponibles para que pueda elegir los mejores para su flujo de trabajo.
Los 10 mejores paquetes de texto sublime para desarrolladores web
Hay cientos de paquetes de Sublime Text para elegir, por lo que seleccionar una lista de las mejores opciones no es una tarea fácil. Con eso en mente, decidimos centrarnos en los que pueden ayudarlo a simplificar su flujo de trabajo tanto como sea posible. La mayoría de las opciones en esta lista son independientes del idioma, por lo que podrá aprovecharlas sin importar en qué tipo de desarrollo se concentre.
1. Alineación
La alineación es un paquete simple que toma su código y alinea los caracteres para los que lo configura. Su funcionalidad es simple, pero hace que la lectura del código sea mucho más agradable.
Una vez que instale el paquete, deberá configurar qué caracteres debe alinear. Puede hacer esto abriendo la Configuración del paquete – Archivo de usuario:
Cuando se abra el archivo, copie y pegue el siguiente código dentro:
|
01
02
03
04
05
|
{ "alignment_chars": [ "(", ":" ]} |
Este fragmento le dice al paquete que alinee los caracteres ‘(‘ y ‘:’ en cualquier código al que lo aplique. Para darle un ejemplo, aquí está el PHP que usaría para poner en cola estilos para un tema secundario en WordPress :
Ya está bastante organizado. Sin embargo, si lo resalta y presiona CTRL + Alt + A, la alineación aplicará su nueva configuración, lo que resultará en esto:
Los caracteres que desea alinear dependen de usted. Afortunadamente, solo se necesitan presionar unos pocos botones después de configurar el paquete para ponerlo en funcionamiento.
2. Emmet
Si es un desarrollador front-end o pasa mucho tiempo trabajando con HTML y CSS, entonces Emmet es una adición imprescindible a su conjunto de herramientas. Este paquete le permite escribir expresiones CSS dinámicas o ‘abreviaturas’ y hacer que se expandan en un código completamente funcional.
Supongamos que desea incluir una lista desordenada de elementos en cualquier página usando HTML. Ese código podría ser algo como esto:
|
01
02
03
04
05
06
07
08
|
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> </ul></div> |
Escribir marcas repetitivas a mano puede ser bastante aburrido. Con Emmet, puede generar el código necesario usando la siguiente abreviatura y expandiéndola con solo presionar un botón:
|
01
|
#page>div.logo+ul#navigation>li*3>a{Item $} |
Si observa la sintaxis, notará que las abreviaturas siguen patrones muy lógicos. Más allá de generar código, Emmet también le permite navegar por los fragmentos resultantes, seleccionar partes importantes, incorporar nuevas etiquetas y más.
Fuera de la caja, Emmet incluye tantas abreviaturas que seguramente necesitará consultar su documentación antes de comenzar.
3. SFTP
Desde el principio, el nombre de este paquete debería darle una idea de qué esperar. Con SFTP , puede asignar una carpeta local a una remota o editar archivos directamente desde un servidor en Sublime Text.
Acceder a un servidor remoto a través de SFTP es simple. Vaya a Archivo > SFTP/FTP > Servidor de configuración. Aquí puede configurar sus ajustes de conexión FTP/SFTP:
Una vez que configure sus credenciales, puede hacer clic con el botón derecho en los archivos dentro de la barra lateral para asignarlos a su servidor remoto o conectarse directamente a él.
4. JSHint
Si trabaja con JavaScript, un verificador de sintaxis de calidad facilitará mucho la resolución de problemas. Con JSHint , puede obtener una descripción general rápida de cualquier error en su código, y la consola del paquete le permite saltar de una columna a otra.
Después de instalar JSHint, puede habilitarlo presionando Control + J o Alt + J , lo que abrirá la consola para cualquier archivo en el que esté trabajando:
Tenga en cuenta que necesita node.js para que JSHint funcione en su computadora. De lo contrario, el paquete puede devolver un error cuando intenta depurar un archivo.
5. Nombre de archivo automático
AutoFilename es uno de los paquetes de Sublime Text más sencillos que encontrarás. Sin embargo, una vez que empiece a usarlo, puede que le resulte difícil volver atrás.
Con AutoFileName instalado, si intenta vincular un archivo con una etiqueta href , puede presionar Control + Espacio y automáticamente mostrará una lista de archivos y directorios ubicados en el mismo nivel que el principal. Puede navegar fácilmente a través de él usando el cursor o el teclado y seleccionar cualquier archivo que desee. El paquete agregará automáticamente su ruta.
Más allá de eso, si usa AutoFilename para insertar rutas de imágenes, el paquete también identificará sus dimensiones y completará los atributos de alto y ancho.
Si desea agilizar aún más el proceso, puede configurar AutoFilename para que se active sin necesidad de presionar Control + Espacio . Para hacerlo, abra su archivo de configuración de usuario y agregue el siguiente código:
|
01
02
03
04
05
06
07
08
09
10
11
|
"auto_complete_triggers":[ { "characters": "<", "selector": "text.html" }, { "characters": "/", "selector": "string.quoted.double.html,string.quoted.single.html, source.css" }] |
Una vez que guarde este código, AutoFilename se activará cada vez que escriba una barra inclinada, ahorrándole algunas pulsaciones de teclas.
6. Recarga en vivo
Si odia tener que actualizar su navegador cada vez que realiza un cambio en un archivo local para ver los resultados, LiveReload puede ser el paquete perfecto para usted. Le permite sincronizar archivos locales con su navegador favorito, de modo que cuando realice cambios y los guarde, se mostrarán al instante.
Para que LiveReload funcione, debe hacer dos cosas:
- Agregue el script LiveReload al archivo HTML en el que está trabajando presionando Ctrl + Shift + P y seleccionando la opción Insertar script livereload.js (que se muestra a continuación).
- Instale la extensión correspondiente para el software que está utilizando.
Aquí hay una vista rápida de lo que debería ver cuando agrega el script requerido a su archivo local:
Una vez que tenga el script, debe configurar una extensión si está usando Safari, Chrome o Firefox. Después de configurarlo, podrá agregar el script a cualquier archivo y ver los cambios en vivo cuando los abra a través de su navegador.
7. Diferencias de archivos
A veces, es necesario navegar a través de largos tramos de código para encontrar modificaciones o cambios recientes realizados por otra persona. Sin embargo, buscar a simple vista puede ser ineficiente. Si tiene una versión anterior o separada de un archivo específico, puede usar FileDiffs para mostrarle las inconsistencias.
Una vez que configure FileDiffs, puede hacer clic con el botón derecho en cualquier lugar del título de un proyecto o dentro del mismo archivo para acceder a su menú:
El paquete le brinda muchas opciones para comparar su archivo actual. Por ejemplo, puede seleccionar un archivo en una pestaña diferente o el contenido de su portapapeles. Una vez que elija, FileDiffs generará un nuevo archivo que incluye las diferencias resaltadas:
En la captura de pantalla anterior, puede ver las diferencias resaltadas entre dos fragmentos cortos de código. Cuanto más complejos sean los archivos con los que está tratando, más tiempo puede ahorrarle FileDiffs.
8. Minificador
La minificación puede ser una práctica excelente si intenta mejorar el rendimiento de un sitio web. Por lo general, utiliza herramientas de terceros para minimizar su código, pero con el paquete correcto, puede hacerlo dentro de Sublime Text.
Minifier le permite procesar archivos JavaScript y CSS. Todo lo que tiene que hacer es configurar el paquete y usar una de estas dos combinaciones de botones:
- CTRL + Alt + M : Minimiza directamente el archivo abierto actual.
- CTRL + Alt + Shift + M : Minimiza el archivo abierto actual y guarda la salida en uno nuevo.
En este ejemplo, tomamos un . css que originalmente ocupaba más de una docena de líneas y lo minimizó:
El proceso solo debería tomar unos segundos, ahorrándole un tiempo significativo durante la optimización del rendimiento más adelante.
9. TodoRevisar
Si tiende a dejar recordatorios a lo largo de su código de tareas en las que necesita trabajar o regresar, le gustará TodoReview . En pocas palabras, el paquete compila listas de comentarios que se encuentran dentro de sus proyectos y los envía a un nuevo archivo, así:
La configuración del paquete predeterminado solo reconoce los comentarios TODO . Sin embargo, puede agregar fácilmente nuevos patrones modificando el archivo de configuración del paquete:
|
01
02
03
04
|
"patterns": { "TODO": "TODO[\s]*?:[\s]*(?P<todo>.*)$", "URGENT": "URGENT[\s]*?:[\s]*(?P<urgent>.*)$",} |
En este ejemplo, configuramos un nuevo tipo de patrón para que el paquete lo reconozca (¡urgente!). Puedes configurar tantos como quieras.
10. Todo Autocompletar
De forma predeterminada, Sublime Text intentará autocompletar el código dentro del archivo en el que está trabajando. Es un buen comienzo, pero ¿qué sucede si está trabajando en un proyecto con varios archivos?
Todo Autocompletar amplía la funcionalidad básica de autocompletar de Sublime Text y lo ayuda a encontrar coincidencias dentro de todos los archivos abiertos. Es una diferencia pequeña, pero significativa, que puede acelerar su flujo de trabajo de desarrollo.
Si desea ajustar la configuración del paquete o deshabilitarlo para tipos de archivos específicos, puede modificar fácilmente su configuración con el siguiente código:
|
01
02
03
04
|
"exclude_from_completion": [ "css",],"min_word_size": 5, // don't show completions for words with fewer than this many chars many chars |
En este ejemplo, estamos excluyendo . css de autocompletar y deshabilitar la funcionalidad para palabras más cortas. De esa forma, el paquete no se activa con una frecuencia perturbadora o molesta.
Conclusión
Sublime Text ofrece una gran cantidad de funciones útiles listas para usar, que incluyen autocompletado, resaltado de sintaxis, plegado de código y mucho más. Sin embargo, esas son características que básicamente todos los editores de código incluyen en estos días. Lo que realmente lo distingue es su enorme biblioteca de paquetes.
Cuando se trata de elegir qué paquetes de Sublime Text debe usar, depende de su flujo de trabajo único. Si usa HTML y CSS, Emmet es imprescindible. Otros paquetes, como AutoFilename y All Autocompletar, suelen ser las mejores opciones, independientemente del tipo de desarrollo que realice.
¿Tiene alguna pregunta sobre los paquetes de Sublime Text? ¡Háganos saber en la sección de comentarios!
Imagen en miniatura del artículo por MchlSkhrv / shutterstock.com