Ferramentas do Desenvolvedor

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "files.autoSave": "onFocusChange",
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "workbench.colorTheme": "One Dark Pro"
}

! → estrutura completa do HTML5

ul>li*3 →
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

div.card>h2.card__title+p.card__text →
<div class="card">
  <h2 class="card__title"></h2>
  <p class="card__text"></p>
</div>

input[type="email"]#email.form-input →
<input type="email" id="email" class="form-input">

table>thead>tr>th*3^^tbody>tr*3>td*3 →
tabela completa com thead e 3 linhas de 3 colunas

// Muda o fundo da página inteira (teste imediato!)
document.body.style.background = 'hotpink'

// Seleciona e exibe um elemento
document.querySelector('h1')

// Inspeciona todas as propriedades de um elemento
dir(document.querySelector('h1'))

// $_ retorna o último resultado do Console
document.querySelectorAll('.card')
$_.length // → número de cards na página

// Cronometrar um bloco de código
console.time('operacao')
// ... código a medir ...
console.timeEnd('operacao') // → "operacao: 1.23ms"

// Logar um objeto formatado (muito melhor que console.log)
console.table([{nome: 'Ana', idade: 28}, {nome: 'Bruno', idade: 32}])

// Agrupar logs relacionados
console.group('Dados do usuário')
console.log('nome:', nome)
console.log('email:', email)
console.groupEnd()

# Onde estou agora? (print working directory)
pwd
# → /home/usuario/projetos

# Listar arquivos da pasta atual
ls
ls -la    # listagem detalhada, incluindo arquivos ocultos
ls -lh    # tamanhos legíveis (KB, MB)

# Navegar entre pastas (change directory)
cd projetos           # entra na pasta "projetos"
cd ..                 # sobe um nível
cd ../outro-projeto   # sobe e entra em outra pasta
cd ~                  # vai para a pasta home do usuário
cd -                  # volta para a pasta anterior

# Tab completa o nome → cd proj[Tab] → cd projetos/

# Criar pasta
mkdir meu-projeto
mkdir -p src/components/ui   # cria estrutura de pastas de uma vez

# Criar arquivo vazio
touch index.html style.css app.js

# Mostrar conteúdo de um arquivo
cat package.json

# Copiar arquivo
cp index.html backup.html
cp -r src/ src-backup/    # copia pasta inteira (-r = recursivo)

# Mover / renomear
mv arquivo.txt nova-pasta/
mv nome-antigo.js nome-novo.js

# Remover (CUIDADO — sem lixeira!)
rm arquivo.txt
rm -rf pasta/    # remove pasta e tudo dentro dela — IRREVERSÍVEL!

# Abrir a pasta atual no VS Code
code .

# Limpar a tela do terminal
clear   # ou Ctrl+L

# Buscar texto dentro de arquivos (grep)
grep "console.log" app.js
grep -r "TODO" src/           # busca recursiva em pastas
grep -rn "fetch(" src/          # -n mostra número da linha

# Histórico de comandos
history             # lista os últimos comandos
!!                  # repete o último comando
# Ctrl+R → busca no histórico enquanto você digita

# Verificar se um programa está instalado
which node          # → /usr/bin/node
which git           # → /usr/bin/git

# Ver versão de ferramentas instaladas
node --version      # → v20.11.0
npm --version       # → 10.2.4
git --version       # → git version 2.43.0

# Encadear comandos
mkdir projeto && cd projeto && git init
# && só roda o próximo se o anterior foi bem-sucedido

$ node --version
v20.11.0

$ npm --version
10.2.4

# Rodar um arquivo JavaScript no terminal
$ node app.js

# Modo interativo (REPL) — digita JS e vê o resultado
$ node
> 2 + 2
4
> 'olá'.toUpperCase()
'OLÁ'
> .exit  # ou Ctrl+C duas vezes

# Inicializar um projeto (cria o package.json)
npm init         # modo interativo com perguntas
npm init -y      # aceita tudo com valores padrão (mais rápido)

# Instalar um pacote (salva em dependencies)
npm install lodash
npm i lodash      # forma abreviada

# Instalar como dependência de desenvolvimento (devDependencies)
npm install --save-dev prettier
npm i -D prettier # forma abreviada

# Instalar globalmente (disponível em qualquer projeto)
npm install -g nodemon

# Instalar todas as dependências de um projeto existente
npm install      # lê o package.json e instala tudo

# Remover um pacote
npm uninstall lodash

# Atualizar pacotes
npm update

# Checar pacotes desatualizados
npm outdated

# Rodar um script definido no package.json
npm run dev
npm run build
npm run test

{
  "name": "meu-projeto",
  "version": "1.0.0",
  "description": "Uma descrição breve do projeto",
  "main": "index.js",

  // Scripts que você roda com "npm run nome"
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "build": "vite build",
    "test": "jest"
  },

  // Dependências de produção (vão para o servidor)
  "dependencies": {
    "express": "^4.18.2"
  },

  // Dependências apenas de desenvolvimento (não vão para produção)
  "devDependencies": {
    "nodemon": "^3.0.2",
    "prettier": "^3.2.5",
    "eslint": "^8.57.0"
  }
}

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

# Instalar globalmente
npm install -g nodemon

# Usar no lugar de "node"
nodemon app.js
# → [nodemon] starting `node app.js`
# → (você salva o arquivo...)
# → [nodemon] restarting due to changes...

# Dica: adicionar no package.json como script "dev"
# "dev": "nodemon app.js"
npm run dev

# GET simples
curl https://viacep.com.br/ws/01310-100/json/

# POST com JSON
curl -X POST https://jsonplaceholder.typicode.com/posts \
  -H "Content-Type: application/json" \
  -d '{"title": "Teste", "body": "Conteúdo", "userId": 1}'

# Com autenticação por token
curl -H "Authorization: Bearer SEU_TOKEN" https://api.exemplo.com/dados

# Salvar resposta em arquivo
curl -o resposta.json https://api.exemplo.com/dados

# Criar projeto Vite (escolha o framework na interface)
npm create vite@latest meu-projeto
cd meu-projeto
npm install
npm run dev
# → Server running at http://localhost:5173

# Criar projeto React com Vite diretamente
npm create vite@latest meu-react -- --template react

# Criar projeto vanilla JS (sem framework)
npm create vite@latest meu-vanilla -- --template vanilla