Atividade Instalar Extensões no VS Code

Voltar para: Games com Phaser + Reactjs

0

Instalação de Extensões no Visual Studio Code para Phaser e React

🎯 Objetivo da Atividade

Capacitar o aluno a:

  • Instalar extensões no VS Code
  • Configurar o ambiente para desenvolvimento com Phaser
  • Configurar o ambiente para desenvolvimento com React
  • Entender a função básica de cada extensão instalada

🧩 Parte 1 – Instalando Extensões

🔹 Passo 1 – Abrir o VS Code

  1. Iniciar o VS Code.
  2. Localizar o menu lateral esquerdo.
  3. Clicar no ícone Extensões (ou usar o atalho Ctrl + Shift + X).

🎮 Parte 2 – Extensões para Desenvolvimento com Phaser

📌 Atividade 1: Instalar as seguintes extensões

O aluno deve pesquisar e instalar:

  1. ESLint
    → Verificação e padronização de código JavaScript.
  2. Prettier – Code Formatter
    → Formatação automática do código.
  3. Live Server
    → Executar o jogo em servidor local com atualização automática.
  4. Path Intellisense
    → Autocompletar caminhos de arquivos.
  5. JavaScript (ES6) Code Snippets
    → Auxilia na escrita rápida de estruturas JS.

📌 Atividade 2: Teste Rápido

  1. Criar uma pasta chamada phaser-projeto.
  2. Criar um arquivo index.html.
  3. Iniciar o Live Server.
  4. Verificar se o navegador abre corretamente.

⚛️ Parte 3 – Extensões para Desenvolvimento com React

📌 Atividade 3: Instalar as seguintes extensões

  1. ES7+ React/Redux Snippets
    → Criação rápida de componentes React.
  2. ESLint
    → Padronização e boas práticas.
  3. Prettier – Code Formatter
    → Formatação automática ao salvar.
  4. Auto Rename Tag
    → Renomeia tags JSX automaticamente.
  5. GitLens
    → Visualização de histórico Git.

📌 Atividade 4: Teste com Estrutura React

  1. Criar uma pasta react-projeto.
  2. Criar um arquivo App.jsx.
  3. Utilizar um snippet (ex: rafce se disponível).
  4. Verificar se o código é completado automaticamente.
  5. Salvar o arquivo e observar a formatação automática.

🛠 Parte 4 – Configuração Recomendada

O aluno deve:

  1. Abrir Configurações (Ctrl + ,)
  2. Ativar:
    • Auto Save
    • Format On Save
  3. Ajustar fonte e tema conforme preferência