Como deixar o Visual Studio Code minimalista
Tags: vscode
Published: 2023-07-15 09:18:45

---
title: Como deixar o Visual Studio Code minimalista
published: true
description: Como deixar o VSCode com uma interface mais limpa, minimalista e monocromática
tags: vscode
cover_image: https://cdn.pixabay.com/photo/2015/02/24/02/04/code-647012_1280.jpg
---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3qsmpk19e7pfgn2ab9j.png)

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](https://user-images.githubusercontent.com/35271042/118224532-3842c400-b438-11eb-923d-a5f66fa6785a.png)

É 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](https://marketplace.visualstudio.com/items?itemName=konstantin.plain). 

## 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)"*:

```json
"workbench.activityBar.visible": false
```

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

```json
"editor.minimap.enabled": false,
```

## 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`:

```json
"workbench.tree.indent": 20,
```

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](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf) ou [para Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf).

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esgy4dao2gk3ptcodl8h.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hgj7hj5hkh3t63ul6c9.png)

![ícones da lateral esquerda inferior](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vndyw2lv2ghub6xgqgor.png)

![ícones da lateral direita superior](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntjbcdvpwm3hrzquuob4.png)

Se quiser saber como está o meu `settings.json` dê uma olhada nesse link do [Gist](https://gist.github.com/nfo94/ebdaf7012bb375c66ade47cf23f9c94a).


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