12 mejores IDE y editores de código en línea para desarrollar aplicaciones web

¿Qué es lo siguiente mejor a codificar? El editor de código, ¡por supuesto!

Los editores de código son la segunda razón más importante de las guerras de llamas entre programadores (la primera es el formato del código).

Para algunos, Vim es el único editor sensato jamás creado, mientras que para otros todo lo que no encaje en el mundo de Emacs, que da vueltas en espiral como en Inception, sólo es apto para el ridículo. Si lo que busca es llamar la atención, lo único que tiene que hacer es ir a una comunidad de programación e iniciar un hilo del tipo “Por qué creo que X (elija cualquier editor de código popular) apesta/es el mejor”, tomarse una cerveza y relajarse.

Argumentos, contraargumentos e insultos seguirán entrando y saliendo de la discusión durante toda la noche, y pasarán muchos meses antes de que el veneno del hilo se enfríe.

La pregunta es: ¿por qué?

Seguro que los seres humanos se las arreglan para hacer un gran problema de todo, pero creo que los editores de código son particulares cuando se trata de programadores. Un programador típico pasa casi todo su tiempo (más del 98%, si tuviera que apostar) en el editor de código de su elección. Conocen a la perfección el editor: sus puntos fuertes, sus puntos débiles, sus límites, sus peculiaridades y sus joyas ocultas.

No hay nada más frustrante que tener que luchar con el editor cuando se está escribiendo código (¡piense en lo molesto que resulta tener que enviar un correo electrónico largo y urgente con un teclado nuevo!) Los editores de código reducen la fricción mental y le permiten ser más productivo, por eso son tan importantes y reciben tanta atención.

Entonces, ¿cuál es el mejor editor de código?

Sinceramente, ¡ni siquiera me atreveré a entrar en ese tema! 😀 😀

Sin embargo, si lo suyo es el desarrollo web, hay una alternativa en la que quiero que piense: ¡los editores de código en línea! También puede llamarlos editores de código basados en la nube.

No confunda un editor de código con un entorno de desarrollo integrado (IDE). Ambos son dos cosas diferentes y, como desarrollador, debería estar familiarizado con estos IDE multilingües.

En pocas palabras, se trata de editores que residen por completo en un servidor remoto y son accesibles a través del navegador.

Suena raro, ¿verdad?

A mí también me lo parecieron cuando me topé con ellos hace 3-4 años. ¿Por qué demonios querría alguien entregarlo todo a un estúpido navegador?

¿Puede siquiera competir con un editor de código instalado de forma nativa?

Resulta que en la mayoría de los casos, y especialmente para el desarrollo web, la respuesta es sí. Ahora, aunque no he abrazado los editores en línea como mi medio principal, sí me encuentro utilizándolos cada vez más en escenarios específicos.

Antes de sumergirnos en qué editores de código existen para ser utilizados, hagamos una pausa y pensemos en cuándo pueden tener sentido los editores de código en línea.

Configuración cero

No sé usted, pero configurar mi editor favorito a mi gusto en un sistema nuevo no es algo que me haga mucha ilusión. Plugins, temas, fuentes, accesos directos, fragmentos, ajustes… Hay una lista interminable de cosas que hay que equilibrar antes de que todo sea utilizable. Es fácil pasar por alto algo, sólo para molestarse más tarde cuando se interrumpe su flujo de trabajo.

Por el contrario, no hay nada que hacer con un editor en línea una vez terminada la primera configuración. Compilaciones oficiales, actualizaciones, compilaciones nocturnas, plataformas compatibles, arquitectura del sistema, sincronización FTP, canalizaciones CI/CD… ¡nada de eso importa mientras tenga un navegador!

Colaboración

La mayoría de las veces, necesitará colaborar con otros desarrolladores cuando esté resolviendo problemas o depurando algo.

El editor de código tradicional no está hecho para esto — no hay posibilidad de editar, comentar o resaltar código simultáneamente, y es todo un reto añadir soporte para ello.

Seguridad de los datos

Ahora bien, es un hecho que ningún proyecto de hoy en día carece de control de versiones, lo que significa que una copia del código existe en el repositorio en todo momento. Dicho esto, hay ocasiones en las que el control de versiones no es suficiente:

• Se olvida de enviar los commits recién creados y su portátil se incendia.
• Tiene otros archivos importantes y volcados de datos con los que interactúa su código, aunque no forman parte de la aplicación en vivo. ¿Qué ocurre con ellos si su portátil se incendia?

(Vale, parece que estoy obsesionado con que los portátiles se incendien, pero ya me entiende, ¿verdad?)

Imponer disciplina

Esto bien podría argumentarse en contra en el tribunal de los derechos de los desarrolladores (si es que tal cosa existe), pero la verdad del asunto es que los desarrolladores rara vez sacrifican sus caprichos por el bien común.

Por ejemplo, un entusiasta acérrimo de Sublime Text nunca abrazará plenamente ninguno de los excelentes editores de JetBrains y encontrará todas las oportunidades para señalar su naturaleza hambrienta de memoria y su menor rendimiento.

Lo mismo ocurre con los tabuladores frente a los espacios (o incluso los tabuladores de dos espacios frente a los de cuatro espacios): es usted un ingenuo si cree que los programadores de su equipo no se enfrentarán entre sí.

En estos casos, un editor en línea es una bendición — usted decide los ajustes para los proyectos (incluso cómo debe formatearse el código), y simplemente se negará a aceptar el trabajo hasta que se adhiera a todas las normas. Duro para el individuo, quizás, ¡pero genial para el proyecto!

A estas alturas, se me están acabando los casos de uso, así que pasemos a ver qué opciones tenemos en cuanto a editores de código en línea, especialmente para el desarrollo web.

JSFiddle

Aunque JSFiddle no puede sustituir a un editor de texto en toda regla, hace un trabajo condenadamente bueno en el manejo de scripts frontales puntuales.

Es tan popular que sitios de preguntas y respuestas como StackOverflow ya soportan la incrustación de enlaces JSFiddle directamente en su plataforma.

Para empezar rápidamente, JSFiddle ofrece algunos boilerplates al principio; lo que significa que si quiere empezar una demo de, digamos, React, todo lo que tiene que hacer es pulsar el botón correspondiente y empezar a escribir el código. Una vez que pulse Guardar, el “fiddle” se guarda y usted obtiene una URL permanente (Eche un vistazo a este tonto fiddle que he creado: https://jsfiddle.net/tuqd76c4/ y observe que puede hacer sus cambios y pulsar Guardar para crear una nueva versión de esta URL).

Esto es lo que hace de JSFiddle una plataforma viable para el desarrollo web front-end

• Gratis de usar (sin cargos ocultos o características freemium). JSFiddle se mantiene a través de anuncios (al menos en el momento de escribir esto), y puede ver un anuncio de Adobe en la parte inferior izquierda de la captura de pantalla de arriba.
• Funciones de colaboración de código — ideal para construir conceptos juntos, entrevistas, etc.
• Múltiples diseños, tamaños de fuente, temas claros/oscuros, etc.
• Formateo del código (ordenación), próxima compatibilidad con linters (CSS y JS), y mucho más.

Y ahora, sob, sob, lo malo:

• JSFiddle es un editor puramente front-end. No hay forma de codificar y ejecutar su lenguaje backend favorito.
• Aquí no existe el concepto de archivos y carpetas (o cargas, para el caso). Todo lo que tiene es un único espacio para el código, sin importar la cantidad que haya.
• JSFiddle no puede utilizarse para alojar código en su servidor. El código tiene que estar en JSFiddle y es público todo el tiempo.
• No hay forma de construir una tubería CI/CD, usar Git, etc.

Dicho esto, JSFiddle tiene su punto dulce y brilla cuando necesita realizar pruebas de concepto y colaborar a la velocidad de la luz. Es y seguirá siendo una de las principales señas de identidad entre los editores en línea.

Codeanywhere

Un problema con la mayoría de los editores de código de esta lista (al menos hasta ahora) es que esperan que mantenga el código en sus servidores en todo momento, o le exigen que sincronice el código a través de la línea de comandos con regularidad.

No es así con Codeanywhere.

En su punto más fuerte, CodeAnywhere tiene dos características que destacan para mí:

• Imágenes de contenedor preconstruidas para 72 lenguajes y marcos de programación. Esto significa que puede aprovisionar un nuevo entorno de desarrollo ¡directamente desde el editor! Por supuesto, el código se aloja automáticamente en el contenedor recién creado, y los archivos se sirven directamente desde allí.
• Conéctese a cualquier cosa. Sí, literalmente cualquier cosa. No está obligado a almacenar su código en los servidores de CodeAnywhere. Ya sea que su código resida en FTP, plataformas de intercambio de archivos como Dropbox, Amazon S3, o en sofisticadas plataformas de control de versiones como GitHub, puede configurar fácilmente CodeAnywhere para leer desde y escribir en esa fuente, utilizando el editor de código puramente para . . . Bueno, edición de código. 😛

Una cosa más que me apetece señalar: si usted no se siente cómodo con Git cuando se trata de ver la historia y las diferencias, CodeAnywhere puede sentirse como un suspiro de alivio. El editor utiliza su sistema diff para comparar archivos, lo que le permite comparar dos archivos a través de dos revisiones cualesquiera (se crea una revisión cada vez que guarda un archivo).

Sin embargo, hay una pequeña pega con las revisiones: la versión gratuita sólo le permite mantener una revisión, mientras que el plan de pago más pequeño permite 20 revisiones como máximo. En general, no es un problema, ya que rara vez querrá mirar más allá de la última vigésima revisión, pero como la mayoría de los programadores tienen la costumbre de darle a Guardar unas cuantas veces por minuto, puede llegar a ser doloroso.

Dicho todo esto, CodeAnywhere es una oferta sólida y agradable para aquellos que quieran trasladarse a la nube y quedarse allí 🙂 Dado que sus poderes van más allá del código front-end, en mi opinión, ¡es muy recomendable!

CodeSandbox

CodeSandbox puede considerarse como una versión mucho más potente y completa de JSFiddle. Fiel a su nombre, CodeSandbox proporciona una experiencia completa de editor de código y un entorno sandboxed para el desarrollo front-end.

CodeSandbox es una verdadera potencia y un producto dulce, dulce. Me quedaría sin papel si trato de enumerar todas sus ventajas, pero aquí están algunas características asesinas:

• Soporte Npm: Sí, puede añadir prácticamente cualquier paquete que esté disponible en npm.
• Archivos, carpetas, módulos: Puede dividir su código en varios archivos, añadir/eliminar imágenes de la carpeta pública y construir/importar módulos como mejor le parezca. El flujo de trabajo refleja el de un agrupador de módulos moderno, por lo que no necesita configurar (casi) nada.
• Soporta TypeScript, recarga en caliente, exportación a GitHub, alojamiento de archivos estáticos, etc.
• Está construido sobre el editor Monaco, la misma bestia que potencia el editor favorito VSCode. ¡Esto trae características de gran alcance como “Ir a”, “Buscar referencias”, y la refactorización necesaria a su alcance!
• Soporte de snippet para Emmet
• DevTools integradas, linting, superposición de errores, marcos de pruebas (Jest), keybindings y mucho más.
• Potente CLI para importar directamente proyectos locales a CodeSandbox.

Aunque la versión gratuita de CodeSandbox no admite código privado, puede obtener esa característica (y aumentar los límites de tamaño en general) ayudándoles en Patreon por tan sólo 5 dólares al mes (pague lo que quiera, hasta 50 dólares al mes).

StackBlitz

Si lo suyo es sobre todo el front-end y no puede alejarse de la interfaz VSCode, StackBlitz ha sido creado justo para usted.

¿No ve nada especial?

Yo tampoco hasta que me desplacé un poco hacia abajo y pinché en el botón Angular. ¡Boom!

Adivine qué, no está creado deliberadamente para parecerse a VSCode — ¡está construido sobre el editor VSCode! Tanto es así, que puede instalar extensiones, buscar en las carpetas y organizar archivos tal y como esperaría de una instancia VSCode normal.

Pero, espere, ¡hay más!

Puede que se haya dado cuenta o puede que no:

• ¡Todas las aplicaciones creadas en StackBlitz también se despliegan automáticamente en sus servidores! Así, esta aplicación de juguete Angular que acabo de crear se aloja automáticamente en https://angular-yvyi2j.stackblitz.io/. Lo más probable es que la URL siga funcionando (aunque se cargará lentamente, como es de esperar cuando se aloja de forma gratuita)
• Puede bifurcar y compartir el proyecto. Al compartirlo, obtendrá un control más preciso sobre lo que otros pueden hacer.
• Puede conectarse a un repositorio de GitHub y también dejar que el código sea directamente tirado/empujado desde allí. O simplemente puede descargar el proyecto como un archivo zip a la vieja usanza.

Pero, espere, ¡hay más!

En serio! 😀

Aquí está la lista de características oficiales que ofrece StackBlitz:

• Soporte nativo para Firebase (que es algo que personalmente no uso, pero oye, es una bendición para aquellos que no quieren sumergirse en las turbias profundidades del backend)
• Intellisense, búsqueda de proyectos
• Recarga en caliente mientras escribe
• Importación de paquetes npm
• Edite sin conexión cuando no esté conectado

StackBlitz está lleno de (bellas) sorpresas cuando se trata de eliminar los obstáculos del desarrollo y despliegue web. Incrustar VSCode en su sitio web ¡ya no es cosa de sueños!

AWS Cloud9

Cloud9 fue posiblemente el primer IDE basado en navegador que ofrecía características serias y llevó la idea del navegador como editor a la corriente principal. No es de extrañar que más tarde Amazon lo adquiriera y, hoy en día, Cloud9 forme parte de la oferta de AWS.

Si está mínimamente vinculado a (o interesado en) la plataforma AWS, Cloud9 es donde termina su búsqueda de un editor perfecto (vale, casi perfecto).

Veamos por qué:

• No hay cargos adicionales por utilizar Cloud9. Puede conectar Cloud9 a una instancia de computación de AWS existente/nueva, y sólo pagará por esa instancia. También es posible conectarse a un servidor de terceros a través de SSH — ¡exactamente sin pagar nada! 🙂
• Soporte de primera clase para aplicaciones AWS Serverless (depuración, etc.)
• Acceso directo de terminal a AWS desde dentro del editor (honestamente, un editor dentro decente, la terminal con pestañas es lo que todavía echo de menos en VSCode)
• Más de 40 lenguajes de programación soportados (Go, C , Ruby, Node, Python, PHP, Java . . . tome su selección)

Las funciones de colaboración en Cloud9 también son deseables, ya que permiten realizar revisiones/entrevistas sin problemas.

Otra función genial es la reproducción en vídeo de los cambios realizados en un archivo, lo que convierte el proceso de revisión en una gozada:

¿Mi consejo?

Si le interesa AWS, no espere más y hágase con Cloud9 ahora mismo. Y si aún no está en la nube pero ha estado pensando en dar el paso, adopte AWS e integre Cloud9 en su flujo de trabajo. ¡No puede tomar una mejor decisión de cualquier manera!

Gitpod

Gitpod es una visión refrescante de los editores de código en la nube (o IDEs, si lo prefiere) que pretende mantener su código siempre probado y actualizado. En otras palabras, está profundamente integrado con GitHub, y cada vez que añada código, ejecuta sus pruebas y pipelines CI/CD para asegurarse de que el código está siempre al 100% de salud.

Vale la pena echarle un vistazo si le gusta la experiencia VSCode y quiere algo que soporte todos los principales lenguajes y frameworks back-end/front-end (Django, Rails, Revel, lo que sea).

Theia

Si usted es un fan acérrimo de SOLID y un arquitecto de software puntilloso, el IDE Theia le hará cosquillas en el hueso de la separación de preocupaciones. Es un IDE de código TypeScript (¡cinco puntos para el estilo de inmediato!) que tiene un front-end y un back-end perfectamente separados. El front-end se ejecuta en un navegador, mientras que el backend puede estar en cualquier lugar — ¡en la máquina local o en la nube!

Pero eso no es todo — el front-end se puede ejecutar como una aplicación Electron con un entorno de navegador completamente funcional y aislado, dándole el aspecto y la sensación de una aplicación nativa de escritorio si así lo desea.

GitHub Codespaces

GitHub Codespaces proporciona máquinas virtuales de alto rendimiento para ejecutar códigos con el fin de desarrollar aplicaciones web. Utilizando el Visual Studio Code que incluye un editor y un ecosistema completo, le resultará más fácil trabajar en el navegador.

Pruebe el entorno de desarrollo más reciente para los proyectos, junto con imágenes preconstruidas. Experimentará una baja latencia en varias regiones escalando sus máquinas virtuales hasta 64 GB de RAM y 32 núcleos. Comience a codificar con los entornos estandarizados, las especificaciones de hardware, la configuración del editor, las extensiones y los requisitos de tiempo de ejecución.

Puede aislar las dependencias entre los proyectos con docker-compose y los contenedores. Además, previsualice los cambios que ha realizado fácilmente en el navegador y comparta puertos tanto públicos como privados con sus compañeros de equipo. También puede editar o añadir incluso detalles frikis como espacios, pestañas, claro, oscuro, embellecer, más bonito, solarizado, Monokai, y muchos más.

Los principiantes que quieran probar suerte pueden utilizar GitHub Codespaces de forma gratuita con prestaciones limitadas, pero dispondrán de funciones suficientes para seguir adelante. Si es un equipo o una empresa, puede empezar a utilizar GitHub Codespaces por 40 $/usuario/año.

JetBrains

Obtener fresco, reproducible, listo para usar y automatizado espacio nube dev entornos en cuestión de segundos y empezar a codificar con JetBrains IDE – Espacio. Es la solución única para proyectos y equipos de software, ya que se responsabiliza del ciclo de vida completo del desarrollo, empezando por las canalizaciones CI/CD y el alojamiento de repositorios Git hasta la publicación de paquetes.

Space es la máquina virtual dedicada con el contenedor Docker. Puede instalar todas las bibliotecas y herramientas esenciales que necesite en el proyecto. Agilice y acelere la experiencia de incorporación compartiendo y reproduciendo los espacios de trabajo de codificación siempre que lo desee.

Permita que los recién llegados empiecen a desarrollar un código al instante sin perder tiempo desarrollando una máquina local. Obtendrá un IDE completo listo para usar siempre que lo necesite para empezar a escribir el código, depurarlo y ejecutarlo en segundos para probar el resultado. JetBrains ofrece una plataforma centralizada para gestionar los entornos de desarrollo.

Todo lo que haga y todos los recursos que utilice se rastrean en un único lugar. También puede integrar los recursos en la tubería de desarrollo con bastante facilidad. En función de su proyecto, puede elegir el tipo de máquina virtual que mejor se adapte al tamaño del proyecto. El espacio ahorrará sus recursos hibernando el espacio de trabajo de codificación para que pueda empezar a trabajar en el mismo tras el descanso.

Empiece hoy mismo y experimente la belleza de esta bestia de forma gratuita.

CodeTasty

CodeTasty es un IDE en la nube extensible, inteligente y moderno con muchas características adicionales que le encantarán. Le ayuda a escribir código limpio y legible de forma más inteligente en tiempo real en su lenguaje preferido.

Obtenga el editor de código para tener una experiencia fluida con compilación incorporada, completado de código, herramientas de detección de errores y mucho más. No se preocupe por la configuración; levántese y empiece a trabajar en los proyectos que tenga delante.

Tendrá la misma sensación que trabajando con su escritorio cuando edite sus códigos en la nube, disfrutando del mismo rendimiento y velocidad. CodeTasty entiende las necesidades de cada desarrollador; y por ello, le permite instalar tantas extensiones como desee para aumentar su productividad. Además, soporta más de 40 idiomas y cientos de líneas de código en un archivo.

Pruebe CodeTasty de forma gratuita para obtener un espacio de trabajo sandbox, 2 espacios de trabajo FTP/SSH, colaboración, opción de terminal y 2 colaboradores. También puede empezar con un plan de pago de 4 $/mes y tener la oportunidad de revisar sus códigos antes de ejecutarlos.

Replit

Aprenda, escriba y cree código con el IDE gratuito, en navegador y colaborativo de Replit, que soporta más de 50 idiomas sin tener que invertir mucho tiempo en configuraciones. Puede empezar a codificar en su idioma en cualquier dispositivo, sistema operativo y plataforma.

Invite a sus compañeros de equipo, colegas o amigos a editar el código en Google Docs. Puede importar su código a GitHub para ejecutarlo y colaborar con los repositorios de GitHub con cero configuraciones. Tanto si se siente cómodo con C , Python, CSS o HTML, puede escribir el código y editarlo en una única plataforma.

Además, en el momento en que tenga listo el código, éste se pone instantáneamente en directo a disposición del mundo. Si usted también quiere aprender código, Replit cuenta con más de tres millones de tecnólogos, creativos, programadores apasionados y mucho más. Con la colaboración en tiempo real con sus equipos, su equipo será más productivo. Además, puede crear aplicaciones, bots, etc., con la ayuda de plugins mientras codifica. La herramienta también le ayuda a desarrollar sus proyectos directamente desde su navegador.

Regístrese para obtener una cuenta y empiece a codificar ahora.

PaizaCloud

Construya aplicaciones web en su navegador con PaizaCloud IDE. Es un entorno de desarrollo web para Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress y mucho más.

PaizaCloud le permite escribir sin problemas sus códigos sin preocuparse de configurar el entorno. Sólo tiene que abrir el navegador y su entorno estará listo en tres segundos. Tanto si utiliza Mac, iPad, OS o la versión de Windows, podrá utilizar el mismo entorno en todos los navegadores.

Además, puede utilizar shells Linux para configurar entornos de desarrollo basados en web de forma más fácil y flexible. También puede publicar los servicios ideales para su cartera, como servicios de alojamiento, actualizándose al plan básico.

Ejecute comandos, gestione archivos, edite códigos y mucho más en el propio navegador. PaizaCloud elimina la necesidad de añadir comandos como vim, ssh, etc., para editar archivos o iniciar sesión. En su lugar, puede manejar los servidores de forma fácil y eficiente, como si estuviera manejando un ordenador de sobremesa.

Haga una prueba con el plan gratuito con 2 núcleos y 2 GB de memoria. O bien, aproveche la vida útil ilimitada del servidor con 9,80 $/mes y obtenga 1 GB extra de espacio en disco.

Conclusión

Esto cubre más o menos todos los IDE y editores de código que existen en el momento de escribir estas líneas. He dejado fuera dos tipos de ofertas en esta lista: las que se centran puramente en entrevistas y no tienen entornos completos (excepto nuestro querido clásico JSFiddle, por supuesto), y las que no parecen ofrecer algo sustancial y tienen poco más que una elegante página de inicio.

Si necesita algo ligero para el desarrollo web, puede explorar estos editores de código.