Adobe Brackets es un entorno de desarrollo integrado simple, simple y potente para HTML, CSS y JavaScript. Admite agregar complementos para proporcionar extensiones funcionales adicionales. Los complementos disponibles actualmente, como agregar detección de errores, prefijo CSS específico del navegador, anotaciones JSDOC, etc. El siguiente editor presenta brevemente el uso y la configuración de los soportes:
1. Configuración del proyecto
1. Abra corchetes, toda la interfaz es muy simple, y la barra de menú superior solo proporciona la función de editor de archivo> de salida. A la izquierda está el árbol de archivos de la estructura de la organización del proyecto. Use CTRL/CMD+Shift+H para llamar y cerrar el árbol de archivos. El lado derecho es el área de edición, la parte superior es la barra de herramientas, la parte media es el área del documento y la parte inferior es el área rápida.
2. Abra el proyecto. Use el comando Archivo> Abrir carpeta para abrir la carpeta del proyecto. El nombre del proyecto del árbol de archivos a la izquierda se actualiza al nombre de la carpeta del proyecto, y el árbol de archivos se actualiza al árbol de archivos del proyecto actual.
Haga clic en el botón izquierdo en el nombre del proyecto para aparecer en el menú de edición del proyecto. El menú de edición mostrará el proyecto histórico y el comando de edición del proyecto.
Comando de carpeta Abra: Abra un nuevo proyecto.
Comando de configuración del proyecto: Establece la dirección web del proyecto actual, que se utilizará durante la depuración y vista previa de la página.
Requisitos de configuración: debe ser una dirección web que comience con http: //.
Como se muestra en la figura anterior, cuando se establece en http://127.0.0.1/demo/slide, la página correspondiente se abrirá a través de la dirección web cuando se presente el navegador.
Si no se establece, la página se abrirá a través de la dirección de la letra de la unidad del archivo.
2. Edición de archivos
Haga clic en index.html en el árbol de archivos y abra el documento index.html en el área principal.
1. Brackest verificará si el documento cumple con la especificación HTML. Como se muestra en la figura a continuación, hay un bloque de estilo en 20 líneas que debe colocarse en el nodo de la cabeza.
2. Coloque el cursor en el nombre de la etiqueta de una clase o atributo de ID, presione CTRL/CMD + E (editar) o salir de edición. Los soportes buscarán todos los archivos CSS en el proyecto y luego abrirán un editor integrado para incrustarlo en el archivo HTML, lo que le permite modificar rápidamente el código CSS.
Cuando la etiqueta de clase/ID actual tiene definiciones de estilo múltiple, la ventana de edición proporciona un botón de palanca para cambiar el estilo de visualización, o puede usar las teclas de flecha Alt + Up/Down para cambiar.
Cabe señalar que los soportes detectarán el documento HTML actual y todos los archivos CSS en el proyecto para encontrar estilos de clase/ID, incluso si algunos archivos CSS no se hacen referencia en el documento HTML actual.
3. Los soportes también admiten una vista previa/edición rápida de las definiciones de objetos JS. Coloque el cursor en un nombre de función JS, presione CTRL/CMD + E (editar) o salir de edición.
4. Brackets tiene un recolector de color incorporado, que proporciona formas de codificación de color de RGBA, Hex y HSLA. Coloque el cursor en un código de color, presione CTRL/CMD + E (editar). Debe usar la tecla ESC para salir de la ventana del colector de colores.
3. Vista previa instantánea
Brackets proporciona una vista previa instantánea de las páginas web. Al usar esta función, los soportes llaman al navegador Chrome para abrir la página actual. Después de modificar HTML, CSS, JavaScript y guardar, el contenido modificado responderá a la página en el navegador inmediatamente sin actualizar manualmente la página. Este es uno de los aspectos más destacados de los Brackets. Bendecido con dos codificadores de monitor, puede mostrar soportes y Chrome en la pantalla dividida, modificación instantánea de vistas previas instantáneas sin conmutación de editor/navegador y páginas refrescantes.
Algunas limitaciones de la función actual de vista previa en vivo:
Solo funciona con Chrome Browser como el navegador de destino, debe instalar Chrome.
Se basa en la depuración remota en Chrome, que está habilitada por un indicador de línea de comando. En una Mac, si ya está usando Chrome, lance la vista previa instantánea, los soportes le preguntarán si desea reiniciar Chrome para habilitar la depuración remota.
Solo se puede obtener una vista previa de un archivo HTML al mismo tiempo: si cambia otro archivo HTML, los soportes cerrarán la vista previa original.
4. Algunas teclas de acceso directo
Ctrl/Cmd+Shift+H puede llamar y cerrar el árbol de archivos
CTRL/CMD + E Vista previa rápida/edición de estilo CSS/JavaScript Función
CTRL/CMD + +/- Aver y salir del tamaño de fuente del área de edición
CTRL/CMD + 0 Restablecer el tamaño de fuente del área de edición
CTRL/CMD + ALT + P Encienda la función de vista previa instantánea
Ctrl / CMD + / Comentarios de línea
Ctrl / CMD + Alt + / Block Comentarios
Nota: Al comentar sobre el código CSS y el código HTML, solo puede usar las teclas de acceso directo de comentarios de bloque.