Cualquiera que trabaje con WordPress o sitios web en general tarde o temprano necesita un editor de código. Ya sea para piratear CSS rápido y sucio, modificar o crear plantillas de página o configurar un tema secundario (por ejemplo, para un tema Divi ), hay muchas oportunidades en las que los editores de texto normales simplemente no son suficientes.
En nuestra búsqueda continua para encontrar los mejores editores de código , ya hemos examinado profundamente Atom y Sublime Text . Ambas son excelentes opciones. A partir de aquí, pasamos a otra opción popular: Brackets de Adobe.
En el siguiente artículo, aprenderá todo lo que hay que saber sobre este editor de código. Desde la configuración y las primeras impresiones hasta sus mejores características, así como las áreas en las que se queda corta. Vamos a romper, ¿de acuerdo?
Brackets se puede descargar gratis desde el sitio web oficial y la instalación solo toma un minuto para completarse. Después de eso, Brackets ocupa alrededor de 120 MB en su disco duro. Eso es aproximadamente la mitad de lo que necesita Atom, pero varias veces el tamaño de Sublime Text . Lo mismo ocurre con el tiempo de inicio, que se encuentra en algún lugar entre los dos competidores.
Hay un indicio de que Brackets enviará periódicamente informes de salud anónimos a Adobe para que los mejore. Si necesita más información, haga clic en el enlace y lo llevará a una página con más detalles (incluido cómo desactivar los informes).
La introducción, que está escrita como un archivo HTML, contiene una cálida bienvenida, detalles sobre el editor, funciones destacadas y primeros pasos. Si tiene Chrome instalado, puede hacer clic en el símbolo del rayo en la esquina superior derecha para abrirlo automáticamente en el navegador de Google.
Esto hace que sea mucho más fácil de leer (como se puede ver a continuación). Más sobre esta función más adelante.
Si desea iniciar su propio proyecto, puede seguir el camino habitual a través de Archivo > Abrir carpeta o utilizar el menú desplegable de la izquierda donde dice Primeros pasos. También puede usar este botón para cambiar entre proyectos activos.
Aparte de eso, todo es bastante estándar. Los archivos y directorios se muestran a la izquierda y los archivos se abren en el lado derecho cuando se hace clic. Un doble clic o edición los mueve hacia arriba a la sección Archivos de trabajo.
¿Hasta ahora tan claro? Ok, entonces echemos un vistazo bajo el capó de Brackets para ver lo que el editor de código tiene para ofrecer en cuanto a funciones.
Soportes de Adobe: los profesionales
En esta sección, echaremos un vistazo a las características que hacen que Brackets se destaque entre la multitud y lo conviertan en una gran herramienta con la que trabajar.
Código abierto y multiplataforma
Brackets está disponible para Mac, Windows y Linux y es un proyecto iniciado y mantenido por Adobe. Sin embargo, no es un producto comercial, sino una pieza de software de código abierto con licencia MIT .
El editor es relativamente joven (la versión 1.0 se publicó en 2014) y se mantiene en Github . Como un esfuerzo de código abierto , cualquiera puede contribuir tanto al núcleo como enviando sus propias extensiones. Consulte la Wiki si desea formar parte del proyecto.
Por supuesto, el mayor beneficio para los usuarios: Brackets es de uso completamente gratuito.
Características estándar sólidas
El editor de código viene con una serie de características estándar que esperaríamos de un software moderno.
En primer lugar, está la finalización del código. Mientras escribe, Brackets propondrá elementos de código que se ajusten a su entrada actual. Puede aceptar la propuesta con solo tocar un botón, que es un buen atajo para escribir todo por completo.
Sin embargo, desafortunadamente, como editor frontend, Brackets solo tiene soporte nativo para HTML, CSS y JavaScript (aunque se pueden agregar más a través de extensiones).
El resaltado de código, por otro lado, está disponible para muchos más lenguajes, incluidos Python, Perl, C, C++ y más. PHP también funciona, lo cual es una gran noticia para los usuarios de WordPress. El plegado del código completa el paquete para que su código sea más legible.
Otra característica común con la que viene Brackets es la capacidad de dividir su ventana principal en dos partes (tanto vertical como horizontalmente). De esa forma, los usuarios pueden ver y editar más de un archivo a la vez.
Por supuesto, buscar y reemplazar también está disponible. No debería faltar ningún editor de código.
Finalmente, los usuarios de preprocesadores estarán encantados de saber que Brackets es totalmente compatible con SASS, LESS, SCSS y más, incluida la finalización de código. De hecho, al guardar su archivo *.less , el editor lo guardará automáticamente en CSS. Buen material.
Edición rápida
La primera característica única de Brackets es la edición rápida. Cuando marca cualquier elemento HTML y presiona Cmd/Ctrl + E , Brackets abre todo el CSS asociado con este elemento en línea en la ventana actual.
Desde aquí, puede realizar las modificaciones que necesite. Una vez que lo cierre, cualquier cambio se aplicará automáticamente a la hoja de estilo conectada con este elemento. Listo, ¿eh?
Además de eso, esta función viene con un selector de color en caso de que no esté seguro de qué código hexadecimal representa qué color o si desea realizar cambios sobre la marcha. La misma función te mostrará los colores más utilizados en el archivo que estás editando.
La edición rápida también funciona con funciones de JavaScript. Además, Brackets tiene soporte JSLint que verificará su código JavaScript al guardar y mostrar problemas en la parte inferior de la pantalla. Además de eso, existen extensiones para mejorar aún más la funcionalidad de edición rápida. Más sobre eso pronto.
Vista previa en vivo
Ya vimos esta ingeniosa característica desde el principio. Con un clic en el botón de vista previa en vivo (el símbolo del rayo, ¿recuerdas?), Brackets abrirá el archivo actual automáticamente en Google Chrome.
Sin embargo, no solo eso. Cuando mueve el cursor dentro de un elemento HTML dentro del editor, también se resaltará en el navegador.
Eso no es todo. Cuando cambia algo en el código base, también se enviará automáticamente a la interfaz. No es necesario volver a cargar la página, Brackets lo hace todo solo.
Esta función es especialmente impresionante si trabaja con más de una pantalla. Actualmente solo funciona en Chrome y para HTML y CSS. Sin embargo, los creadores de Brackets prometieron extenderlo a JavaScript y a todos los principales navegadores en el futuro.
Altamente extensible
Dado que el editor de corchetes está construido con HTML, CSS y JavaScript, es completamente pirateable y fácil de ampliar. Muchos desarrolladores se han aprovechado de ese hecho y han creado extensiones que puede encontrar en el registro o mediante el administrador de extensiones directamente dentro del editor.
Este último se encuentra en la esquina superior derecha o en Archivo > Administrador de extensiones .
Una vez abierto, el administrador enumerará todas las extensiones de soporte disponibles. Utilice la función de búsqueda para encontrar lo que está buscando. Una vez que se carga la ventana, la búsqueda es muy rápida y las extensiones se descargan súper rápido después de hacer clic en el botón Instalar .
Además de eso, tiene la opción de instalar extensiones que descargó anteriormente arrastrándolas y soltándolas en el campo o proporcionando una URL desde la cual instalar.
En la barra superior también puede cambiar para instalar temas. Estos se cambian en Ver > Temas (Brackets solo viene con dos temas listos para usar, uno oscuro y otro claro) y modifican la visualización del código, así como la interfaz de usuario general.
En la pestaña Instalado , verá todas las extensiones y temas que instaló anteriormente, así como la opción para deshabilitarlos y eliminarlos. Para obtener una colección de extensiones útiles de Brackets, consulte este artículo .
Varios cursores
Finalmente, Brackets tomó una página del libro de jugadas de Sublime y agregó múltiples cursores como una característica. Eso significa que los usuarios pueden editar varios lugares en el mismo archivo a la vez.
Simplemente mantenga presionado el botón Ctrl para colocar cursores o marcar fragmentos de código en cualquier lugar que desee. Después de eso, comience a escribir para realizar ediciones en todas partes al mismo tiempo.
Combinado con la opción Buscar todo y seleccionar , esto es muy útil y ahorra mucho tiempo y esfuerzo.
Soportes de Adobe: los contras
Cosas geniales, ¿verdad? Sin embargo, también hay cosas que Brackets podría estar haciendo mejor.
Enfocado en la interfaz
A pesar de lo genial que es Brackets, es un poco limitado en su aplicación. El editor de código está claramente diseñado para trabajadores frontend que en su mayoría se ocupan de HTML, CSS y JavaScript.
Si bien lo hace extremadamente bien, si está trabajando con cualquier otra cosa, como lenguajes del lado del servidor, es posible que Brackets no sea la mejor opción para usted. Sin embargo, existen extensiones para abordar esta deficiencia, incluso para el código específico de WordPress .
La gestión de extensiones podría ser mejor
Brackets tiene mucho que ofrecer en términos de extensiones e instalarlos es rápido y fácil. Sin embargo, en general, toda esta área podría usar algo de trabajo.
En primer lugar, el registro oficial de extensiones es algo confuso. Todo está en una gran lista sin opciones de filtrado o categorías.
Al menos en el administrador de extensiones hay una división entre extensiones y temas. Sin embargo, en general todo se reduce a la función de búsqueda. Sin embargo, una vez que haya encontrado un candidato adecuado, aún debe hacer clic en Github para obtener información adicional.
Esto es claramente más complicado de lo que debe ser y Brackets haría bien en mirar a WordPress y Atom en busca de inspiración sobre cómo mejorar el proceso.
Resumiendo
Adobe Brackets es un candidato digno en nuestra búsqueda de los mejores editores. Es relativamente liviano, elegante, fácil de usar y tiene la mayoría de las funciones que los usuarios esperarían de un editor de código moderno.
Aparte de eso, el proyecto de código abierto de Adobe viene con algunas características sobresalientes que hasta ahora no se han visto en ningún otro lugar. La edición rápida y la vista previa en vivo son realmente útiles y facilitan mucho el trabajo de interfaz.
Además de eso, el administrador de extensiones y la amplia variedad de complementos permiten a los usuarios convertir Brackets exactamente en el entorno de desarrollo que necesitan.
Por supuesto, Brackets no está exento de defectos. Sin embargo, con su rápido desarrollo, hay muchas posibilidades de que se aborden en el futuro. Si es así, Brackets está preparado para tomar una posición de liderazgo en la industria de editores de código.
Ahora paso a ti. ¿Has usado Bracket antes? Si es así, ¿qué fue lo que más le gustó y dónde ve margen de mejora? Háganos saber en la sección de comentarios a continuación para que otros puedan beneficiarse de su experiencia.
Imagen destacada hecha a partir de gráficos a través de la página github de Adobe Brackets / Licencia MIT