Documentação

Instalação #

Descarregue o instalador para o seu sistema na página Descarregamentos.

macOS

1. Abra o .dmg descarregado e arraste o Eclipse Code para Aplicações.
2. Na primeira vez, o macOS bloqueia a aplicação porque a Apple ainda não a notarizou. Abra Definições do Sistema → Privacidade e Segurança, desça e clique em Abrir Mesmo Assim (em versões mais antigas do macOS, clique com o botão direito na aplicação e escolha Abrir).
3. Se o macOS continuar a dizer que a aplicação está danificada, execute este comando no Terminal:

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

Windows

1. Execute o .exe descarregado e siga os passos. Pode escolher a pasta de instalação.
2. Se aparecer o SmartScreen, clique em Mais informações e depois em Executar mesmo assim (a aplicação ainda não está assinada).

Requisitos

• macOS 12 ou posterior, ou Windows 10 ou posterior (64 bits).
• Para depurar, é preciso ter o Node.js instalado.
• Para pré-visualizar projetos com frameworks (Vite, Next.js…), são precisos o Node.js e o npm.

Primeiros passos #

1. Abra uma pasta com Ficheiro → Abrir Pasta (⌘K ⌘O / Ctrl+K Ctrl+O) ou com o botão + da barra superior.
2. Clique num ficheiro do Explorador para o abrir. Edite-o e prima ⌘S / Ctrl+S para guardar.
3. Prima ⇧⌘P / Ctrl+Shift+P para abrir a paleta de comandos e ⌘P / Ctrl+P para saltar para qualquer ficheiro pelo nome.

A interface #

• Barra de projetos (topo): um separador por projeto. O botão + abre outra pasta num novo separador.
• Barra de atividades (esquerda): Explorador, Procurar, Executar e Depurar, Terminal e Definições (engrenagem).
• Barra lateral: o explorador de ficheiros, os resultados da pesquisa ou as vistas do depurador.
• Editor: separadores de ficheiros no topo. O botão do olho, em cima à direita, abre a pré-visualização do website.
• Painel inferior: Problemas, Saída, Consola de Depuração e Terminal.
• Barra de estado: contadores do terminal e dos problemas, pasta atual, posição do cursor, indentação, codificação, fim de linha, linguagem e o botão Atualizar.

Projetos e separadores #

Cada projeto é uma pasta com os seus próprios ficheiros abertos, explorador, terminais e pré-visualização. Alterne entre eles sem abrir uma segunda janela.

• Abra outra pasta num novo separador com ⇧⌘N / Ctrl+Shift+N ou com o botão +. Abrir uma pasta que já está aberta limita-se a mudar para ela.
• Mude com um clique, ou com ⇧⌘] / ⇧⌘[ (Ctrl+Shift+PageDown/Up no Windows).
• Feche um projeto com o seu × ou com ⇧⌘W / Ctrl+Shift+W. É-lhe perguntado se quer guardar as alterações e os terminais do projeto são fechados.
• Um ponto no separador de um projeto significa que tem ficheiros por guardar.

Edição #

O editor é o Monaco, o mesmo motor do Visual Studio Code, por isso os atalhos de edição funcionam da mesma forma.

• Realce de sintaxe para dezenas de linguagens, autocompletar para JavaScript, TypeScript, JSON, CSS e HTML, pares de parênteses coloridos e minimapa.
• Vários cursores, mover/copiar linhas, comentar, procurar e substituir (veja Atalhos de teclado).
• Formate um documento com Editor: Formatar Documento na paleta de comandos.
• Um ponto no separador de um ficheiro significa alterações por guardar. ⇧⌘T / Ctrl+Shift+T reabre o último separador fechado.
• Se um ficheiro mudar no disco, é recarregado quando voltar à aplicação (a menos que tenha alterações por guardar nele).
• Ficheiros binários e ficheiros com mais de 5 MB não são abertos no editor.

Ative o Guardar Automaticamente nas definições para guardar após um breve atraso ou quando a janela perde o foco.

Pesquisa #

Prima ⇧⌘F / Ctrl+Shift+F para procurar em todos os ficheiros do projeto atual.

• Use os botões Aa (distinguir maiúsculas), ab (palavra inteira) e .* (expressão regular).
• Os resultados são agrupados por ficheiro, com cores de sintaxe e a ocorrência realçada. Clique num para saltar para ele; clique no nome de um ficheiro para recolher os seus resultados.
• Pastas como node_modules, .git, dist, build, out, .next, .cache, __pycache__, .venv e target são ignoradas, tal como ficheiros binários e ficheiros com mais de 1 MB.
• São mostradas até 2000 ocorrências.

Codificações e fins de linha #

Acentos, símbolos e emojis funcionam logo. Os ficheiros são detetados como: UTF-8, UTF-8 com BOM, UTF-16 LE/BE, Windows-1252, ISO 8859-1 ou ISO 8859-15, e são guardados na mesma codificação.

• A codificação atual aparece na barra de estado. Clique nela para Reabrir com Codificação (se um ficheiro parecer ilegível) ou Guardar com Codificação.
• Se guardar numa codificação que não representa alguns carateres, estes são substituídos por ? e recebe um aviso. Guarde em UTF-8 para os manter.
• O fim de linha (LF ou CRLF) aparece na barra de estado. Altere-o com Editor: Converter Fim de Linha na paleta de comandos.

Terminal #

• Abra ou oculte o terminal com Ctrl+` ou com o botão Terminal da barra de estado. Abre na pasta do projeto.
• Clique em + junto aos separadores do terminal para adicionar outro terminal, e no × de um separador para o fechar.
• Cada projeto tem os seus terminais; continuam a correr quando o painel está oculto ou quando muda de projeto.
• A shell é a sua shell de início de sessão no macOS (por exemplo zsh) e o PowerShell no Windows, com UTF-8 ativado.
• Arraste o limite superior do painel para o redimensionar.

Depuração (Node.js) #

O depurador integrado executa ficheiros JavaScript (.js, .mjs, .cjs) com o Node.js. O Node.js tem de estar instalado.

1. Clique na margem à esquerda do número de uma linha para definir um breakpoint (um ponto vermelho), ou prima F9. Os breakpoints são mantidos entre sessões.
2. Abra o ficheiro e prima F5 (ou Iniciar Depuração na vista Executar e Depurar). O ficheiro é guardado primeiro.
3. A execução pára no breakpoint e a linha fica realçada. Use a barra flutuante ou os atalhos para continuar, passar por cima F10, entrar F11 e sair ⇧F11.

Vista Executar e Depurar

• Variáveis: os valores no âmbito atual, expansíveis para objetos e listas.
• Expressões: clique em + para adicionar uma expressão que é reavaliada em cada pausa.
• Pilha de chamadas: clique numa chamada para ver as suas variáveis e o código.
• Breakpoints: todos os breakpoints; clique num para o abrir, ou no × para o remover.

Consola de depuração

Mostra a saída do programa e permite avaliar expressões. Em pausa, as expressões correm na chamada selecionada da pilha.

Pré-visualização de websites #

Clique no botão do olho, em cima à direita do editor (ou prima ⇧⌘V / Ctrl+Shift+V), para abrir uma pré-visualização em direto ao lado do código. O botão aparece em projetos web e quando está aberto um ficheiro HTML ou SVG.

Sites HTML

A pasta do projeto é servida num endereço local, por isso o CSS, o JavaScript, as imagens e os tipos de letra carregam normalmente. A página recarrega quando guarda e enquanto escreve, mesmo antes de guardar. Ficheiros como .git e .env nunca são servidos.

Projetos com frameworks

Se o package.json tiver um script dev, start ou serve e uma framework conhecida (Vite, Next.js, Create React App, Vue CLI, Nuxt, Astro, Angular, Parcel, Gatsby, SvelteKit, Remix, Docusaurus…), o Eclipse Code executa o script num terminal chamado servidor dev, deteta o endereço que este imprime e mostra a página. Se faltar a pasta node_modules, oferece-se para executar primeiro npm install.

• A barra da pré-visualização tem recuar, avançar, recarregar, um campo de endereço, abrir no browser e fechar.
• Nos servidores de desenvolvimento há ainda botões para mostrar os registos do servidor e para o parar.
• Cada projeto mantém a sua própria pré-visualização. Os links para outros websites abrem no seu browser predefinido.

Problemas e Saída #

O painel Problemas (⇧⌘M / Ctrl+Shift+M) lista os erros de sintaxe e avisos dos ficheiros abertos (JavaScript, TypeScript, JSON, CSS, HTML). Clique num para saltar para ele. A barra de estado mostra os totais.

O painel Saída (⇧⌘U / Ctrl+Shift+U) regista eventos como ficheiros guardados, pastas abertas, codificações, endereços de servidores de desenvolvimento e compilações de atualização.

Definições #

Abra as definições com o ícone da engrenagem ou com ⌘, / Ctrl+,. Estão organizadas em separadores:

• Aparência: oito temas de cor (Eclipse Dark e Light, Dracula, Monokai, Solarized Dark e Light, Nord, High Contrast). O tema é aplicado de imediato. O escuro é o predefinido.
• Idioma: English, Português, Français, Deutsch e Español, para a interface e os menus.
• Editor: tamanho e tipo de letra, quebra de linha e cores dos parênteses.
• Ficheiros: Guardar Automaticamente (Desligado, Após um Atraso ou Ao Perder o Foco).
• Terminal: tamanho da letra.
• Atalhos de Teclado: veja abaixo.

Atalhos de teclado #

Os atalhos predefinidos seguem o Visual Studio Code. Para alterar um, abra Definições → Atalhos de Teclado, clique no lápis junto a uma ação e prima a nova combinação. Se já estava em uso, é retirada da outra ação. Use os botões para remover um atalho ou repô-lo, ou Repor Tudo.

Geral

Navegação

Ver

Depuração

Editor (Monaco)

Atualizações #

A aplicação instalada compara-se com a pasta do projeto a partir da qual foi compilada. Quando esse código muda, aparece um botão Atualizar na barra de estado. Clique nele: a aplicação recompila-se, substitui-se a si própria e reinicia.

• Precisa de a pasta do código ainda existir e de ter o Node.js e o npm instalados.
• Guarde primeiro o seu trabalho; a aplicação pede-lhe que o faça se houver alterações por guardar.
• Também pode verificar manualmente com Ficheiro → Procurar Atualizações. Só está disponível na aplicação instalada, não quando é executada a partir do código.

Resolução de problemas #

• O macOS bloqueia a aplicação ou diz que está danificada: clique em Abrir Mesmo Assim em Definições do Sistema → Privacidade e Segurança, ou execute xattr -cr "/Applications/Eclipse Code.app" no Terminal.
• O SmartScreen do Windows bloqueia o instalador: clique em Mais informações e depois em Executar mesmo assim.
• O depurador diz que não encontra o Node.js: instale o Node.js e reinicie o Eclipse Code.
• A pré-visualização da framework fica vazia: abra o terminal chamado servidor dev (o botão de terminal na barra da pré-visualização) e procure erros; confirme que o npm install foi executado.
• Os acentos aparecem mal num ficheiro: clique na codificação na barra de estado e escolha Reabrir com Codificação.
• A pesquisa não encontra nada em node_modules: essas pastas são ignoradas de propósito.

Para repor tudo, feche a aplicação e apague a sua pasta de dados: ~/Library/Application Support/Eclipse Code no macOS ou %APPDATA%\Eclipse Code no Windows.