Configurando o ambiente: Node.js, npm e VS Code

1. Por que configurar um ambiente de desenvolvimento?

Antes de escrever a primeira linha de código JavaScript para Node.js ou React, é fundamental estabelecer um ambiente de desenvolvimento padronizado. Um ambiente bem configurado elimina dores de cabeça com dependências quebradas, versões incompatíveis e erros misteriosos que consomem horas de debugging.

Ambiente de desenvolvimento vs produção: No desenvolvimento, usamos ferramentas como hot-reload, depuradores e logs detalhados. Em produção, priorizamos performance, segurança e estabilidade. Configurar corretamente o ambiente local é o primeiro passo para garantir que seu código funcione de forma previsível quando for para o ar.

Nosso stack será composto por três ferramentas principais:
- Node.js: runtime JavaScript que permite executar código fora do navegador, essencial para React (Next.js, Vite) e para ferramentas de build
- npm: gerenciador de pacotes que baixa e gerencia bibliotecas e frameworks
- VS Code: editor de código leve, gratuito e altamente extensível

2. Instalando o Node.js e o npm

Acesse o site oficial nodejs.org e baixe a versão LTS (Long Term Support). A versão LTS é recomendada para a maioria dos projetos por ser mais estável. A versão "Current" traz as features mais recentes, mas pode conter instabilidades.

O instalador inclui tanto o Node.js quanto o npm. Após a instalação, verifique se tudo funcionou:

// No terminal:
// node --version
// npm --version

Exemplo de saída esperada:

v18.17.1
9.6.7

O Node.js já vem com recursos nativos poderosos:
- REPL (Read-Eval-Print-Loop): digite node no terminal para abrir um ambiente interativo
- Módulos nativos: fs (sistema de arquivos), http (servidores), path (manipulação de caminhos)
- npm incluso: sem necessidade de instalação separada

3. Conhecendo o npm (Node Package Manager)

O npm é o maior repositório de pacotes JavaScript do mundo. Com ele, você pode instalar desde pequenas bibliotecas utilitárias até frameworks completos como React.

Iniciando um projeto

Crie uma pasta e execute:

npm init

O npm fará perguntas interativas. Para pular todas e usar valores padrão:

npm init -y

Isso gera um arquivo package.json:

{
  "name": "meu-projeto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

O package.json é o coração do projeto: ele lista dependências, scripts e metadados.

Instalando pacotes

  • Local (projeto específico): npm install react
  • Global (para toda a máquina): npm install -g nodemon

Pacotes locais ficam na pasta node_modules/ e são listados no package.json. Pacotes globais são úteis para ferramentas de linha de comando.

4. Instalando e configurando o VS Code

Baixe o Visual Studio Code em code.visualstudio.com. A instalação é simples: próximo, próximo, finalizar.

Configurações essenciais

Abra as configurações (Ctrl+,) e ajuste:

  • Tema: Procure por "Color Theme" e escolha um de sua preferência (Dark+ é popular)
  • Fonte: "Editor: Font Size" para 14 ou 16, e "Editor: Font Family" para 'Fira Code', 'Cascadia Code', monospace
  • Terminal integrado: Ctrl+' abre o terminal dentro do próprio VS Code

Atalhos de produtividade

Atalho Função
Ctrl+P Abrir arquivo rapidamente
Ctrl+Shift+P Paleta de comandos
Ctrl+D Selecionar próxima ocorrência da palavra
Alt+↑/↓ Mover linha para cima/baixo
Ctrl+` Abrir/fechar terminal

5. Extensões indispensáveis para JS/Node/React

No marketplace de extensões (Ctrl+Shift+X), instale:

ESLint e Prettier

// ESLint: análise estática de código (encontra erros)
// Prettier: formatador automático de código

Configure o Prettier para formatar ao salvar:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Live Server e Node.js Exec

  • Live Server: servidor local com recarregamento automático para HTML/CSS/JS
  • Node.js Exec: execute arquivos Node rapidamente com F8

Extensões para React

  • ES7+ React/Redux/React-Native snippets: atalhos para componentes funcionais, hooks e mais
  • Simple React Snippets: complemento com snippets adicionais

6. Criando e testando seu primeiro projeto

Vamos criar um projeto prático para testar o ambiente:

// 1. Crie uma pasta: mkdir meu-primeiro-projeto && cd meu-primeiro-projeto
// 2. Inicialize: npm init -y
// 3. Crie o arquivo index.js

// index.js
const saudacao = (nome) => {
  return `Olá, ${nome}! Bem-vindo ao Node.js!`;
};

console.log(saudacao('Desenvolvedor'));
console.log('Versão do Node:', process.version);
console.log('Ambiente:', process.env.NODE_ENV || 'desenvolvimento');

Execute com:

node index.js

Saída esperada:

Olá, Desenvolvedor! Bem-vindo ao Node.js!
Versão do Node: v18.17.1
Ambiente: desenvolvimento

Diferença entre rodar JS no navegador vs Node.js:

Característica Navegador Node.js
Objeto global window global
DOM Disponível Indisponível
Módulos ES Modules (import) CommonJS (require) + ES Modules
Acesso sistema Restrito Completo (arquivos, rede)

7. Debugging básico no VS Code

O depurador integrado do VS Code é uma ferramenta poderosa.

Configurando para Node.js

  1. Clique no ícone de "Run and Debug" (Ctrl+Shift+D)
  2. Clique em "create a launch.json file"
  3. Selecione "Node.js"

O arquivo .vscode/launch.json será criado:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Executar programa",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

Usando breakpoints

Adicione breakpoints clicando na margem esquerda do código (ao lado dos números de linha). Execute com F5. O código pausará nos breakpoints, permitindo:

  • Inspecionar variáveis no painel "VARIABLES"
  • Usar o console do debug para executar expressões
  • Avançar linha a linha (F10) ou entrar em funções (F11)

Para React

Para depurar componentes React, instale a extensão React Developer Tools no navegador. No VS Code, use o debugger do Chrome ou Edge integrado.

8. Próximos passos e boas práticas

Versionamento com Git

git init

Crie um arquivo .gitignore:

node_modules/
.env
dist/
build/
*.log
.DS_Store

Organização de pastas

meu-projeto/
├── src/           # Código fonte
│   ├── components/
│   ├── pages/
│   └── utils/
├── public/        # Arquivos estáticos
├── node_modules/  # Dependências (não versionar)
├── package.json
└── .gitignore

Boas práticas

  • Use npm audit regularmente para verificar vulnerabilidades
  • Prefira npm ci em ambientes de CI/CD (instala exatamente do package-lock.json)
  • Mantenha o Node.js atualizado com a versão LTS mais recente
  • Configure o ESLint + Prettier desde o início do projeto

Referências