À medida que o ecossistema Svelte continua a evoluir, a equipe oficial introduziu uma nova interface de linha de comando (CLI) universal: sv. Se você ainda depende de métodos antigos para configurar seus projetos ou enfrenta dificuldades ao configurar manualmente ferramentas como Tailwind CSS ou ESLint, sv se tornará um aliado indispensável no seu fluxo de trabalho.

Este guia abrangente explorará o que é sv, suas capacidades e como utilizá-lo eficientemente para gerenciar suas aplicações Svelte.

O que é o sv?

sv é o conjunto de ferramentas de linha de comando oficial do Svelte, projetado para otimizar e simplificar a criação e manutenção de aplicativos Svelte. Enquanto ferramentas anteriores como npm create svelte@latest focavam na inicialização, sv expande essa funcionalidade, oferecendo um conjunto robusto de recursos que acompanham o projeto durante todo o seu ciclo de vida. Isso inclui desde a configuração inicial até a adição de funcionalidades, inspeção de código e migrações de versão.

Por que utilizar o sv? Principais Recursos

Os benefícios primários do sv residem na sua capacidade de padronizar e automatizar tarefas comuns de desenvolvimento. Seus usos centrais englobam:

• Inicialização Rápida: Crie a estrutura de um projeto SvelteKit em instantes, com suporte para modelos predefinidos ou importação direta de playgrounds online.
• Extensões Automatizadas (Add-ons): Uma funcionalidade revolucionária que permite adicionar e configurar ferramentas populares como Tailwind CSS, Drizzle ORM, Playwright, entre outras, com um único comando, eliminando a necessidade de edições manuais em múltiplos arquivos de configuração.
• Verificação de Qualidade do Código: Inclui verificações de tipo, detecção de CSS não utilizado e sugestões de acessibilidade (A11y).
• Migração Simplificada: Facilita a atualização de projetos existentes para versões mais recentes do Svelte 5 ou SvelteKit 2, e pode até automatizar a transição de sintaxes de código (como para o novo sistema Runes).

Guia Prático de Utilização

3.1 Como Executar

Geralmente, não é necessário instalar sv globalmente. Ele pode ser executado diretamente através do seu gerenciador de pacotes preferido.

• Com npm:``` npx sv

• Com pnpm:``` pnpx sv

  Ou

  pnpm dlx sv

• Com Bun:``` bunx sv

• Com Yarn:``` yarn dlx sv

3.2 Criação de Novos Projetos (create)

O comando sv create é o ponto de partida para um novo projeto SvelteKit.

Uso Básico:

npx sv create meu-aplicativo-svelte

Opções Avançadas:

• Especificar um modelo:``` npx sv create --template minimal npx sv create --template library

• Clonar de um Playground: Se você desenvolveu um protótipo no Playground do Svelte e deseja trazê-lo para seu ambiente local: ``` npx sv create --from-playground="https://svelte.dev/playground/..."

• Instalar plugins na criação: Adicione funcionalidades no momento da inicialização do projeto: ``` npx sv create --add tailwindcss eslint

3.3 Adicionar Funcionalidades a Projetos Existentes (add)

Este é um dos recursos mais poderosos do sv. Imagine que você tem um projeto Svelte e decide integrar o Tailwind CSS. Anteriormente, isso envolveria várias etapas menuais: instalar dependências, configruar postcss.config.js, ajustar arquivos CSS globais, etc.

Agora, basta executar:

npx sv add tailwindcss

A CLI se encarrega de instalar as dependências e ajustar automaticamente os arquivos de configuração necessários.

Plugins oficiais suportados incluem:

• UI/Estilização: tailwindcss, storybook, mdsvex (suporte a Markdown)
• Backend/Banco de Dados: drizzle (ORM), lucia (autenticação)
• Testes/Qualidade: vitest, playwright, eslint, prettier
• Outros: paraglide (internacionalização i18n), sveltekit-adapter (adaptadores de deploy)

Você pode adicionar múltiplos plugins de uma vez:

npx sv add eslint prettier vitest

3.4 Verificação de Código (check)

sv check é um wrapper para svelte-check, utilizado para identificar erros de compilação, problemas de tipo, CSS não utilizado e questões de acessibilidade.

Uso: Certifique-se de que svelte-check esteja instalado no seu projeto e execute:

npx sv check

Opções Comuns:

• --watch: Monitora alterações nos arquivos para verificações em tempo real.
• --fail-on-warnings: Útil em ambientes de CI/CD, trata avisos como erros.
• --threshold error: Exibe apenas erros, ignorando avisos.

3.5 Migração de Versão (migrate)

Este comando é vital durante grandes atualizações do Svelte (por exemplo, Svelte 4 para Svelte 5) ou ao migrar a sintaxe antiga de Stores para a nova sintaxe Runes. Ele pode automatizar grande parte do processo de refatoração.

Uso:

npx sv migrate

Ou especifique uma tarefa de migração particular:

• npx sv migrate svelte-5: Atualiza o projeto para Svelte 5 e aplica Runes.
• npx sv migrate app-state: Migra de $app/stores para $app/state.
• npx sv migrate sveltekit-2: Atualiza de SvelteKit 1 para SvelteKit 2.

Solução de Problemas Comuns

• Usuários Windows: No PowerShell, sv pode ser um alias para Set-Variable, causando conflitos.
  • Solução: Usar npx sv geralmente evita o problema. Se sv for instalado diretamente, execute o comando completo ou use um terminal diferente como Git Bash ou CMD.
• npx sv create não responde: Isso pode ocorrer com versões em cache do npm. Tente limpar o cache do npm ou garantir que você está usando a versão mais recente do npx.

A CLI sv represanta um avanço significativo nos esforços da equipe Svelte para aprimorar a experiência do desenvolvedor (DX). Ela transcende a função de um mero inicializador de projetos, atuando como um integrador que conecta os diversos componentes do ecossistema Svelte, desde ORMs e estilos até testes e implantação. Ao iniciar um novo projeto ou integrar novas ferramentas, considere utilizar npx sv para otimizar seu processo de desenvolvimento.