Configuração VS Code para

Desenvolvimento JavaScript
Este guia completo contém tudo o que você precisa para transformar seu Visual Studio
Code em uma verdadeira máquina de produtividade para desenvolvimento Web e
Mobile. Vamos configurar extensões essenciais, atalhos poderosos, estrutura de
projetos profissional e otimizações que vão acelerar seu fluxo de trabalho diário.
Extensões Essenciais: Produtividade e Código
Abra a aba de extensões com o atalho Ctrl + Shift + X e instale estas ferramentas fundamentais que vão transformar sua experiência de
desenvolvimento:

ES7+ React/Redux/React-Native Prettier – Code Formatter Auto Close Tag

snippets Formata automaticamente a indentação e o Fecha automaticamente as tags JSX.
Gera componentes inteiros, imports e estilo do código ao salvar. Nunca mais se Digitou <View> e ele cria </View>
hooks com atalhos simples. Digite apenas preocupe com espaçamento ou quebras de instantaneamente, economizando tempo e
"rnfe" e veja um componente completo linha inconsistentes. evitando erros.
aparecer instantaneamente na tela.

Path Intellisense Error Lens

Completa automaticamente o nome dos arquivos enquanto você Exibe erros e avisos diretamente na linha do código em vermelho.
digita imports. Perfeito para navegar em projetos com muitas pastas Ótimo para aprender, pois você vê imediatamente o que precisa
e arquivos. corrigir.
Extensões Essenciais: Visual e
Interface
Continue na aba de extensões e instale estas ferramentas que vão melhorar
significativamente a experiência visual do seu editor:

Material Icon Theme Omni Theme

Adiciona ícones intuitivos e O tema escuro oficial da Rocketseat
coloridos nas pastas e arquivos do baseado no Dracula. Design
explorador. Cada tipo de arquivo confortável para os olhos com
ganha um ícone único, facilitando a cores vibrantes e legíveis, perfeito
navegação visual no projeto. para longas sessões de código.
Cheat Sheet: Atalhos e Snippets Poderosos
Não escreva tudo do zero! Use os snippets da extensão ES7+ para acelerar drasticamente seu desenvolvimento. Estes atalhos vão economizar horas
de digitação repetitiva:

Criação de Componentes Hooks do React

rnfe Componente Funcional pronto para exportar usf Cria um useState completo
(o mais usado!)
uef Cria um useEffect com dependências
rnfc Componente Funcional com estrutura de
estilos
Dica Pro: Memorize apenas 3 snippets por semana. Em um
rnfes Componente Funcional com StyleSheet já mês você estará digitando componentes em segundos!
importado

Imports Rápidos

imrn import { View, Text } from 'react-native';

imr import React from 'react';

clg [Link](object) para debugar

Arquitetura de Pastas Profissional
Uma estrutura bem organizada é a base de projetos escaláveis. Neste formato, mantemos a raiz limpa e organizamos todo o código fonte dentro da
pasta src. O [Link] serve apenas como ponto de entrada para carregar configurações globais.

Por que essa estrutura?

MeuProjeto/
Separação clara entre código e configuração ├── [Link] (Ponto de Entrada)
Fácil navegação mesmo em projetos grandes ├── [Link]
├── [Link]
Componentização reutilizável
└── src/
Escalabilidade para times maiores
├── assets/ (Imagens, fontes, Lottie)
├── components/ (Reutilizáveis)
├── config/ (Reactotron, etc)
├── constants/ (Cores, métricas)
├── contexts/ (Estados globais)
├── hooks/ (useAuth, useLocation)
├── routes/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── screens/
│ └── Home/
│ ├── [Link]
│ └── [Link]
├── services/ (API - Axios)
├── theme/ (Styled Components)
└── utils/ (Formatações)
O Arquivo Mágico: [Link]
Esta configuração otimizada une inteligência de autocomplete com visual limpo. Vamos configurar o arquivo de preferências do VS Code para
máxima produtividade:

01 02 03

Abrir configurações Substituir conteúdo Salvar e reiniciar

Pressione Ctrl + Shift + P e digite "Open User Cole a configuração completa fornecida no Salve o arquivo e reinicie o VS Code para aplicar
Settings (JSON)" código abaixo todas as mudanças

A configuração completa inclui: formatação automática com Prettier, autocomplete inteligente para React e JavaScript, tema visual otimizado,
sugestões de código aprimoradas e desativação de elementos distrativos da interface.

Importante: Esta configuração ativa formatação automática ao salvar, fonte Fira Code com ligatures, e remove sugestões de IA que podem
atrapalhar o aprendizado.
Guia de Inicialização: React Native
com Expo
Este guia completo cobre desde a instalação das ferramentas básicas até a execução
bem-sucedida do seu primeiro aplicativo em Android, iOS e Web. Vamos passar por
cada etapa com clareza e precisão.
Pré-requisito 1: [Link] (LTS)

O React Native precisa do [Link] para rodar o ambiente de desenvolvimento e

gerenciar pacotes do projeto.

Instalação Verificação
Acesse [Link] e baixe a versão Após instalar, abra o terminal e digite
LTS (Long Term Support) - sempre a node -v. Se aparecer um número de
versão recomendada e mais estável. versão, está tudo funcionando
corretamente!
Pré-requisito 2: Git

O Git é essencial para gerenciar versões do seu código e baixar pacotes de bibliotecas
externas que o projeto vai utilizar.

Download Instalação
Acesse [Link] e baixe a versão Durante a instalação, pode clicar em
mais recente para seu sistema "Next" em todas as opções. A
operacional. configuração padrão funciona
perfeitamente.
Pré-requisito 3: App Expo Go no Celular
O Expo Go permite testar seu aplicativo diretamente no celular sem precisar configurar emuladores pesados que consomem muitos recursos do
computador.

Android iOS
Abra a Play Store no seu celular Android, busque por "Expo Go" e instale Abra a App Store no seu iPhone ou iPad, busque por "Expo Go" e faça o
o aplicativo oficial. download do aplicativo.
Criando Seu Primeiro Projeto
Agora vamos criar a estrutura do aplicativo em JavaScript puro, sem TypeScript, para facilitar o aprendizado inicial:

Criar pasta Abrir terminal

Crie uma pasta no computador para seus projetos (ex: MeusProjetos) Clique com botão direito e selecione "Open in Terminal"

Executar comando Entrar no projeto

Digite: npx create-expo-app meu-primeiro-app --template blank Após a instalação: cd meu-primeiro-app e depois code .

O que significa cada parte: create-expo-app cria a estrutura, meu-primeiro-app é o nome (sempre minúsculo com hífens), e --template
blank escolhe o modelo sem TypeScript.
Rodando o Projeto: Escolha Sua Plataforma
Com o VS Code aberto no projeto, abra o Terminal Integrado (Ctrl + ') e execute npx expo start. Um QR Code aparecerá. Agora escolha onde rodar:

Celular Físico (Recomendado)

Conecte PC e celular no mesmo Wi-Fi. Abra o Expo Go e escaneie o QR Code. Se der erro, use: npx expo start --tunnel

Emulador Android
Instale o Android Studio, abra um dispositivo virtual no "Virtual Device Manager" e pressione a tecla a no terminal do Expo.

Simulador iOS (Mac Only)

Apenas em Mac. Instale o Xcode pela App Store e pressione a tecla i no terminal do Expo.

Navegador Web
Pressione a tecla w no terminal. Se pedir dependências web, aceite com Y ou rode: npx expo install react-dom react-native-web
Solução de Problemas Comuns
Encontrou algum erro? Aqui estão as soluções para os problemas mais frequentes que desenvolvedores iniciantes enfrentam:

Network response timed out Unauthorized Access (Windows) System limit for file watchers
Causa: PC e celular em redes diferentes Causa: Bloqueio de scripts do PowerShell
(Linux)
(PC no cabo, celular no 4G) Causa: Projeto com muitos arquivos
Solução: Abra PowerShell como
excede limite do sistema
Solução: Conecte ambos no mesmo Wi-Fi Administrador e rode: Set-ExecutionPolicy
ou use npx expo start --tunnel RemoteSigned Solução: echo
[Link].max_user_watches=524288 | sudo
tee -a /etc/[Link] && sudo sysctl -p
Parabéns!
Você configurou com sucesso seu ambiente de desenvolvimento completo para React
Native. Agora você tem todas as ferramentas, extensões e conhecimento necessário
para criar aplicativos incríveis. Continue praticando, experimentando e construindo
projetos reais para solidificar seu aprendizado.

Próximos Passos Comunidade

Explore a documentação oficial do Participe de fóruns e grupos de
React Native e Expo para aprender desenvolvedores para trocar
componentes e APIs avançadas experiências e tirar dúvidas