Configurações no Visual Studio Code
Segue algumas extensões que são essenciais no desenvolvimento em React
1 - Auto Close Tag - Fecha as tags automaticamente
2 - Auto Complete Tag - Completa as tags automaticamente
3 - Auto Import - Faz alguns imports de biliotecas automaticamente
4 - Auto Rename Tag - Ao renomear a tag, o outro lado também vai ser renomeado
5 - Color Highlight - Ao colocar uma cor no código, a extensão vai mostrar um preview dela
6 - Git Blame
7 - Git History
8 - Github Pull Requests and Issues - É possível fazer pull request diretamente do VSCode
9 - Live Server - Ao salvar o código, o servidor vai atualizar automáticamente a página com as alterações
10 - Prettier - Code Formatter - Formata o código ao salvar
11 - vscode-icons - Coloca icones nas pastas e arquivos
Dracula Official
Tokyo Night
One Dark Pro
Deixe da seguinte forma:
Raramente precisamos debugar o frontend pois temos ferramentas do próprio navegador que já nos auxilia nisso (F12 -> Abas Elements/Console/Networking/Application, Inspeção de elementos dentre outras) porém aqui vai a instrução para debugar no VSCode
Aba debug > Run and debug: Isso vai fazer abrir uma nova instancia do projeto no navegador para depuração.
-
F9- Coloca ou tira um novo breakpoint -
F10- Continua -
F11- Entra no método/função
-
CTRL + P- Procurar qualquer arquivo no projeto -
CTRL + ,- Procurar qualquer tipo de configuração (seja config do VSCode ou de alguma extensão)
Aba Source Control, sempre que fizer alguma alteração na branch elas vão aparecer nessa aba
Coloque uma mensagem de commit de acordo com os padrões > Commit > Public Branch
A partir desse momento a branch será enviada para o github para abertura do pull request