Sublime Text: Trucos, atajos y plugins esenciales para sacarle el máximo partido al editor
Categoría:
Desarrollo web,
Temas técnicos sobre webs
Fecha:
29/11/2023
Tanto si sueles utilizar editores de código como si no estás familiarizado con este tipo de herramientas, pero tienes la necesidad de utilizar uno que facilite tu trabajo, Sublime Text es una gran opción. ¿Quieres saber por qué?
Entonces, lee hasta el final este artículo en el que te mostraré cómo utilizar uno de los editores de código más populares. ¡Vamos allá! [elementor-template id="80835"]¿Qué es un editor de código?
De la misma manera que un escritor utiliza un editor de texto o un diseñador utiliza un software de edición como Photoshop, los desarrolladores y programadores disponen de editores de código como herramienta básica de trabajo en su día a día. Antiguamente, los desarrolladores y programadores utilizaban editores de texto plano, como Notepad o incluso el bloc de notas de Windows. Actualmente, existen estos editores de código que ofrecen funciones específicas para estos perfiles profesionales: las más conocidas son el autocompletado de código o el resaltado de sintaxis.
También es importante que dispongas de un editor de código si trabajas con algún CMS como WordPress, ya que te resultará mucho más fácil realizar cambios en el editor de temas que este trae integrado o incluso es posible que tengas que acceder al hosting del propio WordPress y realizar cambios en el código desde su cPanel.
¿Qué es Sublime Text?
Sublime Text es un editor de texto pensado para escribir código, escrito en C++ y Python, y se encuentra disponible tanto para Windows como para Mac y Linux.
Gracias a su interfaz oscura y al sistema de resaltado de las líneas de código, está pensando para que el usuario minimice las distracciones centrándose solo en lo relevante del documento sobre el que está trabajando.
Esto, aunque parezca intrascendente, si te dedicas al desarrollo o programación web sabrás que es muy importante: al trabajar con numerosas hojas de código, disponer de toda la información de la manera más clara posible es algo fundamental. Por defecto soporta 43 lenguajes de programación diferentes, entre los que se encuentran los orientados a front-end y conocidos por todos (como HTML, CSS o JavaScript) y otros, quizás menos utilizados por el usuario medio y enfocados en el back-end (como el SQL, que es un lenguaje enfocado a la creación y edición de bases de datos relacionales como las utilizadas por nuestros hosting). Al contrario de lo que muchos usuarios piensan, no es un software de código abierto u open-source, sino que es necesario obtener una licencia de uso aunque existe una versión de evaluación que es plenamente funcional y sin limitaciones temporales. Cabe destacar también que Sublime Text dispone de una comunidad muy activa. En su web oficial puedes encontrar un foro de ayuda en el que diferentes desarrolladores comparten desde tutoriales para guiar a otros profesionales en el manejo de Sublime Text hasta diferentes plugins para añadir a este editor de código con funcionalidades que no dispone de manera nativa.Ventajas de Sublime Text
A pesar de que a día de hoy, y por suerte para todos los que desempeñan su labor en el mundo del desarrollo y la programación, existen multitud de editores de código, con sus beneficios y desventajas, Sublime Text es una gran opción por las siguientes características:- Es uno de los editores de código más utilizados: Esto repercute en lo que te mencionaba antes, una gran comunidad de desarrolladores disponibles para echarte una mano, solucionar dudas y ofrecerte nuevas funcionalidades.
- Infinidad de extensiones: Dispones de un gran número de herramientas adicionales que facilitan nuevas funciones al editor de código y gracias a las que tu trabajo diario será mucho más sencillo, llegando a realizar acciones que de otro modo serían mucho más laboriosas y tediosas.
- Gestión de proyectos y navegación eficiente: Facilita la gestión de proyectos mediante la barra lateral, que muestra la estructura de archivos y carpetas. La función de búsqueda rápida y la capacidad de navegar fácilmente entre archivos y líneas de código contribuyen a una experiencia de desarrollo más eficiente y organizada.
- Soporte nativo para más de 40 lenguajes de programación: En comparación a otros editores de código existentes en el mercado, Sublime Text incorpora de manera nativa 43 lenguajes de programación diferentes además del texto plano, es decir, solo con instalarlo podremos trabajar en todos esos lenguajes de programación y cambiar entre uno y otro con un simple clic.
- Personalización completa de Keybindings: Las llamadas Keybindings son los métodos abreviados de teclado para diferentes comandos. En Sublime Text puedes personalizar completamente los accesos rápidos a tu gusto, para que tu trabajo diario sea lo más intuitivo posible.
- Mapa de navegación: Sublime Text te ofrece la posibilidad de utilizar un minimapa que representa la estructura del archivo sobre el que estás trabajando.
- Resaltado de llaves, indentación, sintaxis y autocompletado: Sublime Text gestiona muy bien estos conceptos ofreciéndote de una manera clara y directa dónde comienza y termina un párrafo, realizando sugerencias para completar una línea de código, etc. Esto repercute directamente en tu experiencia de usuario y en lo que facilita el trabajo de mantener tu archivo de código bien organizado y estructurado.
- Estabilidad y rendimiento: Son características esenciales de Sublime Text. Aunque es ligero en recursos, puede manejar proyectos grandes sin sacrificar la velocidad. Esta estabilidad garantiza una experiencia de desarrollo sin interrupciones, incluso en situaciones de trabajo intensivo.
Empieza a utilizar Sublime Text
Ahora que ya sabes qué es Sublime Text y cuáles son sus ventajas con respecto a otros editores de código existentes, espero que estés dispuesto a empezar a trabajar con él. Por eso, te voy a explicar de manera rápida y sencilla cómo descargarlo y configurarlo correctamente para que empieces a utilizarlo cuanto antes.Cómo descargar Sublime Text
El proceso de descarga e instalación es muy sencillo e intuitivo. Aun así, te voy a dejar aquí unos pequeños pasos a seguir para que te asegures hacerlo correctamente. En primer lugar, debes dirigirte a la página web de Sublime Text e irte al apartado "download". En la parte superior aparece la versión actual de Sublime Text y diferentes enlaces en los que deberás seleccionar la variante del editor en función del sistema operativo que utilices.
Como te comentaba antes, este editor se puede descargar para Mac, Windows y Linux.
También aparece un mensaje debajo de estos enlaces de descarga, en el que se indica que Sublime Text puede ser descargado y evaluado de manera gratuita pero que deberás hacerte con una licencia de pago. Esto significa que puedes utilizar de manera ininterrumpida y durante el tiempo que necesites este programa, pero de vez en cuando te aparecerá un mensaje en pantalla indicándote si quieres actualizar tu licencia de uso.Cómo configurar Sublime Text
No te voy a explicar de manera detallada todas las posibilidades de configuración que ofrece Sublime Text, fundamentalmente porque la puedes encontrar en la documentación de su web. Aun así, creo que es importante mencionar un detalle que puede resultarte curioso al empezar a utilizar este programa de edición de código. Abre Sublime Text y dirígete al menú que se encuentra en la parte superior izquierda de tu pantalla. Una vez ahí, clica sobre Preferences > Settings para visualizar un archivo como este:
Como puedes apreciar, el menú de configuración de Sublime Text no es visual. Esto puede ser desalentador en un primer momento, pero si lo analizas con detenimiento verás que se entiende a la perfección.
Como te decía, el archivo de configuración está formado por dos matrices JSON, conteniendo la página de la izquierda la configuración por defecto, mientras que en la derecha es donde yo te recomiendo que realices los cambios que necesites. De esta manera, siempre podrás volver a la configuración inicial en el caso de que alguno de los cambios que hayas realizado no te convenza. Para resumir todo esto, te voy a poner un ejemplo muy breve. Imagínate que te gustaría realizar los siguientes cambios en la configuración de Sublime Text:"font_size": 10 a "font_size": 12"margin": 4 a "margin": 3{
"font_size": 12,
"margin": 3
}Principales funciones de Sublime Text
Como ya te imaginarás, existen ciertas funciones concretas que los editores de código pueden llevar a cabo y que no pueden ser realizadas por otros programas más pensados para escribir en texto plano. Por eso te voy a explicar a continuación cuáles son las principales funciones que ofrece Sublime Text.Edita simultáneamente en varias líneas
En Sublime Text puedes realizar cambios en varias líneas de manera simultánea. ¿Qué significa esto? Con el siguiente ejemplo lo entenderás a la perfección. Imagínate que en un documento de Sublime Text tienes varios dominios web y quieres añadir a todos su extensión correspondiente, tal que así:
Llegados a este punto, existen dos opciones. Con la tecla "ctrl" presionada puedes clicar al final de cada una de las líneas y escribir a continuación la extensión correspondiente, que en el caso del ejemplo sería ".es". Ahora bien, imagínate que en vez de tener cinco líneas tuvieras un documento con un número desorbitado de filas. ¿Cuál sería la solución en ese caso?
En ese caso, selecciona todas las líneas del documento con la combinación de teclas "ctrl+A" y, a continuación, presiona "ctrl+shift+L". Ahora solo debes presionar la tecla "FIN" de tu teclado para situarte al final de todas las filas del documento de manera simultánea y escribir ".es". El resultado final es el que puedes ver en la siguiente imagen:
Como ves, la función de edición multilínea puede facilitarte enormemente ciertas tareas que serían muy tediosas de realizar.
Creación rápida de fragmentos de texto o snippets
Una de las funciones más interesantes que ofrece Sublime Text es la creación rápida de fragmentos de texto (snippets). Como ya sabrás, en programación muchas veces debes escribir ciertos fragmentos de manera repetida, siendo esta una tarea engorrosa e incluso a veces llevando a cometer errores. Esto precisamente es lo que esta función pretende eliminar, pudiendo crear previamente estos fragmentos o snippets e incluirlos en tu documento de trabajo de manera rápida y sencilla. A continuación, te voy a mostrar un ejemplo de snippet que estoy seguro que te ayudará en tu día a día. Para crear un nuevo snippet, accede al menú de Sublime Text y selecciona Tools> Developer> New snippet. Ahora mismo, debería aparecer en tu pantalla lo siguiente:
Aunque de primeras esta estructura pueda parecer un poco complicada, verás que en realidad es muy sencilla.
En el ejemplo del que te hablaba, vamos a crear un snippet para que simplemente escribiendo la palabra "imagen con sus atributos" y tabulando se incluya directamente la línea de código de una imagen con sus atributos "alt" y "title", es decir, que realizando los pasos que te acabo de decir, en tu archivo aparecerá lo siguiente <img src="ruta" alt="Etiqueta alt" title="Etiqueta title">. Para conseguirlo, solo debes sustituir ciertos elementos en la anterior estructura, hasta tener lo siguiente.
Como ves, he sustituido lo incluido en la etiqueta <content> por lo que queremos que el snippet muestre. En este caso, una imagen con dos atributos. También hemos definido cuál queremos que sea el "tabTrigger" o activador con el que funcionará el fragmento de texto.
Una vez guardado lo anterior, solo debes ir a un archivo nuevo, escribir la palabra "imagen" y pulsar la tecla "TAB" para que Sublime Text te devuelva el contenido del snippet. También quiero comentarte, para finalizar este apartado, que existen algunos fragmentos de texto que Sublime Text ofrece por defecto. Tú mismo puedes comprobarlo, por ejemplo, abriendo un archivo nuevo, escribiendo la palabra "HTML" y tabulando. Con esta simple combinación, el editor nos devuelve la estructura de un documento HTML completa para que puedas empezar a trabajar con ella de inmediato.Otras funciones de Sublime Text
Sublime Text ofrece muchas funciones, además de las dos de las que te he hablado antes, pero por motivos obvios no puedo hablarte de todas en este artículo. Aun así, me gustaría mencionar dos de ellas:- Trabajo con expresiones regulares (Regex): Las expresiones regulares o Regex son, por así decirlo, un tipo de filtro que se utiliza en desarrollo para realizar búsquedas sin importar la amplitud de estas. Con Sublime Text puedes realizar la búsqueda y el reemplazo de caracteres de manera masiva gracias a estas expresiones regulares.
- Ejecución del código directamente desde el editor: Sublime Text, a diferencia de otros editores, te ofrece la posibilidad de ejecutar directamente el código sobre el que estás trabajando. Esto está pensado sobre todo para proyectos simples y fundamentalmente escritos en Python.
¿Qué es un plugin o paquete en Sublime Text?
Sublime Text es una aplicación muy completa de por sí ya que, como te he ido contando, dispone de diferentes utilidades pensadas para ayudarte en el desarrollo de tus tareas diarias. Pero si se diese el caso en el que estas no fuesen suficientes, existen múltiples plugins (también llamados paquetes) que podrás descargar e instalar de manera muy sencilla gracias al gestor de paquetes de Sublime Text llamado Package Control.Cómo descargar e instalar Package Control en Sublime Text
Existen tres formas diferentes de obtener el gestor de paquetes de Sublime Text. Por supuesto, al igual que el editor, Package Control se encuentra disponible tanto para Windows como para Mac y Linux. Las formas de descargar e instalar Package Control en tu dispositivo son:- La primera y más sencilla es que es posible que, simplemente descargando la última versión del editor, se te instale de manera conjunta. Se puede comprobar a través del menú de Sublime Text, clicando en la opción "Tools". Si ya se encuentra instalada, no te aparecerá nada referente a Package Control al final del desplegable y, por lo tanto, puedes dar por hecho que ya está instalado en tu dispositivo.
- La segunda consiste en instalar Package Control a través la propia aplicación de Sublime Text. El proceso es el que te mencionaba en el punto anterior. Accede al menú y, en el apartado "Tools", aparecerá como última opción. Selecciónala y espera unos instantes hasta que el editor muestre en pantalla el mensaje que confirma que la instalación ya ha sido realizada.
- La tercera se realiza externamente a Sublime Text a través de la consola de comandos del sistema operativo que estés utilizando. En Windows/Linux: abre la consola utilizando la combinación de teclas "ctrl+shift+P", escribe "Install Package Control" y presiona la tecla "Intro" para comenzar el proceso de instalación. En Mac: El proceso de instalación es igual que en Windows o Linux pero simplemente debes variar la combinación de teclas para abrir la consola sustituyendo la tecla "ctrl" por "cmd".
Plugins imprescindibles para Sublime Text
Ahora que ya sabes cómo gestionar los plugins de Sublime Text gracias a Package Control, te voy a hablar muy brevemente de los que yo considero que son los paquetes fundamentales para trabajar con este editor.La elección de plugins para Sublime Text dependerá en gran medida de las necesidades específicas de cada desarrollador y del tipo de desarrollo que esté realizando.
Emmet
El funcionamiento de este paquete se basa en utilizar ciertas abreviaciones para desarrollar grandes estructuras de código de manera rápida e intuitiva. Es un paquete básico a la hora de trabajar con Sublime Text, sobre todo si te dedicas a la programación front-end, ya que te servirá para ahorrarte unas cuantas horas de trabajo, reduciendo al mínimo el tiempo utilizado para generar estructuras recurrentes. Emmet es un plugin que te puede ayudar mucho en tu día a día, por eso te recomiendo que lo pruebes tú mismo y consultes la documentación que ofrece de manera gratuita en su web. En ella, encontrarás de manera detallada todas las abreviaciones que te mencionaba antes, además del resto de funciones que esta herramienta puede ofrecerte.Traducción al castellano de los menús de Sublime Text
Este plugin te permite disponer de la interfaz de Sublime Text en castellano. Se encuentra en un repositorio de GitHub, y simplemente siguiendo las instrucciones que en él se ofrecen podrás traducir tu editor y empezar a trabajar con él en tu idioma nativo. Esta es solo una pequeña muestra de todos los plugins que puedes integrar en Sublime Text. Por lo tanto, te animo a que investigues y pruebes por ti mismo la cantidad de funciones diferentes que puedes añadir a este editor.Sublime Linter
Es un plugin de Sublime Text que te vendrá genial para mantener un código limpio y libre de errores. Su función principal es señalarte problemas de sintaxis y estilo en diversos lenguajes. Compatible con un gran número de linters, con los que analiza el código en tiempo real y te señala cualquier error o advertencia directamente en el editor de Sublime Text.
Además de señalar errores de sintaxis, Sublime Linter también ofrece sugerencias para mejorar el estilo del código. Esta funcionalidad es especialmente útil en entornos colaborativos, donde mantener un estándar de codificación común es esencial para la legibilidad y para el mantenimiento del código a medio y largo plazo.
GitGutter
Para una visualización clara y eficiente de los cambios de un archivo en comparación con la versión del repositorio de Git. Incluye pequeños indicadores en el área de la barra lateral del editor para que veas rápidamente dónde están los cambios (líneas modificadas, añadidas o eliminadas) en el código. Si buscas formas de simplificar el proceso de revisión y de hacerte más cómodo el seguimiento de cambios a lo largo del tiempo, este es el plugin de Sublime Text que necesitas. Además, la información que ofrece GitGutter se actualiza en tiempo real.AutoFileName
Quizá más sencillo que los anteriores, pero no por ello menos útil. Cuando un desarrollador comienza a escribir una ruta de archivo, AutoFileName despliega una lista de sugerencias en tiempo real, basándose en la estructura de carpetas del proyecto. Esto no solo ahorra tiempo al evitar errores tipográficos, sino que también mejora la precisión al trabajar con proyectos que contienen numerosos archivos y carpetas.Atajos de teclado fundamentales en Sublime Text
Existen multitud de combinaciones de teclas con los que puedes agilizar tu trabajo diario en Sublime Text. A continuación, te voy a mostrar los principales atajos de teclado que puedes utilizar en este editor:Trabajo con proyectos en Sublime Text
| Función | Windows/Linux | MacOS |
| Nuevo proyecto | ctrl+n | ⌘+n |
| Abrir archivo | ctrl+o | ⌘+o |
| Guardar archivo | ctrl+s | ⌘+s |
| Abrir paleta de comandos | ctrl+shift+p | ⌘+shift+p |
| Mostrar/ocultar barra lateral | ctrl+kb | ⌘+kb |
| Insertar salto de línea | ctrl+shift+enter | ⌘+shift+enter |
Selección y búsqueda en Sublime Text
| Función | Windows/Linux | MacOS |
| Seleccionar palabras | ctrl+d | ⌘+d |
| Seleccionar líneas | ctrl+l | ⌘+l |
| Seleccionar todo | ctrl+a | ⌘+a |
| Selección dentro de llaves | ctrl+shift+m | ⌘+shift+m |
| Selección múltiple | ctrl+click | ⌘+click |
| Búsqueda simple | ctrl+f | ⌘+f |
| Búsqueda avanzada | ctrl+shift+f | ⌘+shift+f |
| Búsqueda de funciones | ctrl+r | ⌘+r |
