Setup de Ambiente de Desenvolvimento Frontend: Guia Completo 2025

January 15, 2025 (1y ago)

Fala dev! 👋

Um ambiente de desenvolvimento bem configurado é a base para uma produtividade excepcional. As ferramentas certas podem fazer a diferença entre um projeto que flui naturalmente e um que trava a cada passo.

Neste guia completo, vou te mostrar como montar o setup perfeito para desenvolvimento frontend em 2025, com todas as ferramentas essenciais e configurações otimizadas.

🎯 Por que um bom setup importa?

Benefícios reais:

Estatísticas impressionantes:

🛠️ Ferramentas essenciais

1. Node.js e Gerenciadores de Pacotes

# Instalar Node.js (recomendado: v18+)
# Usar nvm para gerenciar versões
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
 
# Instalar versão LTS
nvm install --lts
nvm use --lts
 
# Verificar instalação
node --version
npm --version
 
# Instalar pnpm (mais rápido que npm)
npm install -g pnpm
 
# Verificar
pnpm --version

2. Editor de Código - VS Code

# Instalar VS Code
# macOS
brew install --cask visual-studio-code
 
# Linux
sudo snap install --classic code
 
# Windows
winget install Microsoft.VisualStudioCode

Extensões essenciais:

{
  "recommendations": [
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-json",
    "ms-vscode.vscode-css-peek",
    "ms-vscode.vscode-html-css-support",
    "ms-vscode.vscode-js-debug",
    "ms-vscode.vscode-react-native",
    "ms-vscode.vscode-react-snippets",
    "ms-vscode.vscode-react-typescript",
    "ms-vscode.vscode-react-typescript-snippets",
    "ms-vscode.vscode-react-typescript-snippets",
    "ms-vscode.vscode-react-typescript-snippets"
  ]
}

3. Git e GitHub

# Instalar Git
# macOS
brew install git
 
# Linux
sudo apt install git
 
# Windows
winget install Git.Git
 
# Configurar Git
git config --global user.name "Seu Nome"
git config --global user.email "seu-email@exemplo.com"
git config --global init.defaultBranch main
git config --global core.editor "code --wait"
 
# Configurar SSH (ver artigo anterior)
ssh-keygen -t ed25519 -C "seu-email@exemplo.com"

⚙️ Configurações do VS Code

1. settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "tailwindCSS.includeLanguages": {
    "typescript": "typescript",
    "typescriptreact": "typescriptreact"
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

2. keybindings.json

[
  {
    "key": "cmd+shift+p",
    "command": "workbench.action.quickOpen"
  },
  {
    "key": "cmd+shift+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "cmd+shift+f",
    "command": "workbench.action.findInFiles"
  },
  {
    "key": "cmd+shift+h",
    "command": "workbench.action.replaceInFiles"
  },
  {
    "key": "cmd+shift+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "cmd+shift+g",
    "command": "workbench.view.scm"
  },
  {
    "key": "cmd+shift+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "cmd+shift+x",
    "command": "workbench.view.extensions"
  }
]

3. snippets personalizados

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "",
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>",
      "      $4",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "React Functional Component with TypeScript"
  },
  "Next.js Page": {
    "prefix": "npage",
    "body": [
      "import { Metadata } from 'next'",
      "",
      "export const metadata: Metadata = {",
      "  title: '${1:Page Title}',",
      "  description: '${2:Page description}'",
      "}",
      "",
      "export default function ${3:PageName}() {",
      "  return (",
      "    <div>",
      "      $4",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "Next.js Page with Metadata"
  }
}

🚀 Configuração de Projeto

1. Estrutura de pastas

meu-projeto/
├── .vscode/
│   ├── settings.json
│   ├── extensions.json
│   └── launch.json
├── .github/
│   └── workflows/
│       └── ci.yml
├── src/
│   ├── app/
│   ├── components/
│   ├── lib/
│   ├── hooks/
│   ├── types/
│   └── utils/
├── public/
├── tests/
├── .env.local
├── .env.example
├── .gitignore
├── .eslintrc.json
├── .prettierrc
├── tailwind.config.js
├── tsconfig.json
├── next.config.js
├── package.json
└── README.md

2. package.json otimizado

{
  "name": "meu-projeto",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "type-check": "tsc --noEmit",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage",
    "prepare": "husky install"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "typescript": "^5.0.0"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.0.0",
    "eslint-config-next": "^14.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "husky": "^8.0.0",
    "lint-staged": "^15.0.0",
    "prettier": "^3.0.0",
    "tailwindcss": "^3.0.0",
    "vitest": "^1.0.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md}": [
      "prettier --write"
    ]
  }
}

3. Configurações de linting

// .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn",
    "prefer-const": "error",
    "no-var": "error"
  }
}
// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

🧪 Configuração de Testes

1. Vitest + Testing Library

# Instalar dependências
pnpm add -D vitest @testing-library/react @testing-library/jest-dom @vitejs/plugin-react jsdom
// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
  },
})
// src/test/setup.ts
import '@testing-library/jest-dom'

2. Scripts de teste

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage",
    "test:watch": "vitest --watch"
  }
}

🚀 CI/CD com GitHub Actions

1. Workflow básico

# .github/workflows/ci.yml
name: CI
 
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'pnpm'
          
      - name: Install dependencies
        run: pnpm install
        
      - name: Lint
        run: pnpm lint
        
      - name: Type check
        run: pnpm type-check
        
      - name: Test
        run: pnpm test:coverage
        
      - name: Build
        run: pnpm build

2. Deploy automático

# .github/workflows/deploy.yml
name: Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'pnpm'
          
      - name: Install dependencies
        run: pnpm install
        
      - name: Build
        run: pnpm build
        
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

🔧 Ferramentas adicionais

1. Husky + Lint-staged

# Instalar
pnpm add -D husky lint-staged
 
# Configurar
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

2. Commitizen

# Instalar
pnpm add -D commitizen cz-conventional-changelog
 
# Configurar
echo '{"path": "cz-conventional-changelog"}' > .czrc
// package.json
{
  "scripts": {
    "commit": "cz"
  }
}

3. Renovate (dependências)

// renovate.json
{
  "extends": ["config:base"],
  "schedule": ["before 3am on monday"],
  "packageRules": [
    {
      "matchUpdateTypes": ["minor", "patch"],
      "automerge": true
    }
  ]
}

📱 Configuração mobile

1. React Native

# Instalar CLI
npm install -g @react-native-community/cli
 
# Criar projeto
npx react-native init MeuApp

2. Expo

# Instalar CLI
npm install -g @expo/cli
 
# Criar projeto
npx create-expo-app MeuApp

✅ Checklist de Setup

Ferramentas básicas:

VS Code:

Projeto:

Testes:

CI/CD:

Qualidade:

🎯 Conclusão

Um ambiente de desenvolvimento bem configurado é o primeiro passo para uma carreira de sucesso em frontend. As ferramentas certas podem transformar sua produtividade e qualidade de código.

Principais benefícios:

Próximos passos:

  1. Configure seu ambiente hoje
  2. Automatize o máximo possível
  3. Mantenha as ferramentas atualizadas
  4. Compartilhe com sua equipe

Lembre-se: tempo investido em setup é tempo economizado no futuro! 🚀

Allisson Lima
Desenvolvedor Frontend | Especialista em DevOps e Ferramentas

LinkedIn