Ferramentas e Convenções do Anthony Fu

Práticas de Codificação

Organização do Código

• Responsabilidade única: Cada arquivo de código-fonte deve ter um escopo/propósito claro e focado
• Dividir arquivos grandes: Quebre arquivos quando eles se tornarem grandes ou lidarem com muitas responsabilidades
• Separação de tipos: Sempre separe tipos e interfaces em types.ts ou types/*.ts
• Extração de constantes: Mova constantes para um arquivo constants.ts dedicado

Ambiente de Execução

• Prefira código isomórfico: Escreva código agnóstico ao runtime que funcione em Node, navegador e workers sempre que possível
• Indicadores de runtime claros: Quando o código for específico de ambiente, adicione um comentário no topo do arquivo:

// @env node
// @env browser

TypeScript

• Tipos de retorno explícitos: Declare tipos de retorno explicitamente quando possível
• Evite tipos inline complexos: Extraia tipos complexos em declarações type ou interface dedicadas

Comentários

• Evite comentários desnecessários: O código deve ser autoexplicativo
• Explique o "porquê" não o "como": Comentários devem descrever a lógica ou intenção, não o que o código faz

Testes (Vitest)

• Arquivos de teste: foo.ts → foo.test.ts (mesmo diretório)
• Use a API describe/it (não test)
• Use toMatchSnapshot para saídas complexas
• Use toMatchFileSnapshot com caminho explícito para snapshots específicos de linguagem

---

Escolhas de Ferramentas

Comandos @antfu/ni

Comando	Descrição
ni	Instalar dependências
ni <pkg> / ni -D <pkg>	Adicionar dependência / dependência de desenvolvimento
nr <script>	Executar script
nu	Atualizar dependências
nun <pkg>	Desinstalar dependência
nci	Instalação limpa (pnpm i --frozen-lockfile)
nlx <pkg>	Executar pacote (npx)

Configuração TypeScript

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Configuração ESLint

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

Ao concluir tarefas, execute pnpm run lint --fix para formatar o código e corrigir o estilo de codificação.

Para opções de configuração detalhadas: antfu-eslint-config

Git Hooks

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

Catálogos pnpm

Use catálogos nomeados em pnpm-workspace.yaml para gerenciamento de versão:

Catálogo	Propósito
prod	Dependências de produção
inlined	Dependências inline do bundler
dev	Ferramentas de desenvolvimento (linter, bundler, testes)
frontend	Bibliotecas frontend

Evite o catálogo padrão. Os nomes dos catálogos podem ser ajustados conforme as necessidades do projeto.

---

Referências

Tópico	Descrição	Referência
Config ESLint	Suporte a frameworks, formatadores, sobrescrita de regras, configurações VS Code	antfu-eslint-config
Setup de Projeto	.gitignore, GitHub Actions, extensões VS Code	setting-up
Desenvolvimento de Aplicações	Convenções e padrões Vue/Nuxt/UnoCSS	app-development
Desenvolvimento de Bibliotecas	Empacotamento tsdown, publicação ESM puro	library-development
Monorepo	Workspaces pnpm, alias centralizado, Turborepo	monorepo