Los 7 mejores editores de código en línea basados ​​en navegador para desarrolladores web

Si es un desarrollador web, es muy probable que tenga un entorno de desarrollo configurado localmente en su estación de trabajo. Ha instalado su editor de código favorito, los mejores paquetes agregados, las extensiones cargadas y todo el IDE funciona exactamente como lo necesita. Pero, ¿y si no estás en tu máquina normal? ¿Qué pasa si está viajando o ha sido desplazado o incluso trabaja desde casa sin una computadora portátil? ¿Entonces que? Ahí es cuando saber qué editores de código en línea existen realmente puede salvar el día. Y más que eso, tal vez incluso se guarde en su bolsillo trasero como una forma de mejorar su rutina de codificación normal.

Suscríbete a nuestro canal de Youtube

¿Por qué los editores de código en línea?

Hay varias razones para considerar el uso de editores de código en línea. Sin embargo, la verdad es que el uso de un IDE en línea (lo más probable) no reemplazará el que está instalado localmente. Si bien muchos entornos en línea son increíblemente robustos y capaces de manejar la mayor parte del trabajo que les dedicas, simplemente no son tan robustos y capaces como las instalaciones de escritorio. Dicho esto, sin embargo, existen múltiples razones para considerar el uso de uno.

• Está viajando y necesita acceder a su código en cualquier lugar.
• Necesita compartir fragmentos y secciones interactivas de código.
• Su tiempo es limitado y necesita una solución con una configuración casi nula.
• Tu presupuesto es limitado. Los editores de código en línea pueden tener más poder detrás de ellos que la estación de trabajo a la que tiene acceso.
• Su equipo necesita colaborar en tiempo real. Muchos IDE en línea tienen herramientas de colaboración integradas que funcionan sin configuración.

Independientemente del motivo por el que desee o necesite utilizar un IDE en línea, hay muchas opciones entre las que puede elegir, cada una con diferentes fortalezas y debilidades y que sirven para diferentes funciones para los desarrolladores web.

1. PlayCode

PlayCode es un editor de código en línea agradable y polivalente. Con él, puede abrir varios archivos que se ejecutan juntos en un solo proyecto, tal como lo haría con varios archivos en una estructura de directorio típica usando Sublime Text o VS Code. PlayCode tiene plantillas prefabricadas para los usuarios, así como resultados en tiempo real y depuración de consola incorporada directamente en el navegador. Los usuarios pueden editar y trabajar sin tener que iniciar sesión para obtener soluciones rápidas y demás, pero también pueden iniciar sesión para guardar el trabajo y usar PlayCode en todas las máquinas.

Más información

2. JSFiddle

JSFiddle es otro editor de código en línea superior que funciona de muchas maneras como PlayCode. Diseñado específicamente para codificadores de JavaScript, JSFiddle no es necesariamente para trabajar en proyectos completos, pero como dice la barra de información en la parte superior del editor, funciona mejor para "demostraciones de documentos, informes de errores para problemas de Github, presentación de respuestas de código en Desbordamiento de pila, colaboración de código en vivo, alojamiento de fragmentos de código ”o simplemente ser una caja de arena para que juegues con tu código.

Más información

3. CodePen

Es probable que CodePen sea considerado el editor de código en línea de los editores de código en línea. No solo le brinda las herramientas para la colaboración, la experimentación y el intercambio, sino que también obtiene resultados en vivo y la capacidad de buscar en su base de datos y repositorio de fragmentos que otros autores colocan para que usted también pueda experimentar y aprender de su trabajo. . También es un lugar divertido para ver lo que algunas personas están haciendo con el código de formas nuevas y divertidas. Además, Google indexa los fragmentos de CodePen, y muchas veces terminará aquí cuando esté buscando una solución antes de dirigirse a Stack Overflow, y a veces después porque ahí es donde la gente suele escribir y compartir soluciones en tiempo real.

Más información

4. StackBlitz

StackBlitz es bueno. Estamos muy impresionados con lo que esta aplicación ofrece a los desarrolladores porque viene repleta de herramientas para que usted pueda hacer que su proyecto despegue y comience a funcionar. Con un solo clic. Si observa la imagen de arriba, los archivos y las dependencias e incluso las URL que se pueden compartir se generaron con un solo botón Iniciar un nuevo espacio de trabajo - Reaccionar (JavaScript) . Con la capacidad de guardar, compartir e incluso conectarse a su cuenta de GitHub, StackBlitz merece una mirada. En lugar de ser un servicio para compartir fragmentos o una caja de arena de codificación, StackBlitz es un IDE sólido para aquellos que prefieren los editores de código en línea.

Además, y no podemos dejar esto sin decir, se basa en VS Code. Básicamente, está ejecutando el IDE y el editor de código más populares en su navegador, y cada proyecto tiene su propio espacio de servidor. Puede actualizar si lo desea, pero incluso la versión gratuita funciona bien (aunque un poco lento en la carga, pero eso es de esperar de los planes gratuitos). Léalo y creemos que estará de acuerdo en que, de todos los editores de código en línea, vale la pena analizarlo detenidamente.

Más información

5. AWS Cloud9

Como uno de los primeros en adoptar Cloud hace 9 años cuando era un proyecto de código abierto en c9.io , recomendamos encarecidamente este producto. De hecho, proporciona una experiencia muy similar a StackBlitz anterior. Cuando Amazon adquirió C9, lo conectaron a su nube como parte de su conjunto de servicios de AWS. AWS Cloud9 es definitivamente un IDE en línea sólido y con todas las funciones, y la propaganda informativa en su sitio web hace un gran trabajo al desglosar exactamente por qué vale la pena echarle un vistazo.

AWS Cloud9 es un entorno de desarrollo integrado (IDE) basado en la nube que le permite escribir, ejecutar y depurar su código con solo un navegador. Incluye un editor de código, un depurador y una terminal. Cloud9 viene empaquetado con herramientas esenciales para lenguajes de programación populares, incluidos JavaScript, Python, PHP y más, por lo que no necesita instalar archivos o configurar su máquina de desarrollo para comenzar nuevos proyectos. Dado que su IDE de Cloud9 está basado en la nube, puede trabajar en sus proyectos desde su oficina, hogar o cualquier lugar utilizando una máquina conectada a Internet. Cloud9 también proporciona una experiencia perfecta para desarrollar aplicaciones sin servidor, lo que le permite definir recursos, depurar y cambiar fácilmente entre la ejecución local y remota de aplicaciones sin servidor. Con Cloud9, puede compartir rápidamente su entorno de desarrollo con su equipo, lo que le permite emparejar programas y realizar un seguimiento de las entradas de los demás en tiempo real.

Más información

6. JSBin

Si alguna vez ha visto o usado PasteBin, JSBin le resultará familiar. Es similar en estructura, estilo y utilidad, JSBin es principalmente un sitio para compartir código. Creemos que definitivamente es mejor registrar una cuenta aquí para permanecer conectado. La razón es que JSBin guarda automáticamente su progreso en cualquier código con el que esté trabajando. Incluso si simplemente está experimentando para ver qué hacen los fragmentos, no perderá su trabajo. JSBin es un editor simple y sensato. Y si eso es lo que necesitas, realmente no puedes mejorar.

Más información

7. Editor de temas de WordPress

Es posible que WordPress no sea lo primero en lo que piense con respecto a los editores de código en línea. Pero definitivamente es algo a considerar. En WordPress 4.9, WP Core se actualizó para incluir CodeMirror. El resaltado de sintaxis y las advertencias de error para cualquier cambio que se realice dentro de las áreas de código ahora son la base de WordPress. La ubicación principal para esto es dentro del área Apariencia - Editor de temas , pero también aparece en cualquier área con widgets (como el widget HTML personalizado ) o dentro del personalizador de temas en la pestaña CSS personalizado . Si bien este definitivamente no es un IDE completo, podemos recomendar absolutamente el editor WP CodeMirror como una forma de verificar errores y actualizar fragmentos de código sin tener que lidiar con FTP y varios sistemas de administración de archivos.

Más información

Terminando con los editores de código en línea

La mayoría de los editores de código en línea no reemplazarán su entorno de desarrollo local. Ese no es su trabajo. Principalmente. Sin embargo, lo que pueden hacer es proporcionar una forma sólida y sencilla de editar código, compartir fragmentos, realizar copias de seguridad y experimentar con nuevas funciones en una ubicación segura en tiempo real. Entre IDE completos como StackBlitz, servicios para compartir fragmentos como JSBin e incluso editores de código en línea de calidad de vida como la integración de WordPress CodeMirror, si nunca ha jugado con la edición en línea, no hay mejor momento para comenzar.

¿Cuáles son sus editores de código en línea favoritos?

Imagen destacada del artículo por Fernandodiass / shutterstock.com