---
# System prepended metadata

title: Aumentar a performance de desenvolvimento com VSCODE

---

## Comandos

- `code .` abre o vscode já dentro da pasta atual do seu projeto
- `ctrl + shift + p` abre o command pallete, nele nós podemos usar diversos comandos, tais como:
    - reload
    - comandos para extensões específicas
- `ctrl + p` é uma maneira de você navegar facilmente pelos arquivos do seu projeto
- `ctrl + p + @` mostra todos os elementos de programação que temos no arquivo
- `ctrl + shift + l` seleciona todos os elementos com os mesmos nomes
- `ctrl + shift + d` serve para nós selecionarmos elementos com o mesmo nome, porém de forma gradativa
- Intelisense: use o vscode para te dar dicas dos elementos da linguagem
- `ctrl + click`, quando usamos esse comando e clicamos em uma função por exemplo, você será redirecionado a implementação da função
- Usar a área do git para otimizar o seus commits 
- Copy line down
- Move line down: 
- `ctrl + '` abre o terminal do vscode
- Usar os debuggers
- `ctrl + f` para buscar dentro do arquivo
- `ctrl + shift + f` buscar dentro do projeto inteiro
- `ctrl + shift + h` serve para realizarmos uma substituição no projeto inteiro
- Extensões:
    - **wakatime**: monitorar o seu desenvolvimento
    - **prettier**: formatador
    - **codesnap**: cria prints do seu código
    - **auto rename tag**: renomeia a abertura e o fechamento
    - **CSS Modules**: Ajuda com a escrita de CSS
    - **GitLens**: históricos de git, etc.
    - **Github copilot**: IA para codar
    - **Live server**: Cria um servidor rapidamente
    - **Preview.js**: Faz um preview do seu projeto ReactJS
    - **Simple React Snippets**: Uma coleção de snippets para te ajudar a criar ReactJS
    - **SVG Preview**: Ajuda vc a visualizar a imagem que está em SVG
    - **Thunder Client**: Uma aplicação para testar HTTP requests
    - **Live share**: ajuda a fazer pair programming
    - **Todo Tree**: Ajuda vc a mapear o que é preciso refatorar 
    - **CSS Peek**: Ajuda a visualizar os estilos aplicados em uma tag, de forma simples
    - **Javascript booster**: Ajuda com dicas de refatoração
    - **Color highlight**: Aplica um bg color na cor 
    - **Image preview**: Mostra um preview da imagem quando passamos o mouse em cima
    