Ve nuestra colección de 5 de los mejores complementos de editores de código para tus aplicaciones web.

Top 5: Los mejores complementos de editor de código escritos en Javascript

El desarrollo avanza a pasos agigantados, hoy en día tienes a tu alcance IDE basados ​​en la nube que te permiten trabajar desde donde estés. El componente más importante de estos servicios es el editor de código. Sí, ese cuadro donde editas tu código y se resalta con colores elegantes, un autocompletado y otras cosas que (tal vez) te ayudarán a trabajar más rápido.

Disfrute de nuestra colección de 5 de los mejores complementos de editor de código escritos en Javascript.

5. EditArea

Ejemplo

Ejemplo de EditArea

EditArea es un editor javascript gratuito para código fuente. Este editor está diseñado para editar archivos de código fuente en un área de texto. El objetivo principal es permitir el formato de texto, la búsqueda y reemplazo y el resaltado de sintaxis en tiempo real (para texto no demasiado pesado).

EditArea es desarrollado por Christophe Dolivet y actualmente se publica bajo las licencias "LGPL", "Apache" y "BSD" (use la que desee), lea el acuerdo de licencias para obtener más detalles.

Caracteristicas

  • Fácil de integrar, solo incluye un script y una llamada a función
  • Soporte de tabulación (permite escribir código fuente bien formateado)
  • Resaltado de sintaxis personalizable en tiempo real (actualmente: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic, Brainf * ck y probablemente más ...)
  • Soporte de ajuste de palabras
  • Buscar y reemplazar (con regexp)
  • Sangría automática de nuevas líneas
  • Numeración de líneas
  • Soporte multilenguaje (actualmente: croata, checo, danés, holandés, inglés, esperanto, francés, alemán, italiano, japonés, macedonio, polaco, portugués, ruso, eslovaco, español y probablemente más ...)
  • Posible compresión PHP gzip (comprima los archivos centrales en un archivo de ~ 25Ko)
  • Permitir múltiples instancias
  • Modo de pantalla completa
  • Posible integración de complementos
  • Posibles funciones de devolución de llamada para guardar y cargar
  • Posible gestión de contenido dinámico
  • Puede funcionar en el mismo entorno que las bibliotecas de "prototype" y "mootools".

Limitaciones actuales:

  • enfoque automático en el área de texto al cargar la página.
  • puede ser lento al editar archivos de gran tamaño (javascript no es un lenguaje rápido).
  • solo en el lenguaje de sintaxis al mismo tiempo (sin resaltado de sintaxis html y php al mismo tiempo).

4. CodeFlask.js

Github

Editor de matraces de código

CodeFlask.js le permite poner fácil y sin esfuerzo un editor de código en su página web. Se hizo como un intento de crear un editor más ágil con propósitos simples. Solo unas pocas líneas de código y estará listo para jugar con el código en el navegador. Si desea un editor de código web robusto, puede verificar proyectos que apuntan a ese tamaño, como CodeMirror.

Para usar CodeFlask.js, también necesita importar Prism.js (para resaltar el código) en su proyecto. Prism básicamente usa dos archivos, un .jsarchivo y .cssotro (donde puede cambiar la sintaxis del código).

3. Editor de Mónaco

Github | Ejemplo

Ejemplo del editor de Mónaco

Monaco Editor es el editor de código que impulsa VS Code, tiene licencia de MIT y es compatible con IE 9/10/11, Edge, Chrome, Firefox, Safari y Opera. El editor de Monaco no es compatible con navegadores móviles o marcos web móviles.

Monaco Editor tiene IntelliSense enriquecido, validación para TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML.

Monaco tiene una implementación de comparación en vivo útil lado a lado que admite todos los idiomas:

Implementación de Monaco Editor Diff

2. CodeMirror

Github

Ejemplo de Codemirror

CodeMirror es un editor de texto versátil implementado en JavaScript para el navegador. Está especializado para editar código y viene con más de 100 modos de lenguaje y varios complementos que implementan una funcionalidad de edición más avanzada, una API de programación rica y un sistema de temas CSS están disponibles para personalizar CodeMirror para que se adapte a su aplicación y ampliarlo con nuevas funciones.

Caracteristicas

1. Editor de ACE

Github | Ejemplo

Ejemplo de Ace Editor

Ace es el editor de código de alto rendimiento para la web, es un editor de código incrustable escrito en JavaScript. Coincide con las funciones y el rendimiento de editores nativos como Sublime, Vim y TextMate. Puede integrarse fácilmente en cualquier página web y aplicación JavaScript. Ace se mantiene como el editor principal de Cloud9 IDE y es el sucesor del proyecto Mozilla Skywriter (Bespin). 

Características del editor Ace:

  • Resaltado de sintaxis para más de 110 idiomas ( se pueden importar archivos TextMate / Sublime Text .tmlanguage )
  • Más de 20 temas ( se pueden importar archivos TextMate / Sublime Text .tmtheme )
  • Sangría y sangría automática
  • Una línea de comando opcional
  • Maneja documentos enormes (¡cuatro millones de líneas parece ser el límite!)
  • Asociaciones de teclas totalmente personalizables, incluidos los modos vim y Emacs
  • Buscar y reemplazar con expresiones regulares
  • Resaltar paréntesis coincidentes
  • Alternar entre pestañas suaves y pestañas reales
  • Muestra personajes ocultos
  • Arrastra y suelta texto con el mouse
  • Envoltura de línea
  • Plegado de código
  • Varios cursores y selecciones
  • Verificador de sintaxis en vivo (actualmente JavaScript / CoffeeScript / CSS / XQuery)
  • Funcionalidad de cortar, copiar y pegar

En el sitio web principal de Ace se puede encontrar información de uso adicional, incluidos los eventos para escuchar y la extensión de los resaltadores de sintaxis .

Menciones honoríficas

CodeJar: un editor de microcódigo

Github

CodeJar

Codejar es un editor de código incrustable para el navegador.  Características de este complemento:

  • Ligero ( solo 2 kB  )
  • Conserva la sangría en una nueva línea
  • Agrega corchetes de cierre, citas
  • Sangra la línea con la tecla Tab  
  • Soporta deshacer / rehacer 

Si cree que nos hemos olvidado de otro increíble complemento de editor de código, compártalo con la comunidad en el cuadro de comentarios. 


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores