Brackets.io lanzó la versión 1.2 recientemente, con algunas características nuevas que puedes leer en su blog. Hemos compilado una lista de 10 de las mejores y más útiles extensiones de Brackets (sin ningún orden en particular), junto con instrucciones completas para cada extensión.
Extensiones de soportes
1.Code Plegado
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 el plegado de código, puede contraer fácilmente grandes porciones de su código en una sola línea. La extensión de plegado de código está disponible en Github y desde el administrador de extensiones de corchetes.
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 padre para plegar todas las declaraciones anidadas en una 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 está concentrando 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 marcadores de posición de cualquier tamaño que desees. La parte interesante de Lorem Pixel es que le permite elegir la categoría desde la que desea una imagen.
Si eso no es lo suficientemente bueno, las imágenes del marcador de posición cambian 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 la opción de "escala de grises" para usar solo imágenes de marcador de posición en blanco y negro. Esta extensión está alimentada por lorempixel.com y está disponible en el administrador de extensiones de corchetes.
Cómo utilizar
Una vez que instale la extensión de Lorem Pixel, el logotipo de Lorem Pixel (un cuadrado marcado) aparecerá en el panel de extensión (el panel de la derecha con el botón Vista previa en vivo). Haga clic en el logotipo para que aparezca 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. Autoprefixer
Agregar prefijos de proveedores a su código es un trabajo pesado. La extensión Autoprefixer puede ahorrarle mucho tiempo (¡y mucho trabajo!) Porque agrega automáticamente los prefijos de proveedores requeridos 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 prefijo. La extensión agregará automáticamente el código prefijado tan pronto como lo guarde. Para prefijar automáticamente un código seleccionado, primero seleccione el código y luego la pestaña Editar ⇒ Selección de prefijo automático.
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 Autoprefixer.
Para tener un código prefijado, en cascada y hermoso, habilite la opción Cascada visual en la configuración de la extensión.
4. Vista previa de Markdown
Markdown es un lenguaje de marcado de texto sencillo que se puede convertir fácilmente a HTML. Markdown Preview proporciona 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 corchetes.
Cómo utilizar
Abra un archivo .md o .markdown . Si ha instalado Markdown Preview, el botón M ↓ debería aparecer a la derecha. Haz clic en él y verás un Markdown renderizado. Para cambiar el tema, o deshabilitar la sincronización de desplazamiento, simplemente haga clic en el icono de engranaje en la esquina superior derecha de la sección Vista previa de Markdown.
5. Iconos de corchetes
Siempre es divertido condimentar tu editor de código con íconos de archivo. Brackets Icons agrega iconos coloridos, basados en el tipo de archivo, a todos los archivos enumerados en la barra lateral. Tiene iconos para la mayoría de los tipos de archivos y puede publicar solicitudes de iconos en la página de Github.
Consejo de bonificación:
Brackets Icons utiliza iconos del proyecto Ionicons. También puede consultar la extensión Iconos de archivo (una bifurcación del proyecto de iconos de corchetes) que utiliza iconos del proyecto Font Awesome. Se reduce a las preferencias personales al final.
Cómo utilizar
Simplemente instale la extensión y vuelva a cargar los soportes (F5).
6. Barra de herramientas de documentos
Los soportes carecen de pestañas. Hecho simple y simple. La extensión de la barra de herramientas de documentos agrega esta funcionalidad. Todos los archivos que están en la sección 'activa' de la barra lateral aparecen 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 la extensión y vuelva a cargar los soportes (F5).
7. Soportes Git
Todo trata de integrarse con Git 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 realizar cambios fácilmente entre paréntesis, empujar y tirar cambios con un solo clic, ver el historial de archivos y el historial de compromisos total también. Si eres bueno con Git, no encontrarás ningún problema con esta extensión.
Nota: para usar Brackets Git necesitas tener Git instalado en tu computadora. Después de instalar la extensión, es posible que deba ingresar la ruta al archivo ejecutable de Git (si no está en la ruta predeterminada).
Cómo utilizar
Usar Brackets Git es bastante sencillo. Haga que su carpeta de repositorio Github local sea la carpeta del proyecto en corchetes. Luego abre un archivo, haz algunos cambios y guárdalo. Luego puede seguir adelante y hacer clic en el icono de Git a la derecha y esto abrirá el panel de Brackets Git en la parte inferior. Enumera cualquier modificación que haya hecho a sus archivos.
Marque los archivos que desee confirmar y luego haga clic en el botón Confirmar. Esto abrirá una ventana emergente con una lista de los cambios realizados. Ingrese su mensaje de confirmación y haga clic en Aceptar. ¡Y usted ha confirmado con éxito un archivo a Git directamente desde Brackets!
Después de confirmar, simplemente haga clic en el botón (también muestra el número de confirmaciones no sincronizadas, como puede ver en el GIF anterior).
Configurando las Configuraciones
Abra el panel Git de Brackets y haga clic en el botón Configuración (segundo desde la derecha). Siéntete libre de configurar Brackets Git de cualquier manera que te guste.
Para ver el archivo y cometer historial
Simplemente haga clic en los botones respectivos para ver su historial de archivos y el historial de confirmación que aparecen en la lista. ¿Mencionamos que puedes cambiar el avatar a un avatar en blanco y negro, un avatar de color o tu Gravatar?
8. Lint todas las cosas
Lint todas las cosas. Todo. Esta extensión deslumbra todos tus archivos de una sola vez. Muy útil cuando tienes un proyecto grande con muchos archivos conectados. Todos los errores de pelusa se muestran bien en un panel.
Cómo utilizar
Para usar Lint ALL Things, solo vaya a la pestaña Ver y haga clic en Lint whole Project .
9. Soportes Todo
Brackets Todo es una extensión pequeña y ordenada que muestra todos los comentarios TODO en un formato de lista ordenada. Por defecto, admite 5 etiquetas: TODO, NOTE, FIXME, CHANGES y FUTURE. También puedes marcar comentarios como Hecho. En las opciones de vista puedes filtrar los comentarios por etiquetas. Brackets Todo le permite definir colores personalizados para las etiquetas, así como sus propias etiquetas, en caso de que quiera ser creativo con sus 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. ¿Desea excluir algunos archivos y carpetas como carpetas de proveedores? Sin preocupaciones. Solo agrega la ruta en la lista de exclusión. Puede personalizar la configuración de cada proyecto agregando un archivo .todo en el directorio del proyecto raíz.
Puede ir a través de todas las opciones de configuración en la documentación de github.
Cómo utilizar
Para usar Brackets Todo, solo 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 todas las tareas, haga clic en el ícono Todo en el panel de extensión de la derecha.
Configurando:
- Para permitir comentarios de Todo para HTML: simplemente abra la configuración - Haga clic en el ícono Todo → Configuración (icono de engranaje) - y haga clic para abrir el archivo .todo. A este archivo, agregue este código:
{"regex": {"prefijo": "(? :)"}}
- Para cambiar el alcance de la búsqueda: agregue este código al archivo .todo:
{"search": {"scope": "my project"}} - Para excluir cualquier archivo / carpeta / extensión de archivo del ámbito de búsqueda: agregue este código al archivo .todo:
{"search": {"scope": "my project",“ExcludeFolders“: [“yourfolder“]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. embellecer
Beautify hace que tu código se vea bien. Arregla espacios, sangría y líneas.
Cómo utilizar
Es muy fácil de usar Beautify. Todo lo que tienes que hacer es seleccionar un código> Clic derecho > Beautify .
Alternativamente, puede dirigirse a la pestaña Editar y hacer clic en ' Beautify '.
