Documentation

Installation #

Download the installer for your system from the Downloads page.

macOS

1. Open the downloaded .dmg and drag Eclipse Code to Applications.
2. The first time, macOS blocks the app because Apple has not notarized it yet. Open System Settings → Privacy & Security, scroll down and click Open Anyway (on older macOS versions, right-click the app and choose Open).
3. If macOS still says the app is damaged, run this command in the Terminal:

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

Windows

1. Run the downloaded .exe and follow the steps. You can choose the install folder.
2. If SmartScreen appears, click More info and then Run anyway (the app is not signed yet).

Requirements

• macOS 12 or later, or Windows 10 or later (64-bit).
• To debug, Node.js must be installed.
• To preview framework projects (Vite, Next.js…), Node.js and npm must be installed.

First steps #

1. Open a folder with File → Open Folder (⌘K ⌘O / Ctrl+K Ctrl+O) or the + button in the top bar.
2. Click a file in the Explorer to open it. Edit it and press ⌘S / Ctrl+S to save.
3. Press ⇧⌘P / Ctrl+Shift+P to open the command palette, and ⌘P / Ctrl+P to jump to any file by name.

The interface #

• Project bar (top): one tab per project. The + button opens another folder in a new tab.
• Activity bar (left): Explorer, Search, Run and Debug, Terminal, and Settings (gear).
• Sidebar: the file explorer, search results or the debugger views.
• Editor: file tabs on top. The eye button at the top right opens the website preview.
• Bottom panel: Problems, Output, Debug Console and Terminal.
• Status bar: terminal and problems counters, current folder, cursor position, indentation, encoding, line ending, language and the Update button.

Projects and tabs #

Each project is a folder with its own open files, explorer, terminals and preview. Switch between them without opening a second window.

• Open another folder in a new tab with ⇧⌘N / Ctrl+Shift+N or the + button. Opening a folder that is already open just switches to it.
• Switch with a click, or with ⇧⌘] / ⇧⌘[ (Ctrl+Shift+PageDown/Up on Windows).
• Close a project with its × or ⇧⌘W / Ctrl+Shift+W. You are asked to save unsaved changes, and its terminals are closed.
• A dot on a project tab means it has unsaved files.

Editing #

The editor is Monaco, the same engine as Visual Studio Code, so its editing shortcuts work the same way.

• Syntax highlighting for dozens of languages, code completion for JavaScript, TypeScript, JSON, CSS and HTML, colored bracket pairs and a minimap.
• Multiple cursors, move/copy lines, comment toggling, find and replace (see Keyboard shortcuts).
• Format a document with Editor: Format Document in the command palette.
• A dot on a file tab means unsaved changes. ⇧⌘T / Ctrl+Shift+T reopens the last closed tab.
• If a file changes on disk, it is reloaded when you return to the app (unless you have unsaved edits in it).
• Binary files and files larger than 5 MB are not opened in the editor.

Turn on Auto Save in the settings to save automatically after a short delay or when the window loses focus.

Search #

Press ⇧⌘F / Ctrl+Shift+F to search all files in the current project.

• Use the Aa (match case), ab (whole word) and .* (regular expression) buttons.
• Results are grouped by file, with syntax colors and the match highlighted. Click one to jump to it; click a file name to collapse its results.
• Folders such as node_modules, .git, dist, build, out, .next, .cache, __pycache__, .venv and target are skipped, as are binary files and files over 1 MB.
• Up to 2000 matches are shown.

Encodings and line endings #

Accents, symbols and emoji work out of the box. Files are detected as one of: UTF-8, UTF-8 with BOM, UTF-16 LE/BE, Windows-1252, ISO 8859-1 or ISO 8859-15, and are saved back in the same encoding.

• The current encoding is shown in the status bar. Click it to Reopen with Encoding (if a file looks garbled) or Save with Encoding.
• If you save in an encoding that cannot represent some characters, they are replaced by ? and you get a warning. Save as UTF-8 to keep them.
• The line ending (LF or CRLF) is shown in the status bar. Change it with Editor: Convert Line Endings in the command palette.

Terminal #

• Open or hide the terminal with Ctrl+` or the Terminal button in the status bar. It opens in the project folder.
• Click + next to the terminal tabs to add another terminal, and the × on a tab to close it.
• Each project has its own terminals; they keep running when the panel is hidden or when you switch project.
• The shell is your login shell on macOS (for example zsh) and PowerShell on Windows, with UTF-8 enabled.
• Drag the top edge of the panel to resize it.

Debugging (Node.js) #

The built-in debugger runs JavaScript files (.js, .mjs, .cjs) with Node.js. Node.js must be installed.

1. Click in the margin to the left of a line number to set a breakpoint (a red dot), or press F9. Breakpoints are kept between sessions.
2. Open the file and press F5 (or Start Debugging in the Run and Debug view). The file is saved first.
3. Execution stops at the breakpoint and the line is highlighted. Use the floating toolbar or the shortcuts to continue, step over F10, step into F11 and step out ⇧F11.

Run and Debug view

• Variables: the values in scope, expandable for objects and arrays.
• Watch: click + to add an expression that is re-evaluated at every pause.
• Call stack: click a frame to see its variables and code.
• Breakpoints: all breakpoints; click one to open it, or the × to remove it.

Debug console

Shows the program output and lets you evaluate expressions. While paused, expressions run in the selected stack frame.

Website preview #

Click the eye button at the top right of the editor (or press ⇧⌘V / Ctrl+Shift+V) to open a live preview next to your code. The button appears for web projects and when an HTML or SVG file is open.

HTML sites

The project folder is served on a local address, so CSS, JavaScript, images and fonts load normally. The page reloads when you save and as you type, even before saving. Files such as .git and .env are never served.

Framework projects

If package.json has a dev, start or serve script and a known framework (Vite, Next.js, Create React App, Vue CLI, Nuxt, Astro, Angular, Parcel, Gatsby, SvelteKit, Remix, Docusaurus…), Eclipse Code runs the script in a terminal called dev server, detects the address it prints and shows the page. If node_modules is missing, it offers to run npm install first.

• The preview bar has back, forward, reload, an address field, open-in-browser and close buttons.
• For dev servers there are also buttons to show the server logs and to stop the server.
• Each project keeps its own preview. Links to other websites open in your default browser.

Problems and Output #

The Problems panel (⇧⌘M / Ctrl+Shift+M) lists syntax errors and warnings of the open files (JavaScript, TypeScript, JSON, CSS, HTML). Click one to jump to it. The status bar shows the totals.

The Output panel (⇧⌘U / Ctrl+Shift+U) logs events such as saved files, opened folders, encodings, dev server addresses and update builds.

Settings #

Open the settings with the gear icon or ⌘, / Ctrl+,. They are organized in tabs:

• Appearance: eight color themes (Eclipse Dark and Light, Dracula, Monokai, Solarized Dark and Light, Nord, High Contrast). The theme is applied immediately. Dark is the default.
• Language: English, Português, Français, Deutsch and Español, for the interface and the menus.
• Editor: font size, font family, word wrap and bracket colors.
• Files: Auto Save (Off, After Delay or On Focus Change).
• Terminal: font size.
• Keyboard Shortcuts: see below.

Keyboard shortcuts #

The defaults follow Visual Studio Code. To change one, open Settings → Keyboard Shortcuts, click the pencil next to an action and press the new combination. If it was already used, it is removed from the other action. Use the buttons to remove a shortcut or reset it, or Reset All.

General

Navigation

View

Debugging

Editor (Monaco)

Updates #

The installed app compares itself with the project folder it was built from. When that code changes, an Update button appears in the status bar. Click it: the app rebuilds, replaces itself and restarts.

• It needs the source folder to still exist, and Node.js and npm to be installed.
• Save your work first; the app asks you to if there are unsaved changes.
• You can also check manually with File → Check for Updates. This is only available in the installed app, not when running from source.

Troubleshooting #

• macOS blocks the app or says it is damaged: click Open Anyway in System Settings → Privacy & Security, or run xattr -cr "/Applications/Eclipse Code.app" in the Terminal.
• Windows SmartScreen blocks the installer: click More info, then Run anyway.
• The debugger says Node.js was not found: install Node.js and restart Eclipse Code.
• The framework preview stays empty: open the terminal called dev server (the terminal button in the preview bar) and check for errors; make sure npm install ran.
• Accents look wrong in a file: click the encoding in the status bar and choose Reopen with Encoding.
• Search finds nothing in node_modules: those folders are skipped on purpose.

To reset everything, quit the app and delete its data folder: ~/Library/Application Support/Eclipse Code on macOS, or %APPDATA%\Eclipse Code on Windows.