Publicado em: 23/06/2023

Configurando o GitHub com o VS Code - Aprenda a Criar e Conectar Seus Projetos de Programação!


Neste tutorial, vamos explorar os conceitos básicos de versionamento de código usando Git e GitHub diretamente no Visual Studio Code, sem a necessidade de comandos complexos no terminal.

Configuração Inicial

Antes de começar, é essencial:

  1. Criar uma conta no GitHub (github.com)
  2. Instalar o Git em sua máquina (git-scm.com)
  3. Configurar a integração do GitHub no VS Code

Esses passos garantem que você tenha todas as ferramentas necessárias para começar a versionar seus projetos.

Iniciando um Repositório Local

No VS Code:

  1. Abra a pasta do seu projeto
  2. Acesse a aba de controle de versão (ícone do Git na barra lateral)
  3. Clique em "Inicializar Repositório"

Isso cria um repositório Git local com um arquivo oculto .git que armazena todo o histórico de alterações.

Arquivo .gitignore

O arquivo .gitignore é crucial para:

  • Evitar versionar arquivos desnecessários (como node_modules)
  • Proteger informações sensíveis (arquivos de ambiente)
  • Manter o repositório leve e eficiente

Basta criar um arquivo .gitignore na raiz do projeto e listar os arquivos/diretórios a serem ignorados.

Trabalhando com Commits

Commits são como "fotos" do seu projeto em um momento específico:

  1. Faça alterações nos arquivos
  2. Adicione uma mensagem descritiva no VS Code
  3. Clique no ícone de "check" para confirmar o commit

Cada commit registra quem fez a alteração, quando foi feita e quais arquivos foram modificados.

Integração com GitHub

Para sincronizar seu repositório local com o GitHub:

  1. Crie um novo repositório no GitHub
  2. No VS Code, adicione o repositório como "remote"
  3. Use a opção "Publicar Branch" para enviar seus commits

Isso permite que você mantenha seu código seguro na nuvem e compartilhado com sua equipe.

Fluxo de Trabalho Básico

O ciclo típico de desenvolvimento com Git envolve:

  1. Fazer alterações nos arquivos
  2. Preparar as mudanças (stage)
  3. Criar um commit com mensagem descritiva
  4. Sincronizar com o repositório remoto

Este fluxo garante um histórico organizado e a possibilidade de voltar a versões anteriores se necessário.

Considerações Finais

Embora tenhamos coberto apenas o básico, este conhecimento já permite:

  • Manter um histórico organizado das alterações no projeto
  • Trabalhar em equipe de forma eficiente
  • Proteger seu código com backups na nuvem
  • Recuperar versões anteriores quando necessário

O Git é uma ferramenta poderosa que vai muito além desses conceitos iniciais. Conforme você avança, pode explorar branches, pull requests, merge conflicts e muitos outros recursos que tornam o desenvolvimento colaborativo mais eficiente.

Na próxima aula, podemos explorar como trabalhar com branches para desenvolver funcionalidades sem afetar a versão principal do projeto.

Fernando Cunha
Artigo deFernando Cunha

Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.

últimos vídeos

veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN
play

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Autor deste artigo
Fernando Cunha17/03/2025
Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN
play

Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Autor deste artigo
Fernando Cunha17/03/2025
Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN
play

Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.

Autor deste artigo
Fernando Cunha17/03/2025