Editor de código online
Escribe y edita código en un editor rápido estilo VS Code directamente en tu navegador. Abre varios archivos en pestañas, obtén resaltado de sintaxis para más de 50 lenguajes, busca y reemplaza, y continúa donde lo dejaste: todo se guarda automáticamente en este navegador.
Última actualización:
Consejo: suelta archivos en el editor para abrirlos. Haz doble clic en una pestaña para renombrarla; el lenguaje sigue la extensión del archivo. Pulsa F1 para abrir la paleta de comandos.
Cómo usar Editor de código online
- Empieza a escribir en los archivos de ejemplo, o haz clic en Nuevo archivo (o +) para abrir una pestaña vacía.
- Abre tus propios archivos con Abrir archivos o arrastrándolos al editor. El lenguaje se elige según la extensión del archivo; cámbialo con el menú Lenguaje.
- Edita como en VS Code: Ctrl+F para buscar, Ctrl+H para reemplazar, Alt+clic para varios cursores, Shift+Alt+F para formatear y F1 para todos los comandos.
- Renombra una pestaña haciendo doble clic en ella. Ajusta el tema, el tamaño de fuente, la sangría, el minimapa y el ajuste de línea en la fila de opciones.
- Guarda tu trabajo con Guardar archivo (Ctrl+S) o Descargar todo (.zip). Tus pestañas también se conservan en este navegador para tu próxima visita.
Atajos de teclado
El editor usa los mismos atajos de teclado que Visual Studio Code. En un Mac, usa ⌘ en lugar de Ctrl y ⌥ Option en lugar de Alt.
| Atajo | Acción |
|---|---|
Ctrl + S | Guardar el archivo actual (en el disco o como descarga) |
Ctrl + O | Abrir archivos de tu computadora |
Alt + N | Nuevo archivo en una pestaña nueva |
Ctrl + F / Ctrl + H | Buscar / buscar y reemplazar (con expresiones regulares, mayúsculas/minúsculas y palabra completa) |
Shift + Alt + F | Formatear el documento |
F1 or Ctrl + Shift + P | Paleta de comandos con todos los comandos del editor |
Ctrl + G | Ir a la línea |
Ctrl + D | Seleccionar la siguiente aparición de la palabra actual (añadir un cursor) |
Alt + clic | Añadir otro cursor |
Alt + ↑ / ↓ | Mover la línea actual hacia arriba o hacia abajo |
Shift + Alt + ↓ | Duplicar la línea actual |
Ctrl + / | Comentar o descomentar la línea |
Ctrl + Shift + [ / ] | Plegar / desplegar el bloque actual |
Ctrl + Espacio | Mostrar sugerencias |
Cómo funcionan el autoguardado y los archivos
Cada pestaña se guarda en el localStorage de tu navegador aproximadamente medio segundo después de que dejas de escribir, junto con la pestaña que estaba abierta. La barra de estado muestra Guardado en este navegador cuando se ha guardado correctamente. El almacenamiento está ligado a este perfil del navegador en este dispositivo: no se sincroniza con otras computadoras, y las ventanas privadas lo olvidan al cerrarse. Un punto en una pestaña significa que el archivo cambió desde que lo abriste o lo guardaste por última vez en el disco.
Cuando abres archivos en Chrome o Edge, el editor usa la File System Access API, así que Guardar archivo puede escribir directamente en el archivo original después de que des permiso. Ese vínculo dura hasta que recargas la página. En otros navegadores, guardar descarga una copia, y Descargar todo (.zip) empaqueta cada pestaña en un archivo comprimido con su nombre de archivo.
Consejos
- Cambia el lenguaje renombrando: renombra
untitled-1.txtamain.pyy se activa el resaltado de Python. En un archivo nuevo sin título, elegir un lenguaje también cambia su extensión. - Usa expresiones regulares al buscar: haz clic en el botón
.*del cuadro de búsqueda. Reemplazar admite grupos de captura como$1. - Edita columnas a la vez: mantén pulsadas
Shift+Alty arrastra para hacer una selección en bloque entre líneas. - Compara dos versiones de un archivo con el Comparador de código, o convierte un fragmento en una imagen para compartir con Código a imagen.
Preguntas frecuentes
¿Es el mismo editor que Visual Studio Code?
Usa Monaco, el componente de editor de código abierto sobre el que está construido Visual Studio Code, así que la edición, los atajos, el resaltado, buscar/reemplazar y la paleta de comandos funcionan igual. Las extensiones, la terminal, la depuración y Git forman parte de la aplicación completa de VS Code y no están incluidos.
¿Qué lenguajes de programación son compatibles?
El resaltado de sintaxis abarca más de 50 lenguajes, entre ellos JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Swift, Kotlin, SQL, HTML, CSS, SCSS, JSON, YAML, XML, Markdown, Shell, PowerShell, Dockerfile, Lua, R y Dart. JavaScript, TypeScript, JSON, HTML y CSS también tienen sugerencias tipo IntelliSense y comprobación de errores.
¿Dónde se guardan mis archivos?
Cada pestaña se guarda automáticamente en el almacenamiento local de tu navegador en este dispositivo, así que sigue ahí cuando vuelves. No se sube nada a ningún servidor. Borrar los datos de navegación o usar una ventana privada lo elimina, así que guarda los archivos importantes en el disco.
¿Puedo guardar los cambios en el archivo original?
Sí, en Chrome y Edge de escritorio. Los archivos abiertos con Abrir archivos quedan vinculados al original, y Guardar archivo (Ctrl+S) escribe tus cambios en él después de que lo permitas. Otros navegadores descargan una copia.
¿Puedo ejecutar mi código aquí?
No. Es un editor, no un compilador ni un entorno de ejecución. Para ver HTML, CSS y JavaScript funcionando en vivo, usa el Editor HTML con vista previa en vivo; para otros lenguajes, guarda el archivo y ejecútalo con tus herramientas habituales.
¿Hay un límite de tamaño de archivo?
Se pueden abrir archivos de hasta 5 MB. El almacenamiento local del navegador suele admitir unos 5 MB por sitio en total, así que si la barra de estado indica que no se pudo guardar tu trabajo, descarga tus archivos y cierra las pestañas que ya no necesites.
¿Funciona en teléfonos y tabletas?
Funciona en los navegadores móviles modernos, pero editar código es mucho más cómodo con un teclado físico. En pantallas pequeñas quizá quieras desactivar el minimapa y activar el ajuste de línea.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.