10 increíbles extensiones de brackets que realmente necesitas

Brackets.io lanzó la versión 1.2 recientemente, con algunas características nuevas y geniales sobre las que puede leer en su blog. Hemos compilado una lista de 10 de las mejores y más útiles extensiones de Brackets que existen (sin ningún orden en particular), junto con instrucciones completas para cada extensión.

Extensiones de soportes

1. Plegado de código

A diferencia de muchos otros IDE y editores de código, Brackets no tiene una opción de plegado de código disponible de forma predeterminada. Con Code Folding, puede colapsar fácilmente grandes porciones de su código en una sola línea. La extensión Code Folding está disponible en Github y desde el administrador de extensiones de Brackets.

Cómo utilizar

Para plegar cualquier etiqueta anidada, simplemente haga clic en la flecha hacia abajo a la izquierda de la etiqueta principal, como se muestra arriba. Mismo principio para Javascript o cualquier otro formato. Simplemente haga clic en la flecha hacia abajo a la izquierda del elemento principal para plegar todas las declaraciones anidadas en una sola línea. Para expandir, simplemente haga clic en el signo más.

Los números de línea de las líneas plegadas están ocultos, por lo que es fácil detectar las líneas plegadas cuando se concentra en el código.

2. Lorem Pixel

Hay muchas formas de generar texto de marcador de posición, pero los desarrolladores web front-end a menudo necesitan imágenes de marcador de posición. En lugar de intentar crear una imagen de marcador de posición en blanco, use la extensión Lorem Pixel. Te permite insertar magníficas imágenes de marcador de posición de cualquier tamaño que desees. Lo bueno de Lorem Pixel es que te permite elegir la categoría de la que quieres una imagen.

Si eso no es lo suficientemente bueno, las imágenes de marcador de posición siguen cambiando cada vez que recargas la página. Las imágenes a menudo pueden alterar los esquemas de color, por lo que Lorem Pixel también le brinda una opción de ‘escala de grises’ para usar solo imágenes de marcador de posición en blanco y negro. Esta extensión funciona con lorempixel.com y está disponible en el administrador de extensiones de Brackets. Usando Lorem Pixel

Cómo utilizar

Una vez que instala la extensión Lorem Pixel, el logotipo de Lorem Pixel, un cuadrado marcado, aparece en el panel de la extensión (el panel de la derecha con el botón Vista previa en vivo). Haga clic en el logotipo para abrir un cuadro de configuración. Establezca el tamaño de imagen requerido y la categoría de imagen preferida. Si desea imágenes en escala de grises, marque la opción de escala de grises. Copie el enlace al portapapeles y utilícelo según sea necesario o insértelo en la posición actual del cursor.

3. Autoprefijador

Agregar prefijos de proveedores a su código es una tarea pesada. La extensión Autoprefixer puede ahorrarle mucho tiempo (¡y mucho trabajo!) porque agrega automáticamente los prefijos de proveedores necesarios a su código. No necesita ninguna configuración y actualiza sus prefijos cada vez que guarda su código. También puede seleccionar el código y prefijarlo automáticamente si lo desea.

Cómo utilizar

Para usar Autoprefixer, simplemente comience a escribir código sin prefijos. La extensión agregará automáticamente un código prefijado tan pronto como guarde. Para prefijar automáticamente algún código seleccionado, primero seleccione el código y luego la pestaña Editar ⇒ Selección automática de prefijo.

Autoprefixer también le permite agregar prefijos personalizados en su configuración. Para ir a la configuración de la extensión: Editar ⇒ Configuración del autoprefijo.

Para tener un hermoso código prefijado en cascada, habilite la opción Cascada visual en la configuración de la extensión.

4. Vista previa de rebajas

Markdown es un encantador lenguaje de marcado de texto sin formato que se puede convertir fácilmente a HTML. Markdown Preview ofrece el Markdown renderizado justo debajo de la versión de texto. Te permite elegir entre dos estilos diferentes, Github Flavored Markdown y Standard Markdown.

Hay tres temas que puede elegir para la ventana de vista previa: claro, oscuro y clásico. Markdown Preview también tiene una opción de sincronización de desplazamiento (habilitada de forma predeterminada). La extensión se puede descargar desde Github o desde el administrador de extensiones de Brackets.

Cómo utilizar

Abra un archivo .md o .markdown. Si ha instalado Markdown Preview, el botón M ↓ debería aparecer a la derecha. Haga clic en él y verá Markdown renderizado. Para cambiar el tema o deshabilitar la sincronización de desplazamiento, simplemente haga clic en el ícono de ajustes en la esquina superior derecha de la sección Vista previa de Markdown.

5. Iconos de corchetes

Siempre es divertido darle vida a su editor de código con iconos de archivos. Brackets Icons agrega íconos coloridos, según el tipo de archivo, a todos los archivos enumerados en la barra lateral. Tiene íconos para la mayoría de los tipos de archivos y puede publicar solicitudes de íconos en la página de Github.

Consejo adicional:

Brackets Icons utiliza iconos del proyecto Ionicons. También puede consultar la extensión File Icons (una bifurcación del proyecto Brackets Icons) que utiliza iconos del proyecto Font Awesome. Se reduce a la preferencia personal al final.

Cómo utilizar

Simplemente instale la extensión y recargue los soportes (F5).

6. Barra de herramientas de documentos

Los soportes carecen de pestañas. Hecho simple y llanamente. La extensión de la barra de herramientas Documentos agrega esta funcionalidad. Todos los archivos que están en la sección ‘activa’ de la barra lateral se muestran como pestañas en esta extensión. También puede ocultar la barra lateral y usar solo la barra de herramientas de Documentos para una interfaz agradable.

Cómo utilizar

Instale los soportes de extensión y recarga (F5).

7. Git de corchetes

Todo intenta integrarse con Git en estos días; es, con mucho, el sistema de control de versiones (VCS) más popular. Brackets Git es fácilmente el mejor entre las Extensiones de Brackets similares. Tiene todas las características de git que necesitarás. Puede confirmar cambios fácilmente desde dentro de los corchetes, empujar y extraer cambios con un solo clic, ver el historial del archivo y también el historial total de confirmación. Si eres bueno con Git, no encontrarás ningún problema con esta extensión.

Nota: Para usar Brackets Git, debe tener Git instalado en su computadora. Después de instalar la extensión, es posible que deba ingresar la ruta a su archivo ejecutable de Git (si no está en la ruta predeterminada).

Cómo utilizar

Enviar un archivo usando Brackets Git

Usar Brackets Git es bastante sencillo. Haga que su carpeta de repositorio Github local sea la carpeta del proyecto en Brackets. Luego abra un archivo, realice algunos cambios y guárdelo. Luego puede seguir adelante y hacer clic en el ícono Git a la derecha y esto abrirá el panel Brackets Git en la parte inferior. Enumerará cualquier modificación que haya realizado en sus archivos.

Marque los archivos que desea confirmar y luego haga clic en el botón Confirmar. Esto abrirá una ventana emergente que enumera los cambios realizados. Ingrese su mensaje de confirmación y haga clic en Aceptar. ¡Y ha enviado con éxito un archivo a Git directamente desde Brackets!

Después de confirmar, simplemente haga clic en el botón pulsador (también muestra la cantidad de confirmaciones no sincronizadas, como puede ver en el GIF anterior).

Configuración de ajustes

Abra el panel Brackets Git y haga clic en el botón Configuración (segundo desde la derecha). Siéntete libre de configurar Brackets Git como quieras.

Para ver el historial de archivos y confirmaciones

Simplemente haga clic en los botones respectivos para ver su Historial de archivos e Historial de confirmaciones bellamente enumerados. ¿Mencionamos que puedes cambiar el avatar a un avatar en blanco y negro, un avatar de color o tu Gravatar? Historial de confirmaciones

8. Pelusa TODAS las cosas

Pelusa TODAS las cosas. Todo. Esta extensión borra todos sus archivos de una sola vez. Muy útil cuando tiene un proyecto grande con muchos archivos conectados. Todos los errores de pelusa se muestran muy bien en un panel.

Cómo utilizar

Para usar Lint ALL Things, simplemente vaya a la pestaña Ver y haga clic en Lint todo el proyecto.

9. Soportes Todo

Brackets Todo es una pequeña extensión ordenada que muestra todos los comentarios TODO en un formato de lista ordenada. De forma predeterminada, admite 5 etiquetas: TODO, NOTE, FIXME, CHANGES y FUTURE. También puede marcar los comentarios como Listos. En las opciones de vista puedes filtrar los comentarios por etiquetas. Brackets Todo te permite definir colores personalizados para las etiquetas, así como también tus propias etiquetas, en caso de que alguna vez quieras ser creativo con tus comentarios.

Si está trabajando en un proyecto grande y necesita realizar un seguimiento de los comentarios de varios archivos, puede cambiar el alcance de la búsqueda de Brackets Todo. ¿Quiere excluir algunos archivos y carpetas como las carpetas de proveedores? No hay problema. Simplemente agregue la ruta en la lista de exclusión. Puede personalizar la configuración de cada proyecto agregando un archivo .todo en el directorio raíz del proyecto.

Puede revisar todas las opciones de configuración en la documentación de github.

Cómo utilizar

Para usar Brackets Todo, simplemente agregue un comentario a su código con una etiqueta dentro. El nombre de la etiqueta debe estar en mayúsculas, seguido de dos puntos (:). Para ver todos los Todo, simplemente haga clic en el icono de Todo en el panel de extensión de la derecha.

Configurando:

• Para permitir Todo para los comentarios HTML: simplemente abra la configuración: haga clic en el ícono de Todo → Configuración (ícono de engranaje) y haga clic para abrir el archivo .todo. A este archivo, agregue este código:

   { " Regex " : { " prefijo " : " (?:) " } }

  Cómo se ve el menú de configuración de Todo

• Para cambiar el alcance de la búsqueda: Agregue este código al archivo .todo:

   { "buscar": {"alcance": "mi proyecto"}}

• Para excluir cualquier archivo/carpeta/extensión de archivo del ámbito de búsqueda: Agregue este código al archivo .todo:

   { "buscar": {"alcance": "mi proyecto",

  “excluirCarpetas”: [“sucarpeta”]

   "excludeFiles" : [ "suarchivo " ] "excludeFiles": [ ".suextensión"] } }

10. Embellecer

Embellecer hace que su código se vea bien. Corrige espacios, sangría y líneas.

Cómo utilizar

Es muy fácil de usar Beautify. Todo lo que tienes que hacer es seleccionar algún código > Clic derecho > Embellecer.

Alternativamente, puede dirigirse a la pestaña Editar y hacer clic en ‘ Embellecer ‘.

VEA TAMBIÉN: Los 20 mejores consejos de Emmet para ayudarlo a codificar HTML/CSS increíblemente rápido