Extensiones de brackets para facilitar el desarrollo web

Últimamente me ha dado por aprender desarrollo web, y no es un secreto para nadie que brackets es el mejor IDE para el desarrollo de páginas web.

A demás de la integración con Git y Google Chrome que te permite ver una vista previa de tu código instantaneamente, sus plugins ayudan a escribir mas rápido, detectar errores y mas.

Es por esto que he recopilado las 10 extensiones de Brackets que mas me han ayudado a la hora de programar.


10 extensiones plugins de brackets



Lorem Pixel

Lorem Pixel brackets


Cuando estoy programando cierta parte de una web, se necesita bastante información para rellenar y ver que tal está quedando la web o como responde el diseño a las imágenes.

Es lo que hace a Lorem Pixel una excelente extensión, al instalarlo se te anexa un icono a la barra lateral izquierda y cuando quieras anexar una imagen sólo debes pulsarlo.

Lo mejor de todo es que las imágenes se cargan aleatoriamente, lo que quiere decir que cada vez que recargas la página verás una imagen diferente. ¿Genial no?

Otra particularidad que lo hace un excelente plugin es que te deja elegir el color y el tamaño de la imagen, bueno para probar ese diseño responsive que tanto dolor de cabeza da.

Code Folding

code folding brackets


A pesar de que Brackets es un excelente editor de código, no trae por defecto ese peculiar organizador desplegable para apartar el código que ya no nos hace falta ver.

Code Folding es bastante práctico y liviano.

Brackets Icons


brackets icons


Esta extensión es mas que todo para fines estéticos, nunca está demás agregarle un poco al editor para volverlo mas comodo a la vista y agrega un extra de motivación.

Su finalidad es agregarle iconos a los archivos que tengas en tu carpeta, para identificarlos y encontrarlos mas rápido. Tiene iconos para casi todos los tipos de archivos.

Documents Toolbar

Brackets Documents Toolbar

Si no te gusta trabajar con la barra lateral, entonces esta extensión es para ti.

Documents Toolbar te permite tener los archivos que quieras en una barra por encima del editor, puedes desplazarte por ellas con Shift + Tab con lo que agrega una mejor fluidez a la hora que moverse por tus archivos.


HTML Wrapper

Brackets HTML Wrapper


Esta extensión en combinación con las anteriores que te mencioné no permitirán escribir a la velocidad del rayo.

Tan solo basta con escribir una lista y el HTML Wrapper hará el resto. Es util para ordenar cualquier elemento de una lista




  • , tablas y links .


  • Emmet

    Brackets Emmet


    Emmet es ese plugin que nos agrega varios shortcuts para que nos acelere la escritura html y css.

    Simple Todo


    simple brackets to-do


    ¿Eres de los que olvida todo al dejar el codigo a medias?

    Brackets todo es una extensión que nos permite agregar ciertos tags para no olvidarnos de lo que hay que hacer, lo que debes pulir, borrar, debuggear etc.

    Actualmente tiene 5 tags para mara que marques todo lo que te queda por hacer. Estos son TODO, NOTE, FIXME, CHANGES y FUTURE.

    Beautify


    beautify brackets


    Hay veces que escribimos algo y al volverlo a abrir ni nosotros lo entendemos, o tambien hemos insultado a la madre de otro programador por lo mismo. Hacer nuestro código entendible es lo mejor que puedes hacer para mantener el orden, y mas aun cuando trabajas en equipo.

    Con Beautify puedes indentar tu códico al alcence de dos clicks.

    Lorem Ipsum Generator

    Lorem Ipsum Generator brackets


    Como dije anteriormente, para el desarrollo web se necesita mucho contenido para rellenar los espacios en blanco.

    Así como Lorem Pixel, Lorem Ipsum nos rellena ese espacio que necesitamos para ver la estética de nuestro diseño sin matarnos haciendo un artículo innecesario.

    Git

    Brackets Git


    Todo trata de integrarse con Git en estos días; esto es por mucho el mejor y mas popular Sistema de control de Versión (VCS). Brackets Git tiene todo lo que te hace falta.

    Se puede fácilmente hacer un commit a git dentro del mismo brackets, pushear y pullear los cambios, ver el historial de archivos y el historia de commit.

    Si has trabajado con Git anteriormente, entonces este es la extensión para ti.

    Nota: esta extensión no instalará Git en tu pc y si la quieres instalar deberías tener de antemano Git en tu computador.

    Aunque aún faltan extensiones por nombrar, estas son las que me han sido mas útiles a la hora de echar código.

    ¡Deja en los comentarios las extensiones que crees que deberían estar en la lista!



    Compartir en facebook twitter Google tumblr pinterest

    Entradas similares

    2 Comentarios

    1. Impecable post, los Gifs explicativos son un poema...se agradece.

      ResponderEliminar
    2. Excelente aporte, gracias!

      ResponderEliminar