Como Personalizar e Organizar seu VS Code com a Extensão vscode-icons

em

🎨 Como Personalizar e Organizar seu VS Code com a Extensão vscode-icons

Introdução

Se você é iniciante no mundo do desenvolvimento ou já tem uma boa estrada, provavelmente já percebeu que um ambiente de desenvolvimento limpo, organizado e visualmente agradável pode aumentar sua produtividade.

Neste tutorial, vou te apresentar a extensão vscode-icons, um recurso simples, mas extremamente útil, que adiciona ícones personalizados aos seus arquivos e pastas no Visual Studio Code. Parece simples? E é. Mas a diferença na organização e clareza dos projetos é gigante!

✅ O que é o vscode-icons?

É uma extensão para o VS Code que adiciona ícones visuais aos arquivos e diretórios com base no tipo de arquivo, linguagem, estrutura e nomenclatura. Isso torna muito mais fácil identificar o conteúdo de cada item na árvore de arquivos.

📦 Instalação da Extensão

  1. Abra o Visual Studio Code.

  2. Vá até a barra lateral esquerda e clique no ícone de Extensões (ou use o atalho Ctrl+Shift+X).

  3. Na barra de busca, digite:
    vscode-icons

  4. Clique sobre a extensão com esse nome e o ícone colorido da equipe vscode-icons-team.


  5. Clique em Instalar.

  6. Após instalar, observe que a extensão estará "Habilitada" quando a notificação aparecer. Se ela não aparecer, não se preocupe — no próximo passo, você vai ver como ativar manualmente.



⚙️ Ativando o Tema de Ícones

Caso os ícones ainda não tenham sido aplicados:

  1. Pressione Ctrl+Shift+P para abrir a paleta de comandos.

  2. Digite:
    Icons: Activate Icons

  3. Selecione a opção e pronto! Os ícones serão aplicados imediatamente ao seu explorador de arquivos.

🗂️ Reconhecer nomes de pastas específicas

A extensão é inteligente e reconhece nomes como src, assets, routes, tests, entre outros, aplicando ícones específicos automaticamente. Ou seja, só de nomear corretamente suas pastas, o visual já fica mais claro e intuitivo.


🎯 Por que usar o vscode-icons?

  • 📌 Identificação mais rápida de arquivos

  • 🧠 Memorização visual do projeto

  • 🔍 Facilidade na navegação, principalmente em projetos grandes

  • 🧼 Ajuda na organização da estrutura

  • 🔥 É leve, simples de instalar e não afeta a performance do VS Code

💡 Dica Extra: Combine com Outras Extensões

Para um setup ainda mais produtivo, combine o vscode-icons com:

  • Material Theme (tema visual moderno)

  • Prettier (formatação de código)

  • Path Intellisense (auto completar caminhos de arquivos)

🧪 Teste Agora!

Crie um projeto com a seguinte estrutura:

/meu-projeto
  ├── src
  │   ├── index.js
  │   └── app.js
  ├── assets
  │   └── logo.svg
  └── README.md

Abra no VS Code e veja a mágica acontecer com os ícones. 😍


Confira a documentação.


Extensões como o vscode-icons mostram que produtividade está nos detalhes. Essa personalização visual ajuda a manter o foco, principalmente quando trabalhamos com muitos arquivos.

Se você ainda não testou, vale a pena experimentar. E se já usa, compartilha com aquele colega que ainda está no VS Code "cru" 😅

Se curtiu esse tutorial, compartilha com sua rede e segue o blog para mais conteúdos como esse!

Comentários

Postar um comentário