Probablemente ya sepas que somos fans de Sublime Text. Puede parecer un editor de código muy simple, pero tiene muchas funciones ocultas debajo.
Después de explorarlo por un tiempo, podrías sorprenderte al descubrir que puedes hacer una gran cantidad de cosas geniales en Sublime Text. Investigamos un poco y aquí te presentamos algunos de los consejos y trucos que creemos que te gustaría probar.
Vamos a potenciar tu experiencia de codificación en Sublime Text.
#1. Selección
Como desarrolladores web, editamos código con frecuencia. A continuación, te presentamos algunos atajos de teclado útiles que te permiten realizar diferentes tipos de selecciones en Sublime Text.
| Atajo de teclado | Descripción |
|---|---|
| Command + D | Selecciona una palabra |
| Command + L | Selecciona una línea |
| Command + A | Selecciona todo el contenido del documento |
| Ctrl + Command + G | Selecciona todo dentro del corchete (útil al trabajar con CSS o JavaScript) |
Además, Sublime Text nos permite seleccionar varias líneas a la vez, lo que puede aumentar significativamente nuestra productividad. Hay varias maneras de realizar esta función:
| Atajo de teclado | Descripción |
|---|---|
| Command | Mantén presionada la tecla Command y haz clic en las líneas que deseas seleccionar. |
| Command + Ctrl + G | Selecciona un código, línea o palabra primero, luego presiona esta combinación para seleccionar los otros con las mismas instancias. |
| Command + D | Presiona esta tecla para seleccionar rápidamente el siguiente código, línea o palabra que tenga las mismas instancias que el que estás seleccionando actualmente. |
Observa cómo funciona la selección de varias líneas a continuación.
#2. Ordenar CSS
Comúnmente, no nos importa cómo se ordenan las propiedades CSS, ya que CSS nos dará la salida deseada en el navegador independientemente de su posición. Sin embargo, ponerlas en un orden particular puede hacer que tu código esté más organizado. En Sublime Text, puedes seleccionar propiedades CSS y presionar F5 para ordenar las propiedades en orden alfabético.
También puedes usar un complemento de terceros como CSSComb para tener más control sobre la regla de ordenación de propiedades.
#3. Paleta de Comandos
Puedes realizar rápidamente muchas tareas con la Paleta de Comandos, como renombrar archivos, establecer la sintaxis de los archivos e insertar fragmentos de código. Para mostrar la Paleta de Comandos en Sublime Text, presiona Command + Shift + P, luego ingresa el comando que deseas ejecutar. Aquí tienes algunos ejemplos.
Renombrar archivo
Establecer la sintaxis del archivo
#4. Cambiar entre Pestañas y Proyectos
Al trabajar en un proyecto, es posible que tengamos muchos archivos abiertos. En Sublime Text, puedes cambiar rápidamente entre estos archivos (o pestañas) con los siguientes atajos:
| Atajo de teclado | Descripción |
|---|---|
| Command + T | Muestra las pestañas que están actualmente abiertas. Selecciona una para ir a la pestaña. |
| Command + Shift + ] | Esto te llevará inmediatamente a la siguiente pestaña. |
| Command + Shift + [ | Esta tecla te llevará a la pestaña anterior. |
| Command + Ctrl + P | Cambia entre los proyectos que figuran en la barra lateral de Sublime Text. |
#5. Edición entre Archivos
Esta función es muy útil cuando se trabaja con varios archivos. Por ejemplo, supongamos que tienes varios bloques de código que son muy similares y se distribuyen en diferentes archivos del proyecto. Para cambiar estos códigos de manera eficiente, puedes:
- Presiona Command + Shift + F en Sublime Text.
- Ingresa las palabras, la oración o las líneas de código que deseas cambiar en el campo Buscar.
- Consejo: presiona Command + E para colocar rápidamente el código seleccionado en el campo Find.
- Especifica los nombres de los archivos dentro del campo Dónde o agrega
<archivos abiertos>para que solo se afecten los archivos que están actualmente abiertos. - Ingresa la palabra o el código de reemplazo en el campo Replace y presiona el botón Replace.
#6. Rastreo de Código
Esta función es realmente útil al editar CSS. Presiona Command + R. Aparecerá un cuadro de diálogo con una lista de selectores CSS en el documento, como se muestra en la captura de pantalla a continuación. Puedes buscar y seleccionar los selectores a los que deseas navegar.
Esta es una forma más conveniente de buscar un bloque de código que usar la función Buscar normal.
#7. Verificador Ortográfico
Frecuentemente escribo en un editor de código y a menudo cometo errores ortográficos. Si eres como yo, puedes habilitar el verificador ortográfico en Sublime Text de esta manera:
- Ve a Preferencias > Configuración – Usuario en Sublime Text y agrega la siguiente línea:
"spell_check": true,#8. Mejora de la Barra Lateral
Este complemento, SideBarEnhancements, trae grandes mejoras a la barra lateral de Sublime Text. Una vez instalado, haz clic con el botón derecho en la barra lateral y encontrarás menús adicionales como Open in Finder, New File, New Folder, Open With, y Open in Browser.
#9. Cambiar el Tema de Sublime Text
También podemos cambiar la apariencia completa de Sublime Text. Uno de mis favoritos se llama Soda Theme, que se puede instalar a través de Package Control.
Si el tema que deseas instalar no está disponible en el repositorio de Package Control, puedes instalarlo manualmente:
- Descarga y descomprime el paquete del tema.
- Ve a Settings > Browse Packages…
- Coloca la carpeta del tema en la carpeta Paquetes.
- Luego ve a Settings > Settings, y agrega la siguiente línea para activar el tema:
"theme": "Soda Light.sublime-theme"#10. Cambiar el Icono de Sublime Text
Además de cambiar el tema, también puedes cambiar el icono. Hay muchos iconos de Sublime Text bellamente diseñados disponibles en Dribbble. Aquí tienes cómo cambiar el icono:
- Descarga uno de los iconos de Dribbble. Asegúrate de que el icono venga en formato .icns, o conviértelo primero con esta herramienta: iConvert.
- Ejecuta el siguiente comando en la Terminal:
open /Applications/Sublime\ Text.app/Contents/Resources/- Reemplaza el archivo
Sublime Text.icnscon el que descargaste.
#11. Sincronizar la Configuración
Si trabajas en varias computadoras, es posible que desees mantener y aplicar la misma configuración para Sublime Text en todas estas computadoras. Podemos configurarlo con la ayuda de Dropbox (y un pequeño ajuste).
- Primero, ejecuta el siguiente comando en la Terminal:
mkdir $HOME/Dropbox/sublime-text/
mv "$HOME/Library/Application Support/Sublime Text/Packages" "$HOME/Dropbox/sublime-text/"
mv "$HOME/Library/Application Support/Sublime Text/Installed Packages" "$HOME/Dropbox/sublime-text/"- Luego, ejecuta este comando en la Terminal en cada computadora que quieras sincronizar con la configuración que hemos puesto en Dropbox:
DSTPATH="$HOME/Library/Application Support/Sublime Text"
DROPBOX_PATH="$HOME/Dropbox/sublime-text"
rm -rf "$DSTPATH/Installed Packages"
rm -rf "$DSTPATH/Packages"
mkdir -p "$DSTPATH"
ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"
ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"Gracias a xMarekacross por el consejo.
#12. URL Clickeables
ClickableURLs es un pequeño complemento de Sublime Text que es muy útil cuando encuentras un montón de URL dentro de tus códigos. Hace que las URL sean clickeables.
