Artigo

O Visual Studio Code (VS Code) é uma das ferramentas de desenvolvimento mais populares atualmente, mas, ao abrir projetos grandes, o Explorer pode parecer um pouco desorganizado. Neste artigo, vou mostrar como personalizar e organizar o Explorer para deixá-lo mais bonito e funcional. 🚀

1. Organizando Pastas e Arquivos no Explorer 📁

Por padrão, o Explorer exibe pastas e arquivos misturados, o que pode dificultar a navegação em projetos grandes. Para resolver isso, podemos configurar a ordem de exibição das pastas:

Abra as configurações do VS Code:

• No menu: File > Preferences > Settings.
• Atalho: Ctrl + , (Windows/Linux) ou Cmd + , (macOS).

Procure por explorer.sortOrder e altere o valor para foldersFirst.

Se preferir, edite o arquivo settings.json diretamente:

"explorer.sortOrder": "foldersFirst"

Agora, o Explorer sempre exibirá as pastas antes dos arquivos, deixando tudo mais intuitivo. 📂

2. Ativando Ícones para Pastas e Arquivos 🖼️

Os ícones tornam a navegação mais visual e agradável. O VS Code já vem com um tema padrão, mas você pode instalar temas mais atraentes, como o Material Icon Theme.

Como ativar ou trocar o tema de ícones:

• No VS Code, vá em View > Extensions ou use o atalho Ctrl + Shift + X.
• Pesquise por Material Icon Theme e clique em Install.
• Ative o tema de ícones indo em File > Preferences > File Icon Theme e escolhendo Material Icon Theme.

Ou configure diretamente no settings.json:

"workbench.iconTheme": "material-icon-theme"

🌟 Dica: Escolha ícones que combinem com o seu estilo e melhorem a organização visual.

3. Escolhendo um Tema Visual Atraente 🎨

O tema de cores impacta diretamente na aparência geral do VS Code. Alguns temas tornam o Explorer mais bonito, destacando pastas e arquivos. Experimente temas populares como:

• Dracula (escuro com contraste).
• One Dark Pro (leve e equilibrado).
• Solarized Dark (ótimo para longas sessões de trabalho).

Para trocar o tema:

• Vá em File > Preferences > Color Theme.
• Escolha um dos temas disponíveis ou instale novos no Marketplace (Ctrl + Shift + X).
• No settings.json, adicione:

workbench.colorTheme": "Dracula"

🌈 Dica: Escolha um tema que combine com a sua rotina de trabalho e não sobrecarregue sua visão. 😎

4. Compactando ou Expandindo Diretórios 📂🔽

Se você trabalha com estruturas de pastas profundas, o Explorer pode se tornar confuso. O VS Code permite compactar subpastas com um único filho em uma linha:

• No menu de configurações, procure por explorer.compactFolders.
• Escolha:
  • true: Subpastas são combinadas em uma única linha.
  • false: Todas as pastas aparecem separadamente.

No settings.json:

"explorer.compactFolders": false

🧳 Dica: Use a compactação para simplificar a visualização de pastas quando seu projeto se expandir.

5. Ocultando Arquivos e Pastas Desnecessários 🕵️‍♂️

Pastas como node_modules, .git ou dist podem ser ocultadas para não poluir o Explorer. Isso é feito usando a configuração files.exclude.

Para configurar:

• Abra as configurações e procure por files.exclude.
• Adicione os padrões das pastas/arquivos que deseja esconder.

Exemplo no settings.json:

"files.exclude": { "**/node_modules": true, "**/.git": true, "**/dist": true }

🧹 Dica: Deixe seu Explorer mais limpo ocultando pastas e arquivos temporários ou desnecessários.

6. Mostrando o Caminho Completo no Título 📍

Se você trabalha com múltiplos projetos, exibir o caminho completo no título pode ser útil. Isso é configurado com a variável window.title.

Adicione a configuração ao settings.json:

"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"

Agora, o título da janela mostrará o caminho completo do arquivo ou pasta ativa.

🗺️ Dica: Esse ajuste facilita a navegação quando você está com múltiplos projetos ou abas abertas.

7. Ajustando o Zoom do Explorer 🔍

Se os textos ou ícones parecerem muito pequenos, ajuste o nível de zoom do VS Code:

• Vá até File > Preferences > Settings.
• Procure por window.zoomLevel.
• Aumente ou diminua o valor para ajustar o tamanho.

No settings.json:

"window.zoomLevel": 1

🔎 Dica: Ajuste o zoom para um nível confortável e mantenha a interface amigável aos seus olhos durante longas sessões de codificação.

Como Acessar o settings.json 🔧

O arquivo settings.json do Visual Studio Code é onde você pode editar manualmente as configurações para personalizar o editor. Veja como acessá-lo de maneira simples:

Passo 1: Abrir as Configurações do VS Code

• No menu superior, clique em: File > Preferences > Settings (No macOS: Code > Preferences > Settings).
• Ou use o atalho:
  • Ctrl + , (Windows/Linux)
  • Cmd + , (macOS).

Passo 2: Acessar o Modo JSON

No canto superior direito das configurações, clique no ícone de arquivo com linhas, chamado “Open Settings (JSON)”. Esse botão alterna para a edição direta do arquivo settings.json.

Passo 3: Editar o Arquivo

O arquivo será aberto no editor. Agora você pode adicionar ou editar as configurações no formato JSON. Exemplo de configuração no settings.json:

{
    "explorer.sortOrder": "foldersFirst",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Dracula"
}

💡 Dica Extra:
Se você quiser abrir o settings.json diretamente, pode usar o atalho Ctrl + Shift + P ou Cmd + Shift + P no macOS para abrir a Command Palette, e digitar Preferences: Open Settings (JSON).

---

Resultado Final 🎯

Com essas configurações, o Explorer do VS Code ficará mais bonito, organizado e funcional. Agora você poderá navegar pelos seus projetos de forma mais eficiente, com ícones atraentes, pastas organizadas e uma interface personalizada para o seu estilo de trabalho.

Aproveite para experimentar combinações de temas e configurações até encontrar a que melhor se adapta ao seu gosto! 🌟