Organizando visualmente pastas e subpastas, no VSCODE

Olá, agora que estamos realizando mais projetos no ambiente Angular, naturalmente utilizamos mais pastas e subpastas, principalmente quando utilizamos diversos componentes, serviços, modelos e diretivas customizadas. Como estava com dificuldade em organizar e achar os arquivos com rapidez, com inúmeras pastas, procurei soluções de deixar as mesmas mais separadas e vísiveis, sem precisar instalar um novo plugin temático do VSCode.

Por padrão, o VS Code tem uma aparência de pastas e suas dependências, assim:

Após realizar as mudanças:


Caso deseje alterar o seu VSCode:

1º- Clique no ícone de "Gerenciar" (Engrenagem) e depois clique na opção "Configurações" (ou pressione Ctrl + ,)


2º - Digite na barra de busca "workbench.colorCustomization"

3º- Clique em "Edit in settings.json"

4º Adiciona os seguintes valores no JSON:

  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#05ef3c"
  }

Você pode escolher qualquer cor para "tree.indentGuidesStroke" e para a quantidade de pixeis em "workbench.tree.indent"


5º Salve (CTRL + S)



Retirei a ideia deste vídeo. Caso tenha dicas de organização de pastas ou no VSCode em geral, contribua para este tópico!