Utilidades de Sublime Text para desarrollo frontend

Como ya sabemos desde hace un tiempo, Sublime Text es uno de los editores de código más populares, usados y con más contribuciones de la comunidad en forma de plugins que potencian y mejoran nuestro flujo de trabajo. En nuestro post anterior hablamos sobre cómo descargar e instalar Sublimetext.

En este artículo vamos a avanzar una serie de plugins que interesarán sobre todo a diseñadores/desarrolladores frontend.

Empezaremos por Emmet, plugin que está presente en muchos otros editores de código, pero que hay que mencionar teniendo en cuenta la enorme eficiencia con la que genera estructuras HTML con sintaxis de CSS, utilizando unos pocos parámetros. Todo ello en una sola línea. Cuando se prueba, es muy difícil desprenderse de él.

BracketHightlighter, nos resaltará de una manera más visual la apertura y cierre de paréntesis, corchetes, llaves, etc. facilitándonos nuestra labor a la hora de visualizar bloques de código.

En una línea similar encontramos a ColorHighlighter, que nos colorea el código del color directamente en el texto, ya sea en formato RGB, hexadecimal o color HTML.

Mención más que especial para los plugins que nos traen directamente la API con la que trabajamos. Es el caso de WordPress, que nos trae las funciones del Codex al editor, con un asistente de autocompletado y con los argumentos que recibe cada función. Un package imprescindible si trabajamos con este CMS.

De igual manera tenemos paquetes que nos ayudarán con la sintaxis de cualquier lenguaje de programación que se nos ocurra o incluso librerías como por ejemplo jQuery, preprocesadores de CSS como SASS, LESS, Stylus…

Llegamos a un punto importante. Existen packages que depuran el código a tiempo real y nos indican los errores de sintaxis o avisos si estamos realizando una mala práctica. El paquete en cuestión se llama SublimeLinter y se compone de varios subpaquetes (para CSS, JavaScript, PHP…). Como en este artículo nos centraremos en el frontend, vamos a mencionar a SublimeLinter-csslint y SublimeLinter-jshint. Ambos paquetes requieren que instalemos node.js en nuestra máquina y el gestor NPM. Con este último instalamos los módulos y finalmente nos quedaría instalar el paquete dentro del propio Sublime Text. Recomendamos que sigáis el enlace a estas herramientas y podréis ver estas instrucciones más detalladamente. Son unos pocos pasos y merece mucho la pena.

VIDA EXTRA:
Como vemos, lo que hace tan genial a esta herramienta es la alta personalización que aporta la comunidad de desarrolladores. Y todos podemos beneficiarnos de ello cambiando la apariencia del programa. No me refiero a opciones de configuración, cuyo archivo permite tantas posibilidades que daría para hablar en otra ocasión. Hablamos esta vez de temas como Brogrammer, Seti UI, etc. Puede parecer algo sin mucha importancia más allá de lo estético, pero yo soy de la opinión de que el fondo del editor debe ser oscuro y también mejoran enormemente botones, iconos y demás elementos haciéndolos muy reconocibles. A lo largo del día se agradece y mucho.

Evidentemente nos dejamos muchas utilidades más en el tintero, pero no acabaríamos nunca. ¿Cuáles son tus favoritas?

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Aún no hay comentarios en esta entrada. ¿Te animas?