Saltar al contenido

Los 25 mejores plugins para Brackets

Brackets plugins

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

  1. 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.
  2. 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.
  3. JSLint: funciona con su código JavaScript al guardar, con sus resultados mostrados como un panel debajo de la ventana de edición principal.
  4. Brackets implementa la finalización de código especialmente para diseñadores web y desarrollo front-end.
  5. 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.

Visitar Embellecer

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.

Visitar Autoprefixer

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.

Visitar Emmet

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.

Visitar Minificador

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.

Visitar ToDo

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.

Brackets File Icons

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.

Visitar Swatcher

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.

Visitar Lorem Pixel

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.

Visitar eqFTP

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.

Visitar Code Folding Brackets

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.

Visitar Color Picker

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.

Visitar CSScomb Brackets

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.

Visitar Brackets Outline List

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.

Visitar HTML Skeleton

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.

Visitar HTML Wrapper

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.

Visitar Minimap

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.

Visitar Legibility Brackets

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.

Visitar Live Reload

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.

Visitar CSSLint

 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.

Visitar ClipBox 

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.

Visitar Interactive Linter

También te puede interesar