Brackets ha ido aumentando su popularidad como editor de código destinado al desarrollo front-end y diseño web.
Lo mejor de Brackets es que hay una amplia gama de extensiones de Brackets entre las que puede elegir.
¿Qué es Brackets?
Brackets es un editor de código fuente abierto desarrollado originalmente por Adobe. Puede que no tenga la misma publicidad que Atom, el nuevo editor ligero de GitHub, pero es una opción prometedora para los desarrolladores front-end.
Brackets apunta principalmente a desarrolladores front-end y diseñadores web. Es un editor de código y texto totalmente optimizado para HTML, CSS y JS. Brackets está disponible para Mac OS X, Windows y Linux.
Características principales
- Vista previa en vivo: inicia una nueva ventana del navegador que muestra la página actual que no solo no requiere una actualización manual cuando cambia un archivo, sino también a medida que escribe. Como tal, Brackets se siente como una extensión de las herramientas de desarrollador de su navegador. Esta característica es increíblemente útil, ya que puede combinar las ventajas de la codificación en el navegador con las de un editor.
- Edición rápida: cuando edita código HTML, si hace clic en una etiqueta con una declaración CSS correspondiente situada en un archivo vinculado y presiona Ctrl / Command + E, aparece un editor en línea que le permite editar rápidamente esa regla.
- JSLint: funciona con su código JavaScript al guardar, con sus resultados mostrados como un panel debajo de la ventana de edición principal.
- Brackets implementa la finalización de código especialmente para diseñadores web y desarrollo front-end.
- Las características adicionales, como la integración de la línea de comandos, la selección de código múltiple y la apertura rápida y la búsqueda rápida, se suman a los aspectos más destacados del editor de código Brackets.
Además de las características principales integradas en Brackets, también hay una comunidad grande y creciente de desarrolladores que crean extensiones que agregan todo tipo de funcionalidades útiles. Hay una serie de extensiones disponibles como Code Folding, Markdown Preview, Autoprefixer y otras.
También puede cambiar la combinación de colores del editor con la ayuda de dichas extensiones o crear sus propios temas para adaptarlos a sus preferencias. En esta publicación, hemos reunido para usted una colección de 25 extensiones increíbles y totalmente gratuitas para el editor de código Brackets. Todos los enlaces van a GitHub, por lo que puede obtener fácilmente la última versión estable de las extensiones, sin tener que preocuparse por código dañado o errores.
Plugins para Brackets
¡Sin más preámbulos, echemos un vistazo a las extensiones gratuitas para Brackets!
Embellecer
La extensión Beautify Brackets hace que su código se vea bien. No solo hace que sus archivos sean más legibles, sino que también le brinda una práctica tecla de acceso directo para embellecer esos archivos: CMD-Shift-L (Mac) y Ctrl-Shift-L (Win). El código JavaScript puede formatearse de manera consistente y hacerse más legible usando Beautify.
Autoprefixer
Autoprefixer es un postprocesador para tratar los prefijos de proveedores de la mejor manera posible. Este postprocesador analiza archivos CSS y agrega prefijos de proveedor a las reglas CSS. Todo lo que tiene que hacer es agregarlo a su herramienta de creación de activos. Autoprefixer también limpia prefijos obsoletos.
Emmet
Emmet ayuda a mejorar su flujo de trabajo HTML y CSS al permitirle escribir expresiones similares a CSS que se pueden analizar dinámicamente y produce una salida de acuerdo con lo que realmente escribió en la abreviatura.
Las abreviaturas de Emmet parecen selectores CSS, pero se analizan en tiempo de ejecución y se convierten en un bloque de código estructurado con solo presionar una tecla.
Una vez que aprenda las abreviaturas, es una forma útil de acelerar su flujo de trabajo.
Minificador
Minifier minimiza los archivos JavaScript y CSS entre paréntesis y los guarda como filename.min.ext
Para minimizar un archivo, use el método abreviado de teclado CMD + M o Ctrl + M. Comprime los archivos y ahorra su tiempo, ya que minimiza el JavaScript relevante automáticamente para que pueda continuar trabajando y tener el archivo minimizado y completamente listo para la implementación.
ToDo
ToDo es una extensión de corchetes que muestra todos los comentarios de tareas pendientes en el documento o proyecto actual. Por defecto, admite cinco etiquetas: TODO, NOTA, FIXME, CAMBIOS y FUTURO. Para realizar un seguimiento del progreso de su equipo, puede marcar las tareas como realizadas.
Las tareas se pueden ordenar de modo que las tareas realizadas se muevan al final de la lista marcando esa opción en el cuadro de diálogo de configuración. La extensión ToDo Brackets le permite definir colores personalizados para las etiquetas, así como también sus propias etiquetas, si desea ser creativo con sus comentarios.
Gits de soporte
Bracket Gits es una extensión para el editor de Brackets que proporciona integración de Git para Brackets. Está probado y funciona en cualquier plataforma compatible con Brackets (Windows, Mac OS X y GNU / Linux). Bracket Git es fácilmente el mejor entre las extensiones de Brackets similares, ya que le permite confirmar fácilmente los cambios de los mismos Brackets, así como los cambios de inserción y extracción con un solo clic.
Visitar Bracket Gits de soporte
Brackets File Icons
Brackets File Icons agrega iconos de archivo al árbol de archivos de corchetes. Es compatible con archivos como JavaScript, HTML, JSON, XML, CSS, PNG y JPG. Puede darle vida a su editor de código con íconos de archivo agregando colores a sus íconos basados en su tipo de archivo a todos los archivos listados en su barra lateral. También puede publicar solicitudes de iconos en la página de GitHub.
Swatcher
Swatcher genera sugerencias de código y paletas de colores mediante la importación a través de archivos LESS / SASS, imágenes o archivos Adobe Swatch. Es compatible con todas las funciones relacionadas con el color, como rgba ().
Swatcher también viene con un selector de color incorporado propio.
Lorem Pixel
Lorem Pixel es una extensión de corchetes que se puede usar para generar imágenes de marcador de posición. Es simple y gratuito. Le permite insertar hermosas imágenes de marcador de posición de cualquier tamaño. 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.
eqFTP
eqFTP es un cliente FTP / SFTP para el editor de código Brackets. Ofrece una interfaz intuitiva para trabajar con sus servidores remotos, sincronización, exploración remota de la estructura de archivos y cifrado de contraseña. eqFTP se puede usar para transferir y sincronizar los archivos de su proyecto hacia y desde su servidor web y servidor.
Code Folding
La extensión Code Folding Brackets proporciona un plegado de código simple para los archivos editados en Brackets. Es compatible con abrazaderas plegables, etiqueta
plegado, plegado de sangría y plegado de comentarios de varias líneas para archivos JavaScript, JSON, CSS, PHP y MENOS. También es compatible con archivos HTML y XML basados en la coincidencia de etiquetas. Con Code Folding, puede contraer grandes porciones de su código en una sola línea.
Color Picker
Color Picker parece ser útil si está trabajando con archivos CSS. Puede ayudarlo a elegir colores en cuestión de minutos dentro de los corchetes.
CSScomb Brackets
CSScomb es una utilidad para ordenar las propiedades CSS dentro de cada declaración de selector en un orden predefinido. Ayuda a mantener la uniformidad y hace que el código sea independiente del estilo de codificación. Le ayuda a comprender el código y evita errores accidentales, y también ordena las propiedades con valores de varias líneas. En otras palabras, la extensión CSScomb Brackets puede ayudarlo a reducir errores en su código y mantener la uniformidad.
Brackets Outline List
La Brackets Outline List se puede usar para mostrar una lista de las funciones o definiciones en el documento abierto actualmente. Funciona con JavaScript, CoffeeScript, CSS, SCSS, LESS, XML, HTML, SVG, Markdown y PHP.
HTML Skeleton
HTML Skeleton es una colección de un conjunto de etiquetas requeridas por cada página web HTML que construyes. Las etiquetas que componen el esqueleto le dicen a los navegadores qué tipo de archivo está leyendo y sin el esqueleto, los archivos HTML no se procesarán correctamente en los navegadores web. Esta es una extensión imprescindible si utiliza regularmente HTML para crear páginas entre paréntesis.
HTML Wrapper
HTML Wrapper es una extensión Brackets que formatea etiquetas de navegación y selección con un solo comando. Puede usarlo seleccionando una lista de elementos encapsulados por la etiqueta deseada y luego ejecutar el comando.
Minimap
Minimap es una extensión de Brackets que viene con resaltado de sintaxis, funcionalidad de ocultación automática, transparencia de desvanecimiento ajustable, función de vista previa rápida, zoom y desplazamiento suave. Muestra un mapa de estilo sublime de su código dentro del editor y funciona bien con temas de terceros.
Legibility Brackets
La extensión de soportes de legibilidad aumenta los aspectos de legibilidad de su código, como tamaños de fuente, alturas de línea, alturas de elementos como sugerencias de código, menús desplegables, barra de estado, barra de herramientas vertical, barra modal, panel inferior y modal de extensión.
Live Reload
Live Reload es una extensión de Brackets que monitorea los cambios en el sistema de archivos. Realiza un seguimiento del registro de cambios de los archivos de su proyecto y se actualiza automáticamente.
CSSLint
CSSLint es una extensión de corchetes que puede habilitar el soporte de linting CSS. Para ello, utiliza el sistema de linting integrado de Bracket. Muestra errores con un icono de advertencia amarillo y, si no hay errores, se muestra un icono verde.
Extension rating
Brackets Extension Rating se puede usar para mostrar las estadísticas de otras extensiones basadas en descargas y estadísticas de GitHub. Muestra los contadores de usuarios máximos y en línea para las extensiones seleccionadas, y muestra el contador de estrellas y bifurcaciones del repositorio de GitHub.
Visitar Brackets Extension Rating
ClipBox
ClipBox es una extensión para realizar un seguimiento del historial del portapapeles. Captura las teclas Ctrl + C y almacena el texto seleccionado en su propia matriz interna. ClipBox puede almacenar un máximo de diez elementos del portapapeles.
JavaScript y CSS CDN Sugerencias
La extensión Brackets CDN le permite trabajar con los servicios CDN. Como ya sabe, una red de entrega de contenido (CDN) guarda los recursos de su servidor web al cargar archivos a través de servidores en la nube.
Marcadores de corchetes
La extensión de Brackets CDN extension proporciona funcionalidad para marcar líneas en Brackets. Los marcadores se serializan y se recuerdan a nivel mundial. Esta extensión le permite agregar marcadores al archivo y cerrar el archivo. Cuando vuelva a abrir el archivo, Brackets restaurará los marcadores.
Visitar Brackets CDN extension
Interactive Linter
Interactive Linter se integra con linters como JSHint, JSLint, ESlint, JSCS, CoffeeLint y más. A medida que trabaja en su código, esta extensión brinda comentarios instantáneos directamente en el documento. Puede acceder a los detalles del informe de pelusa que contiene, y luego trabajar en consecuencia.
