Como deixar o Visual Studio Code minimalista

nfo94

Natália Oliveira

Posted on July 15, 2023

Como deixar o Visual Studio Code minimalista

Já sentiu seus olhos queimarem com algum esquema de cores no VScode? Enjoou do tema Dracula e está incomodado(a) com a quantidade de ícones que você não usa com frequência? Seus problemas acabaram!

Felizmente, podemos customizar muita coisa no VSCode. Fiz diversos ajustes no meu para ficar assim:

meu vscode

Quando instalamos o VSCode ele vem com uma barra lateral na esquerda, tabs the outline e timeline, uma tabulação bem apertada na estrutura de pastas do projeto, alguns ícones no canto superior direito, um mini mapa na direita e esse tema padrão:

vscode padrão

É muita coisa. Vou mostrar aqui quais as extensões e configurações que uso para deixar a interface mais simples e fluida.

Tema minimalista: Plain theme

Alguns temas me lembram de como é usar marca-texto no texto inteiro. Procurei um tema mais simples e finalmente encontrei um: Plain theme. É um tema minimalista que destaca apenas algumas palavras e, que eu saiba, hoje em dia o VSCode por padrão já dá cor à parênteses/chaves/colchetes correspondentes.

Link para o Plain theme.

Como remover a barra lateral esquerda

Essa barra sempre me incomodou profundamente pois ocupa espaço na tela e nem sempre fico clicando ali. É onde fica o debug, source control, busca, etc. Hoje em dia acesso tudo com atalhos no teclado.

Para remover a barra lateral coloque isso no arquivo settings.json, que pode ser acessado com ctrl/cmd+shift+P e digitando "open user settings (JSON)":



"workbench.activityBar.visible": false


Enter fullscreen mode Exit fullscreen mode

Como remover mini mapa

Para remover o mini mapa que fica na direita basta adicionar essa linha no settings.json:



"editor.minimap.enabled": false,


Enter fullscreen mode Exit fullscreen mode

Como aumentar a tabulação do explorer

A tabulação padrão do VSCode é mínima e às vezes é difícil entender a hierarquia das pastas e arquivos. Para aumentar a tabulação adicione essa linha no settings.json:



"workbench.tree.indent": 20,


Enter fullscreen mode Exit fullscreen mode

O número pode ser o que você achar mais conveniente.

Atalhos para abrir explorer, busca, debug e plugins

Removendo a barra lateral, precisei decorar os atalhos das funcionalidades que eu utilizo:

  • ctrl/cmd+shift+X: abre as extensões/plugins
  • ctrl/cmd+shift+B: abre/fecha a lateral inteira
  • ctrl/cmd+shift+F: abre a busca
  • ctrl/cmd+shift+D: abre o debug
  • ctrl/cmd+shift+E: abre a árvore de pastas e arquivos

Para saber todos os atalhos do VSCode você pode olhar esse documento em pdf para MacOS ou para Windows.

Como remover tabs da lateral esquerda

No meu caso não utilizo as tabs Outline ou Timeline. Para remover qualquer uma das tabs basta clicar com o botão direito do mouse em cima do nome da tab e clicar na opção que você quer habilitar/desabilitar:

explorer na lateral esquerda

Como remover ícones

Todos os ícones podem ser habilitados/desabilitados da interface. Clique em cima deles com o click direito do mouse e veja as opções:

ícones da lateral esquerda superior

ícones da lateral esquerda inferior

ícones da lateral direita superior

Se quiser saber como está o meu settings.json dê uma olhada nesse link do Gist.


Esse texto não tem intenção de esgotar o tema. Acrescente nos comentários, e também aponte erros quando os identificar.

💖 💪 🙅 🚩
nfo94
Natália Oliveira

Posted on July 15, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related