Seu Fluxo de Trabalho de Desenvolvimento

Construir o BookIt significa fazer centenas de pequenas alterações — editar componentes, ajustar estilos, adicionar funcionalidades. O servidor de desenvolvimento torna esse processo rápido ao exibir suas alterações instantaneamente no navegador, sem necessidade de atualização manual.

O Que Você Vai Aprender

Como iniciar e usar o servidor de desenvolvimento do SvelteKit
O que é Hot Module Replacement (HMR) e por que ele é importante
Comandos de terminal e atalhos de teclado para desenvolvimento
Como configurar seu editor para a melhor experiência

Inicie o Servidor de Desenvolvimento

Se o servidor ainda não estiver em execução a partir da Lição 1.2, inicie-o agora:

cd bookit
npm run dev

Você verá uma saída como esta:

  VITE v5.4.11  ready in 438 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Abra http://localhost:5173 no seu navegador. Mantenha tanto o editor quanto o navegador visíveis — idealmente lado a lado.

Hot Module Replacement

O servidor de desenvolvimento utiliza Hot Module Replacement (HMR). Quando você salva um arquivo, o Vite detecta a alteração e atualiza apenas aquele módulo no seu navegador — sem necessidade de recarregar a página completa.

Vamos ver em ação. Abra src/routes/+page.svelte e altere para:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>We're building BookIt!</p>

Salve o arquivo. Seu navegador atualiza instantaneamente. Sem botão de atualizar, sem espera.

Agora adicione um estilo:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>We're building BookIt!</p>

<style>
  h1 {
    color: #2563eb;
  }
</style>

Salve novamente. O título fica azul imediatamente.

Esse ciclo de feedback instantâneo é o que faz o desenvolvimento moderno parecer tão diferente do ciclo "editar, salvar, alternar para o navegador, atualizar, esperar" do passado.

Comandos do Terminal

Enquanto o servidor de desenvolvimento está em execução, você pode pressionar teclas no terminal para ações rápidas:

Tecla	Ação
`h + enter`	Exibir menu de ajuda
`r + enter`	Reiniciar o servidor
`u + enter`	Exibir URL do servidor
`o + enter`	Abrir no navegador
`c + enter`	Limpar console
`q + enter`	Sair

O mais útil é o + enter para abrir rapidamente seu aplicativo caso você tenha fechado a aba do navegador.

Múltiplos Terminais

Você frequentemente precisará do terminal para outras tarefas enquanto o servidor de desenvolvimento está em execução — instalar pacotes, executar scripts ou usar o git. Você tem algumas opções:

Opção 1: Múltiplas abas de terminal. A maioria dos terminais suporta abas. Mantenha o servidor de desenvolvimento em uma aba e use as outras para comandos.

Opção 2: Terminal integrado do VS Code. Pressione Ctrl+` (acento grave) para abrir o painel de terminal. Clique no ícone + para adicionar mais terminais.

Opção 3: Executar em segundo plano. No Mac/Linux, adicione & para executar em segundo plano: npm run dev &. (Porém você perderá os atalhos de teclado.)

Para este curso, recomendamos manter o servidor de desenvolvimento visível para que você possa ver quaisquer mensagens de erro.

Configuração do Editor

Uma boa configuração do editor detecta erros antes mesmo de você salvar. Aqui está a configuração recomendada para o VS Code:

Instale a Extensão do Svelte

Pesquise por "Svelte for VS Code" no painel de extensões, ou instale pela linha de comando:

code --install-extension svelte.svelte-vscode

Esta extensão fornece:

Realce de sintaxe para arquivos .svelte
Autocompletar para sintaxe específica do Svelte
Verificação de erros enquanto você digita
Ir para definição de componentes e variáveis

Habilitar Formatação ao Salvar

Abra as configurações do VS Code (Cmd+, no Mac, Ctrl+, no Windows) e pesquise por "format on save". Habilite a opção.

Em seguida, pesquise por "default formatter" e defina como Prettier para uma formatação consistente.

Configurações Recomendadas

Adicione estas configurações ao seu VS Code para a melhor experiência com Svelte:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "svelte.enable-ts-plugin": true
}

Quando as Coisas Dão Errado

Às vezes o servidor de desenvolvimento fica confuso, especialmente após instalar novos pacotes ou fazer grandes alterações. Veja como corrigir problemas comuns:

Alterações Não Aparecem

Primeiro, verifique se você salvou o arquivo (procure o ponto na aba no VS Code). Se estiver salvo, tente:

Atualização forçada no navegador: Cmd+Shift+R (Mac) ou Ctrl+Shift+R (Windows)
Reiniciar o servidor de desenvolvimento: pressione r + enter no terminal, ou pare com Ctrl+C e execute npm run dev novamente

Erros de Compilação

Se você ver uma sobreposição de erro vermelha no navegador, leia a mensagem com atenção. Ela geralmente aponta para o arquivo e número de linha exatos. Corrija o erro, salve, e a sobreposição desaparece.

Porta Já em Uso

Se você ver "Port 5173 is already in use", pare o outro processo ou use uma porta diferente:

npm run dev -- --port 3000

O Ciclo de Desenvolvimento

Aqui está o fluxo de trabalho que você usará ao longo deste curso:

Edite um arquivo .svelte no seu editor
Salve o arquivo (Cmd+S ou Ctrl+S)
Veja a alteração instantaneamente no seu navegador
Repita

Sem etapa de build. Sem atualização manual. Apenas um ciclo estreito entre escrever código e ver os resultados.

Este é o ambiente que usaremos para construir cada funcionalidade do BookIt.

Resumo

O servidor de desenvolvimento do SvelteKit, alimentado pelo Vite, fornece feedback instantâneo por meio do Hot Module Replacement. Combinado com a extensão Svelte para VS Code, você tem um ambiente de desenvolvimento que detecta erros cedo e exibe as alterações imediatamente.

Principais conclusões:

npm run dev inicia o servidor de desenvolvimento
As alterações aparecem instantaneamente graças ao Hot Module Replacement
A extensão Svelte para VS Code fornece realce de sintaxe e verificação de erros
Pressione r + enter no terminal para reiniciar o servidor se necessário

Próximos Passos

Seu ambiente de desenvolvimento está pronto. Na próxima lição, Faça Sua Primeira Alteração, transformaremos a página inicial padrão na página de boas-vindas do BookIt — sua primeira contribuição real ao aplicativo.