/Dicas-Tutoriais

Repositório criado para auxiliar alunas da Reprograma a usar o GitHub. Também contém dicas de extensões utilizadas no VSCode.

🌎 Conteúdo:

  1. Melhores extensões do VSCode

    1.2 Como Instalar

    1.3 Como desinstalar

    1.4 Lista de extensões

    1.5 Bônus

  2. Sobre o GitHub

    2.1 Principais comandos do GitHub:

    Fork

    Git clone

    Git init

    Git status

    Git add .

    Git commit -m

    Git push

    Pull request

    Clear

Sobre o GitHub:

O que é o GitHub?

GitHub é um serviço baseado em nuvem que hospeda um sistema de controle de versão chamado Git. Ele permite que os desenvolvedores colaborem e façam mudanças em projetos compartilhados enquanto mantêm um registro detalhado do seu progresso.

O que é um repositório?

Repositório, ou repo, é um diretório onde os arquivos do seu projeto ficam armazenados. Ele pode ficar em um depósito do GitHub ou em seu computador. Você pode armazenar códigos, imagens, áudios, ou qualquer outra coisa relacionada ao projeto no diretório.

O que é uma branch?

Branch é uma cópia do diretório. Você pode usar o branch para desenvolver isoladamente.

Principais Comandos no GitHub:

Fork:

Funcionalidade: Dar Forking em um repositório significa que você vai criar um novo projeto baseado em repositórios existentes. Em termos simples, dar forking em um repositório quer dizer que você vai copiar um repositório existente, fazer as alterações necessárias, armazenar a nova versão como um novo repositório e chamar de seu projeto.

📍 Clique aqui e veja como fazer fork em um repositório no GitHUb.

Git clone:

Funcionalidade: É um comando que é usado para selecionar um repositório existente e criar um clone ou cópia do repositório de destino.

📍 Clique aqui e veja como utilizar o comando git clone.

Git init:

Funcionalidade: Cria um novo repositório local com um nome específico.

📍 Clique aqui e veja como utilizar o comando git init.

Git Status:

Funcionalidade: Lista todos os arquivos novos ou modificados para serem commitados.

📍 Clique aqui e veja como utilizar o comando git status.

Git add

Funcionalidade: Faz o snapshot de TODOS arquivo na preparação para versionamento.

📍 Clique aqui e veja como utilizar o comando git add .

Git commit:

Funcionalidade: Grava o snapshot permanentemente do arquivo no histórico de versão.

📍 Clique aqui e veja como utilizar o comando git commit.

Git Push:

Funcionalidade: Envia todos os commits do branch local para o GitHub.

📍 Clique aqui e veja como utilizar o comando git push.

Pull Request:

Funcionalidade: É o pedido para que o repositório original, ou uma branch do repositório original, faça a ação de pull (puxar) as atualizações do repositório fork ou de um branch do próprio repositório.

📍 Clique aqui e veja como fazer um pull request.

Clear:

Funcionalidade: Limpa a tela do git bash.

📍Clique aqui e veja como utilizar o comando clear.

💡Fonte:

O que é GitHub?

O que é Git clone

Melhores extensões VSCode !

Segue aqui, uma lista com o TOP 7 extensões do VSCode que eu considero as melhores. Nesse documento você aprenderá como instalar as extensões e como cada uma delas pode te ajudar enquanto você usa o VSCode! 🤩

Como instalar:

📌Como instalar uma extensão no VSCode:

1- Clique no ícone de extensões;

2- Digite o nome da extensão desejada;

3- Clique na extensão;

4-Depois clique no ícone instalar e pronto!

Como desinstalar:

📌Como desinstalar uma extensão no VSCode:

1- Clique no ícone de extensões;

2- Digite o nome da extensão desejada;

3- Clique na extensão;

4- Clique no ícone desinstalar;

5- Clique em recarregamento necessário e pronto, extensão desinstalada!

Lista de extensões:

1- Beautify

Funcionalidade: Beautify é uma extensão para embelezamento de códigos em JavaScript, JSON, CSS, Sass, e HTML no VisualCode.

enter image description here

2- Bookmarks

Funcionalidade: Ele ajuda você a navegar em seu código, movendo-se entre posições importantes com facilidade e rapidez. Não há mais necessidade de pesquisar o código. Ele também suporta um conjunto de comandos de seleção, o que permite selecionar linhas marcadas e regiões entre as linhas marcadas. É muito útil para análise de arquivos de log.

enter image description here

3- Live Server

Funcionalidade: O Live Server implementa um “live reload” – ou seja, um recarregamento ao vivo – para páginas web estáticas ou dinâmicas. Basicamente, essa extensão elimina a necessidade de dar um F5 a cada alteração feita em um arquivo do seu projeto (seja um .html, .css, etc). Isso porque ela inicia um servidor de desenvolvimento local (por padrão, na porta 5500, mas você pode customizar isso) e, cada vez que você salvar uma alteração em um arquivo do seu projeto, a página será recarregada automaticamente no browser.

enter image description here

4- Ident-rainbow

Funcionalidade: Uma extensão simples para tornar a indentação mais legível.

enter image description here

5- Image Preview

Funcionalidade: Mostra a visualizações das imagens inseridas no código.

enter image description here

6- Vs Code -icons

Funcionalidade: Traga ao VSCode os ícones das linguagens que você usa.

enter image description here

Exemplo:

enter image description here

7- Rainbow Brackets

Funcionalidade: Traga cores aos colchetes, chaves e parênteses, fazendo o seu código mais legível.

enter image description here

Bônus!!!

Bearded Theme

Funcionalidade: Adicione temas ao seu VSCode.

enter image description here

Exemplo:

enter image description here

💡Tutorial de como trocar o tema do VSCode usando a extensão Bearded Theme

Pomodoro Timer

Funcionalidade: Traga o método de pomodoro para o VsCode. O método Pomodoro é simples e dura duas horas. Primeiro, você realiza uma atividade durante 25 minutos. Quando acabar o tempo, descansa 5 minutos. Assim sucessivamente até que complete as duas horas.

enter image description here

Power Mode

Funcionalidade: Tenha efeitos visuais enquanto você digita, uma forma divertida de descontrair o momento de trabalho ou estudo.

enter image description here

Exemplo:

enter image description here

💡 Tutorial de como ativar o Power Mode

Discord Presence

Funcionalidade: Essa extensão é pra quem gosta de usar o Discord! A Discord Presence vai atualizar seu status no Discord enquanto você usa o VS Code, mostrando em qual linguagem de programação você está trabalhando atualmente.

enter image description here

Como vai aparecer no Discord:

enter image description here