Documentación

Instalación #

Descarga el instalador para tu sistema desde la página de Descargas.

macOS

1. Abre el .dmg descargado y arrastra Eclipse Code a Aplicaciones.
2. La primera vez, macOS bloquea la aplicación porque Apple aún no la ha notarizado. Abre Ajustes del Sistema → Privacidad y seguridad, desplázate hacia abajo y haz clic en Abrir igualmente (en versiones antiguas de macOS, haz clic derecho sobre la aplicación y elige Abrir).
3. Si macOS sigue indicando que la aplicación está dañada, ejecuta este comando en la Terminal:

xattr -cr "/Applications/Eclipse Code.app"

Windows

1. Ejecuta el .exe descargado y sigue los pasos. Puedes elegir la carpeta de instalación.
2. Si aparece SmartScreen, haz clic en Más información y luego en Ejecutar de todas formas (la aplicación aún no está firmada).

Requisitos

• macOS 12 o posterior, o Windows 10 o posterior (64 bits).
• Para depurar, debe estar instalado Node.js.
• Para la vista previa de proyectos con frameworks (Vite, Next.js…), deben estar instalados Node.js y npm.

Primeros pasos #

1. Abre una carpeta con Archivo → Abrir carpeta (⌘K ⌘O / Ctrl+K Ctrl+O) o con el botón + de la barra superior.
2. Haz clic en un archivo del Explorador para abrirlo. Edítalo y pulsa ⌘S / Ctrl+S para guardar.
3. Pulsa ⇧⌘P / Ctrl+Mayús+P para abrir la paleta de comandos y ⌘P / Ctrl+P para saltar a cualquier archivo por su nombre.

La interfaz #

• Barra de proyectos (arriba): una pestaña por proyecto. El botón + abre otra carpeta en una pestaña nueva.
• Barra de actividades (izquierda): Explorador, Buscar, Ejecutar y depurar, Terminal y Configuración (engranaje).
• Barra lateral: el explorador de archivos, los resultados de búsqueda o las vistas del depurador.
• Editor: pestañas de archivos arriba. El botón del ojo, arriba a la derecha, abre la vista previa del sitio web.
• Panel inferior: Problemas, Salida, Consola de depuración y Terminal.
• Barra de estado: contadores de terminal y problemas, carpeta actual, posición del cursor, sangría, codificación, final de línea, lenguaje y el botón Actualizar.

Proyectos y pestañas #

Cada proyecto es una carpeta con sus propios archivos abiertos, explorador, terminales y vista previa. Cambia entre ellos sin abrir una segunda ventana.

• Abre otra carpeta en una pestaña nueva con ⇧⌘N / Ctrl+Mayús+N o con el botón +. Abrir una carpeta que ya está abierta simplemente cambia a ella.
• Cambia con un clic, o con ⇧⌘] / ⇧⌘[ (Ctrl+Mayús+AvPág/RePág en Windows).
• Cierra un proyecto con su × o con ⇧⌘W / Ctrl+Mayús+W. Se te pregunta si quieres guardar los cambios y sus terminales se cierran.
• Un punto en la pestaña de un proyecto significa que tiene archivos sin guardar.

Edición #

El editor es Monaco, el mismo motor que Visual Studio Code, por lo que sus atajos de edición funcionan igual.

• Resaltado de sintaxis para docenas de lenguajes, autocompletado para JavaScript, TypeScript, JSON, CSS y HTML, pares de corchetes coloreados y minimapa.
• Varios cursores, mover/copiar líneas, comentar, buscar y reemplazar (consulta Atajos de teclado).
• Da formato a un documento con Editor: Dar formato al documento en la paleta de comandos.
• Un punto en la pestaña de un archivo significa cambios sin guardar. ⇧⌘T / Ctrl+Mayús+T reabre la última pestaña cerrada.
• Si un archivo cambia en el disco, se vuelve a cargar al regresar a la aplicación (salvo que tengas cambios sin guardar en él).
• Los archivos binarios y los de más de 5 MB no se abren en el editor.

Activa el Guardado automático en la configuración para guardar tras un breve retraso o cuando la ventana pierde el foco.

Búsqueda #

Pulsa ⇧⌘F / Ctrl+Mayús+F para buscar en todos los archivos del proyecto actual.

• Usa los botones Aa (coincidir mayúsculas y minúsculas), ab (palabra completa) y .* (expresión regular).
• Los resultados se agrupan por archivo, con colores de sintaxis y la coincidencia resaltada. Haz clic en uno para ir a él; haz clic en el nombre de un archivo para contraer sus resultados.
• Se omiten carpetas como node_modules, .git, dist, build, out, .next, .cache, __pycache__, .venv y target, así como los archivos binarios y los de más de 1 MB.
• Se muestran hasta 2000 coincidencias.

Codificaciones y finales de línea #

Los acentos, símbolos y emojis funcionan desde el primer momento. Los archivos se detectan como: UTF-8, UTF-8 con BOM, UTF-16 LE/BE, Windows-1252, ISO 8859-1 o ISO 8859-15, y se guardan de nuevo con la misma codificación.

• La codificación actual se muestra en la barra de estado. Haz clic en ella para Reabrir con codificación (si un archivo se ve ilegible) o Guardar con codificación.
• Si guardas con una codificación que no puede representar algunos caracteres, se sustituyen por ? y recibes un aviso. Guarda en UTF-8 para conservarlos.
• El final de línea (LF o CRLF) se muestra en la barra de estado. Cámbialo con Editor: Convertir finales de línea en la paleta de comandos.

Terminal #

• Abre u oculta la terminal con Ctrl+` o con el botón Terminal de la barra de estado. Se abre en la carpeta del proyecto.
• Haz clic en + junto a las pestañas de la terminal para añadir otra, y en la × de una pestaña para cerrarla.
• Cada proyecto tiene sus propias terminales; siguen funcionando cuando el panel está oculto o cuando cambias de proyecto.
• El shell es tu shell de inicio de sesión en macOS (por ejemplo zsh) y PowerShell en Windows, con UTF-8 activado.
• Arrastra el borde superior del panel para cambiar su tamaño.

Depuración (Node.js) #

El depurador integrado ejecuta archivos JavaScript (.js, .mjs, .cjs) con Node.js. Debe estar instalado Node.js.

1. Haz clic en el margen a la izquierda de un número de línea para poner un punto de interrupción (un punto rojo), o pulsa F9. Los puntos de interrupción se conservan entre sesiones.
2. Abre el archivo y pulsa F5 (o Iniciar depuración en la vista Ejecutar y depurar). El archivo se guarda antes.
3. La ejecución se detiene en el punto de interrupción y la línea se resalta. Usa la barra flotante o los atajos para continuar, pasar por alto F10, entrar F11 y salir ⇧F11.

Vista Ejecutar y depurar

• Variables: los valores del ámbito actual, desplegables para objetos y arrays.
• Inspección: haz clic en + para añadir una expresión que se reevalúa en cada pausa.
• Pila de llamadas: haz clic en un marco para ver sus variables y su código.
• Puntos de interrupción: todos los puntos; haz clic en uno para abrirlo, o en la × para quitarlo.

Consola de depuración

Muestra la salida del programa y permite evaluar expresiones. En pausa, las expresiones se ejecutan en el marco de pila seleccionado.

Vista previa de sitios web #

Haz clic en el botón del ojo, arriba a la derecha del editor (o pulsa ⇧⌘V / Ctrl+Mayús+V), para abrir una vista previa en vivo junto a tu código. El botón aparece en proyectos web y cuando hay un archivo HTML o SVG abierto.

Sitios HTML

La carpeta del proyecto se sirve en una dirección local, así que el CSS, el JavaScript, las imágenes y las fuentes se cargan con normalidad. La página se recarga al guardar y mientras escribes, incluso antes de guardar. Archivos como .git y .env nunca se sirven.

Proyectos con frameworks

Si package.json tiene un script dev, start o serve y un framework conocido (Vite, Next.js, Create React App, Vue CLI, Nuxt, Astro, Angular, Parcel, Gatsby, SvelteKit, Remix, Docusaurus…), Eclipse Code ejecuta el script en una terminal llamada servidor dev, detecta la dirección que imprime y muestra la página. Si falta node_modules, ofrece ejecutar antes npm install.

• La barra de la vista previa tiene atrás, adelante, recargar, un campo de dirección, abrir en el navegador y cerrar.
• En los servidores de desarrollo también hay botones para mostrar los registros del servidor y para detenerlo.
• Cada proyecto mantiene su propia vista previa. Los enlaces a otros sitios web se abren en tu navegador predeterminado.

Problemas y Salida #

El panel Problemas (⇧⌘M / Ctrl+Mayús+M) enumera los errores de sintaxis y las advertencias de los archivos abiertos (JavaScript, TypeScript, JSON, CSS, HTML). Haz clic en uno para ir a él. La barra de estado muestra los totales.

El panel Salida (⇧⌘U / Ctrl+Mayús+U) registra eventos como archivos guardados, carpetas abiertas, codificaciones, direcciones de servidores de desarrollo y compilaciones de actualización.

Configuración #

Abre la configuración con el icono del engranaje o con ⌘, / Ctrl+,. Está organizada en pestañas:

• Apariencia: ocho temas de color (Eclipse Dark y Light, Dracula, Monokai, Solarized Dark y Light, Nord, High Contrast). El tema se aplica al instante. El oscuro es el predeterminado.
• Idioma: English, Português, Français, Deutsch y Español, para la interfaz y los menús.
• Editor: tamaño y tipo de fuente, ajuste de línea y colores de corchetes.
• Archivos: Guardado automático (Desactivado, Tras un retraso o Al cambiar el foco).
• Terminal: tamaño de fuente.
• Atajos de teclado: consulta más abajo.

Atajos de teclado #

Los valores predeterminados siguen a Visual Studio Code. Para cambiar uno, abre Configuración → Atajos de teclado, haz clic en el lápiz junto a una acción y pulsa la nueva combinación. Si ya estaba en uso, se quita de la otra acción. Usa los botones para quitar un atajo o restablecerlo, o Restablecer todo.

General

Navegación

Ver

Depuración

Editor (Monaco)

Actualizaciones #

La aplicación instalada se compara con la carpeta del proyecto desde la que se compiló. Cuando ese código cambia, aparece un botón Actualizar en la barra de estado. Haz clic en él: la aplicación se recompila, se sustituye a sí misma y se reinicia.

• Necesita que la carpeta del código siga existiendo y que Node.js y npm estén instalados.
• Guarda primero tu trabajo; la aplicación te lo pide si hay cambios sin guardar.
• También puedes comprobarlo manualmente con Archivo → Buscar actualizaciones. Solo está disponible en la aplicación instalada, no al ejecutarla desde el código fuente.

Solución de problemas #

• macOS bloquea la aplicación o dice que está dañada: haz clic en Abrir igualmente en Ajustes del Sistema → Privacidad y seguridad, o ejecuta xattr -cr "/Applications/Eclipse Code.app" en la Terminal.
• SmartScreen de Windows bloquea el instalador: haz clic en Más información y luego en Ejecutar de todas formas.
• El depurador dice que no encuentra Node.js: instala Node.js y reinicia Eclipse Code.
• La vista previa del framework se queda vacía: abre la terminal llamada servidor dev (el botón de terminal de la barra de la vista previa) y busca errores; comprueba que se ejecutó npm install.
• Los acentos se ven mal en un archivo: haz clic en la codificación de la barra de estado y elige Reabrir con codificación.
• La búsqueda no encuentra nada en node_modules: esas carpetas se omiten a propósito.

Para restablecerlo todo, cierra la aplicación y borra su carpeta de datos: ~/Library/Application Support/Eclipse Code en macOS o %APPDATA%\Eclipse Code en Windows.