Roger Camargo 🐍 😷's Blog
Boost no VS Code! Extensões Poderosas Que Você Precisa Testar

Boost no VS Code! Extensões Poderosas Que Você Precisa Testar

Uma lista completa de extensões de produtividade, para backend python e frontend javascript e vuejs. (awesome-vscode)

Roger Camargo 🐍 😷's photo
Roger Camargo 🐍 😷
·

4 min read

Se você quer turbinar seu VS Code e levar sua produtividade a outro nível, esta lista é para você! 🚀

Separei uma coleção bem legal de extensões para facilitar o seu dia a dia como DEV, divididas em categorias essenciais: produtividade, backend com Python, frontend com JavaScript/Vue.js e por último alguns temas e ícones.

E aí, tem alguma extensão indispensável que não está na lista? Comenta aqui e ajude a fortalecer nossa comunidade de desenvolvedores! 💡💻 👾

Agradecimento especial ao Riverfount pela colaboração e a galera da Busertech que vivia me perguntando se dava para fazer isto ou aquilo no VSCODE. Também aos usuários de PyCharm que gostam de mostrar “as vantagens” desta IDE focada em Python.

⚡ Produtividade

  • Bookmarks (alefragnani.Bookmarks): Podemos utilizar CTRL+ALT+K para marcar (criar um bookmark) em uma linha de arquivo e CTRL+ALT+J para pular entre marcas.

  • Advanced-new-file (patbenatar.advanced-new-file): Enquanto CTRL + N cria um novo arquivo e depois temos que navegar até o caminho desejado, com esta extensão podemos utilizar CTRL+ALT+N e digitar o caminho do arquivo (com autocomplete) como primeiro passo.

  • Docker (ms-azuretools.vscode-docker): Para facilitar a utilização de docker, ver imagens e containers rodando

  • GitLens (eamodio.gitlens): Recursos adicionais de git diretamente no VSCODE, como ver quem foi o último deve alterar a linha atual (git blame)

  • Git Graph (mhutchie.git-graph): Visualizador dos commits comparando entre as branches existentes.

  • Live Share (ms-vsliveshare.vsliveshare): Ferramenta para fazer pair programming

  • Indent Colorizer (tal7aouy.indent-colorizer): Deixa mais fácil visualizar os blocos de códigos

  • Remote-SSH (ms-vscode-remote.remote-ssh): Permite editar o código de um repositório remoto

  • Remote Explorer (ms-vscode.remote-explorer): Completa o Remote-SSH para acesso remoto

  • Dev Container (ms-vscode-remote.remote-containers): Facilita o uso e debug de vários containers gerenciados por um docker compose.

  • Thunder Client (rangav.vscode-thunder-client): É um postman dentro do VSCODE (Cliente para API Rest), com todos os recursos do Postman

  • Rainbow CSV (mechatroner.rainbow-csv): Facilita a visualização de arquivos CSVs

  • Error Lens (usernamehw.errorlens): Mostra de forma mais gritante os erros de código

  • DotEnv (mikestead.dotenv): Melhor visualizador (syntax highlighting) para arquivos .env

  • Code Spell Checker (streetsidesoftware.code-spell-checker): Para quem está codando em inglês e quer ajuda para erros de typo. Dica do Ronald também.

🐍 Backend (Python, Flask, FastAPI ou Django)

  • Python (ms-python.python): Suporte completo para linguagem python no VSCODE

  • Python Debug (ms-python.debugpy): Complemento para a linguagem python

  • Pylance (ms-python.vscode-pylance): Complemento para a linguagem python

  • Black: Linter e formatador de código python (PEP8)

  • Ruff (charliermarsh.ruff): Linter e formatador de código python (PEP8), alternativa ao black

  • Pytest IntelliSense (cameron.vscode-pytest): Facilitador de projetos com pytest

  • Jinja (wholroyd.jinja): Facilitar de projetos com templates Jinja

  • PostgresSQL (ms-ossdata.vscode-postgresql): Cliente para acessar bancos de dados Postgres

🎨 Frontend (HTML, CSS & JS - VueJS)

  • Vue Official (Vue.volar): Diversos facilitadores para projetos Vuejs

  • Prettier (esbenp.prettier-vscode): Formatador de código de projetos JS

  • Live server (ritwickdey.LiveServer): Serve arquivos HTML com auto reload

  • Import Cost (wix.vscode-import-cost): Exibe o tamanho das bibliotecas importadas em projetos JS

  • Vite (antfu.vite): Facilitadores de projetos gerenciados com Vite

  • Vitest (vitest.explorer): Facilitador para projetos vite com Vitest (nos testes)

  • CSS Peek (pranaygp.vscode-css-peek): Permite navegar de um código HTML até chegar na implementação da classe CSS

  • ESLint (dbaeumer.vscode-eslint): Linter de código JS

  • HTML CSS Support (ecmel.vscode-html-css): Intellisense de HTML e CSS

  • IntelliSense for CSS (Zignd.html-css-class-completion): Intellisense e auto complete de CSS

  • CSS Navigation (pucelle.vscode-css-navigation): Alternativa ao Intellisense for CSS

  • Auto Rename Tag (formulahendry.auto-rename-tag): Facilitar o renomear de tags

  • Code Runner (formulahendry.code-runner): Torna mais fácil executar arquivos JS

📄 Documentação, Compartilhar conhecimento e Trabalho em Equipe

  • Polacode: Gera imagem PNG do código copiado para o clipboard

  • Markdown Preview Mermaid (bierner.markdown-mermaid): Permite visualizar digramas mermaid diretamente no VSCODE (igual o github faz)

  • Todo Tree (gruntfuggly.todo-tree): Exibe os TODOs dos arquivos diretamente na listagem de arquivos

  • Excalidraw (pomdtr.excalidraw-editor): Desenho diagramas Excalidraw diretamente no VSCODE

😎 Temas & Aparência

  • Dracula Theme official (dracula-theme.theme-dracula

  • Material Icon Theme

  • firefox devtools theme (clintonrost.theme-firefox-devtools)

  • GlassIT (s-nlf-fh.glassit)

  • Gruvbox Material Icons (JonathanHarty.gruvbox-material-icon-theme)

  • Gruvbox Theme (jdinhlife.gruvbox)

  • Vite Theme Night (edison1105.vite-theme-night)

  • peacock

  • One monakai theme (azemoh.one-monokai)

🕵️ Outros (AINDA EM TESTES & AVALIAÇÃO)

📌 As extensões relacionadas aos assistentes de código como o próprio Copilot acabei deixando de fora. Acredito que este tema merece um post exclusivo sobre o assunto.

👉 Qual você mais gostou ou não conhecia? Tem alguma que você usa no dia a dia que eu esqueci?
Deixe aqui em baixo nos comentários! 👇

vscodevscode extensions