Share on FacebookTweet about this on TwitterShare on Google+

Por qué Brackets

Brackets es un editor de código muy actual que se utiliza para desarrollo web.
Es un proyecto open source, está desarrollado mediante JavaScript y es multiplataforma.

Características principales

Si bien no tiene todas las posibilidades de configuración de Sublime Text, tiene muchas características que lo hacen extremadamente potente:

  • Permite realizar desarrollo en vivo. Las modificaciones que haces en el código html y css se ven de forma automática en el navegador, sin necesidad de recargar la página. Tan solo hace falta pulsar el icono con forma de rayo que aparece en la barra derecha.
  • Tiene una estupenda documentación de css. Si abres el fichero main.css que aparece nada más instalarlo y seleccionas cualquier propiedad css y pulsas CTRL+K te muestra documentación de WebPlatform.org
  • Permite la instalación de extensiones para configurarlo a tu medida, al estilo de otros conocidos editores como Atom o Sublime Text. Al estar desarrollado internamente en html+css+javascript se garantizan una gran comunidad de desarrolladores por detrás que puedan extender elproyecto.
  • Permite hacer una edición inline de varios documentos: Desde el código html podemos por ejemplo ver las líneas css a que hace referencia una etiqueta cualquiera y modificarlas sin salir del propio documento html. Haz clic en la etiqueta body del index.html que parece por defecto nada más instalarlo y presiona las teclas CTRL+E. ¡La magia aparece!

Te recomiendo que leas la ayuda que aparece cargada nada más instalarlo en el fichero index.html, es suficientemente explicativa.
Si bien es un editor facil de utilizar, puedes ver este video donde se explican un poco sus características principales:

Instalación

Si bien podemos bajar el software de la web y el mismo comprueba cuando lo ejecutamos si hay actualizaciones (se actualiza frecuentemente), haremos la instalación desde el repositorio:

El comando anterior nos añadirá el repositorio en nuestra lista de repositorios /etc/apt/sources.list y además nos instalará la clave pública del mismo, por temas de seguridad.
Posteriormente deberemos hacer una actualización de nuestra lista de respositorios y buscar el paquete en cuestión que que debemos instalar.

Extensiones

Linters

Unas de las extensiones más habituales son los linters (analizadores de código). Brackets viene ya integrado con soporte de JSLint, pero además se puede instalar JSHint o validadores de CSS o HTML como CSSLint y W3CValidation.

Formateadores de código

Si bien JSLint es bastante “exigente” con la forma de escribir nuestro código, siempre podemos utilizar una extensión que formatee el código como Beautify que además arreglará algunos de los detalles de los que se queja o instalar JSHint.
Por ejemplo el código siguiente, genera errores mediante JSLint (no mediante JSHint):

Y Beautify le añade espacios quedando como sigue (a gusto de JSLint):

Podemos configurar Beautify para que se ejecute cada vez que se guarde el fichero o bajo demanda (CTRL + ALT + L).

Emmet

Con sintaxis css, nos ayudará a escribir el código más rápido. Te recomiendo que te “aprendas” este tutorial. Es una herramienta de productividad a la que le sacarás rendimiento enseguida. Observa que crea un nuevo menú dentro de Brackets.
También podemos instalar extensiones de tipo templates de html o snippets, pero quizá con Emmet nuestras necesidades estén cubiertas.

Extension rating

extension-ratingNos ayuda a ver cuales son las extensiones más populares, con más forks en GitHub, etc.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *