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.

Es por esto que hemos preparado un conjunto de plugins o extensiones para brackets para que tu vida como diseñador web sea mas fácil.

El IDE Brackets, editor de código

Brackets es el editor de código (IDE) desarrollado por Adobe Systems Bajo la licencia MIT enfocado al desarrollo web.

Es de código abierto, open source, mantenido por adobe en Github y otros desarrolladores open source.

Tiene un montón de funcionalidades, a demás de la integración con Git y Google Chrome que te permite ver una vista previa de tu código instantáneamente, sus plugins ayudan a escribir mas rápido, detectar errores y más.

Es por esto que he recopilado las 10 mejores extensiones de Brackets que más me han ayudado a la hora de programar.

Si tienes dudas de como puedes instalar estas maravillosas extensiones puedes pasarte por la documentación oficial en GitHub

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 con este plugin 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 para brackets 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 para desarrollo web, no trae por defecto ese peculiar organizador desplegable para apartar el código que ya no nos hace falta ver.

Entonces si lo que buscamos es como ordenar codigo en brackets, Code Folding sera un gran aliado, además de que es bastante práctico y liviano.

Brackets Icons

 

brackets icons

Esta extensión es más 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.

Con bracket icons tendrás iconos para casi todos los tipos de archivos que tengas en la interfaz de tu editor.

Documents Toolbar

Brackets Documents Toolbar

Si no te gusta trabajar con la barra lateral, entonces esta extensión para brackets la deberias incluir en tus labores de desarrollador web.

Documents Toolbar te permite tener los archivos que quieras en una barra por encima del editor, puedes desplazarte por ellas con atajos como lo es Shift + Tab agregando así una mejor fluidez a la hora de moverte por tus archivos.

 

HTML Wrapper

Brackets HTML Wrapper

Esta extensión en combinación con las anteriores que te mencioné, nos permitirán escribir en bracket nuestro codigo HTML a la velocidad del rayo. ¿Fantastico verdad?

Emmet

Brackets Emmet

Emmet es ese plugin que nos agrega varios shortcuts o atajos en brackets 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 este plugin tiene 5 tags para que marques todo lo que te queda por hacer. Estos son TODO, NOTE, FIXME, CHANGES y FUTURE, etiquetas que serán nuestros atajos si se nos olvida alguna cosilla.

Beautify 

 

beautify brackets

Hay veces que escribimos algo y al volverlo a abrir ni nosotros lo entendemos, o también 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 más aun cuando trabajas en equipo.

Con Brackets Beautify puedes indentar tu códico al alcence de dos clicks. Sí, como lo escuchastes, ¿Genial no es cierto?.

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, la extensión Lorem Ipsum nos aligera las labores rellenando 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 más 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 para brackets por nombrar, estas son las que me han sido más útiles a la hora de echar código.

¡Así lo es, no dudes e instalalas ahora! sé que te ayudarán mucho.

Fuentes:

10 Awesome Brackets Extensions You Really Need

25 of the Useful and Best Brackets Extensions

15 Best Brackets Extensions For A Smooth Coding Experience

 

¡Si te ha gustado el contenido de este post no dudes en darle click en la red social de tu preferencia justo aquí abajo y lo compartas. Sería un gran aporte para nosotros, Gracias¡

 

 

5 (100%) 4 votes
2 comments
Deja un comentario

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

nikola tesla dinar serbio

Suscríbete a nuestro boletín

Mantente informado de las mejores noticias

You May Also Like

Supercomputadoras para trabajos de investigación

Las supercomputadoras son un instrumento necesario para la investigación y la ciencia

Unreal Engine 4 vs Unity 3D

Actualmente puedes encontrar varios motores gráficos en el mercado, algunos mejores que…