Para mejorar las funciones del editor Brackets podemos utilizar las extensiones.
Para ello abrimos el programa y hacemos clic en el "Gestor de extensiones" que está ubicado a la derecha del programa. El segundo ícono nos lleva a dicho gestor:
Es decir;
1.- Lorem Pixel
3.- Brackets Icons
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.
Esta extensión en combinación con las anteriores, nos permitirán escribir en bracket nuestro código HTML mucho más rápido.
Simple To-Do 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.
Haga clic en el icono de tareas simples ( ) para mostrar / ocultar el panel de tareas.
Una extensión de Brackets que le permite insertar fácilmente una variedad de elementos HTML en su documento.
Uso
Coloque el cursor en la ubicación donde desea insertar los elementos.
Abre el diálogo yendo a Edit > Insert HTML Elements
Seleccione los elementos deseados, y presione Listo
Rellene todos los atributos en blanco según sea necesario
Esta extensión utiliza Autoprefixer , una herramienta que analiza su CSS y agrega / elimina prefijos de proveedores según corresponda de acuerdo con los datos de Can I Use . Esto significa que puede escribir su CSS sin tener que preocuparse por los prefijos de los proveedores que debe incluir. Tan pronto como guarde su archivo, esto se hará por usted.
Uso
El autofrefijador se puede usar de una de dos maneras: en forma automática al guardar y en forma manual haciendo una selección.
El modo automático se usa al activar "Prefijo automático al guardar" en el menú Editar. Esto procesará el archivo completo cada vez que se guarde el documento y agregará y / o eliminará los prefijos del proveedor cuando sea apropiado.
Para tener más control sobre dónde se agregan y eliminan los prefijos, se puede seleccionar y procesar un fragmento de código haciendo clic en "Selección de prefijo automática" en el menú Editar. Solo se procesará la parte seleccionada del documento.
Es una extensión para habilitar el soporte de validación W3C. Para usar esta extensión, abra cualquier archivo HTML y luego verifique la esquina inferior derecha de los corchetes (donde se comprueban todos los archivos) y busque el ícono verde (todo está bien) o la señal de advertencia amarilla (problemas).
Agrega funciones de Cortar, Copiar y Pegar al menú del botón derecho en Brackets.io.
Para ello abrimos el programa y hacemos clic en el "Gestor de extensiones" que está ubicado a la derecha del programa. El segundo ícono nos lleva a dicho gestor:
Es decir;
Y ahí nos sale una ventana donde podemos buscar las siguientes extensiones e instalarlas:
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, al
instalarlo se te anexa un icono a la barra lateral izquierda y cuando quieras
anexar una imagen sólo debes pulsarlo.
Las imágenes se
cargan aleatoriamente, lo que quiere decir que cada vez que recargas la página
verás una imagen diferente.
Otra particularidad que lo hace un excelente plugin para
brackets es que te deja elegir el color y el tamaño de la imagen, esto es fantástico para
probar ese diseño responsive que tanto dolor de cabeza nos da.
En conclusión, solo coloque la url personalizada en su código para obtener su imagen falsa.
En conclusión, solo coloque la url personalizada en su código para obtener su imagen falsa.
2.- Code Folding
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.
Con bracket icons tendrás iconos para casi todos los tipos de archivos que tengas en la interfaz de tu editor.
4.- HTML Wrapper
5.- Simple To-Do
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.
Uso
Hay seis iconos en el encabezado del panel (de izquierda a derecha):
Actualizar la lista de tareas pendientes
Añadir nueva tarea sin categorizar
Añadir nueva categoria
Alternar tareas completadas y categorías de visibilidad
Abrir el cuadro de diálogo Configuración de tareas simples
Cerrar panel de tareas simple
Para editar cualquier tarea o categoría simplemente haga clic en su nombre. Mientras que la tarea / categoría está en modo de edición, hay tres botones en el lado derecho.
Actualizar la lista de tareas pendientes
Añadir nueva tarea sin categorizar
Añadir nueva categoria
Alternar tareas completadas y categorías de visibilidad
Abrir el cuadro de diálogo Configuración de tareas simples
Cerrar panel de tareas simple
Para editar cualquier tarea o categoría simplemente haga clic en su nombre. Mientras que la tarea / categoría está en modo de edición, hay tres botones en el lado derecho.
Estos botones son (de izquierda a derecha):
Aceptar cambios y guardar tarea / categoría.
Rechazar cambios. Si se agrega tarea / categoría, este botón significa "no agregar".
Asocie esta tarea con el archivo actualmente abierto en el editor de corchetes.
Eliminar tarea / categoría. Este botón solo está disponible cuando se edita una tarea / categoría existente.
Para agregar una tarea a cualquier categoría, haga clic en el icono 'más' cerca del nombre de la categoría.
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.
HTML Skeleton te ayuda a configurar tus páginas HTML de manera rápida insertando automáticamente elementos básicos como la declaración doctype, el tag html, el tag head, el tah body...
Aceptar cambios y guardar tarea / categoría.
Rechazar cambios. Si se agrega tarea / categoría, este botón significa "no agregar".
Asocie esta tarea con el archivo actualmente abierto en el editor de corchetes.
Eliminar tarea / categoría. Este botón solo está disponible cuando se edita una tarea / categoría existente.
Para agregar una tarea a cualquier categoría, haga clic en el icono 'más' cerca del nombre de la categoría.
6.- Beautify
Con Brackets Beautify puedes indentar tu códico al alcence de dos clicks.
Uso
Los corchetes Beautify se pueden ejecutar manualmente en todo el archivo o en una selección. Use el botón de la barra de herramientas con el icono de la varita, la entrada del menú Edit > Beautify, la entrada del menú contextual Beautifyo uno de los métodos abreviados del teclado Ctrl-Alt-B(Windows / Linux), Ctrl-Shift-L(Windows), Cmd-Shift-L(Mac), o defina el suyo propio.
Alternativamente, se puede habilitar para ejecutarse automáticamente al guardar. Utilice la entrada del menú Edit > Beautify on Saveo la configuración más avanzada para activar.
Alternativamente, se puede habilitar para ejecutarse automáticamente al guardar. Utilice la entrada del menú Edit > Beautify on Saveo la configuración más avanzada para activar.
7.- HTML Skeleton
HTML Skeleton te ayuda a configurar tus páginas HTML de manera rápida insertando automáticamente elementos básicos como la declaración doctype, el tag html, el tag head, el tah body...
Coloque el cursor en la ubicación donde desea insertar los elementos.
Abre el diálogo yendo a Edit > Insert HTML Elements
Seleccione los elementos deseados, y presione Listo
Rellene todos los atributos en blanco según sea necesario
8.- Autoprefixer
Uso
El autofrefijador se puede usar de una de dos maneras: en forma automática al guardar y en forma manual haciendo una selección.
El modo automático se usa al activar "Prefijo automático al guardar" en el menú Editar. Esto procesará el archivo completo cada vez que se guarde el documento y agregará y / o eliminará los prefijos del proveedor cuando sea apropiado.
Para tener más control sobre dónde se agregan y eliminan los prefijos, se puede seleccionar y procesar un fragmento de código haciendo clic en "Selección de prefijo automática" en el menú Editar. Solo se procesará la parte seleccionada del documento.
9.- W3C Validation
Al hacer clic en el icono se abrirá un panel con los problemas actuales.
10.- RightClickExtended
View My Stats