Uma das maiores vantagens do Visual Studio Code é que praticamente toda a configuração fica centralizada no arquivo settings.json.
Embora seja possível alterar as opções pela interface gráfica, prefiro manter tudo nesse arquivo. Assim consigo versionar minhas configurações, sincronizá-las entre computadores e entender rapidamente cada personalização.
A seguir explico as principais configurações que utilizo.
Navegação mais limpa
"breadcrumbs.enabled": false,
"editor.stickyScroll.enabled": false,Essas duas opções removem elementos que considero desnecessários durante a programação.
Os Breadcrumbs exibem o caminho completo do arquivo e a posição dentro do código. Já o Sticky Scroll mantém o cabeçalho da função visível enquanto você rola a página.
Apesar de úteis em alguns cenários, prefiro uma interface mais limpa e menos informações competindo pela atenção.
Interface minimalista
"workbench.colorTheme": "Min Dark",
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "fluent-icons",Essas configurações definem toda a identidade visual do VS Code.
- Min Dark → tema principal.
- Material Icon Theme → ícones de arquivos e pastas.
- Fluent Icons → ícones da própria interface.
Essa combinação cria uma aparência moderna, discreta e agradável para longas horas de desenvolvimento.
Menos distrações
"workbench.statusBar.visible": false,
"window.commandCenter": false,
"workbench.secondarySideBar.defaultVisibility": "hidden",
Aqui a ideia é remover elementos que raramente utilizo.
- Escondo a barra de status.
- Desativo o Command Center.
- Inicio sempre sem a barra lateral secundária.
Quanto menos elementos visuais, maior é o foco no código.
Ao abrir o VS Code
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.labelFormat": "short",
Sempre que abro o VS Code ele cria um arquivo vazio em vez de exibir a tela de boas-vindas.
Também utilizo nomes curtos nas abas, deixando a navegação mais limpa.
Formatação automática
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.autoIndentOnPaste": true,Essas são algumas das configurações que mais impactam minha produtividade.
Sempre que salvo um arquivo:
- o Prettier organiza o código;
- a indentação é corrigida automaticamente;
- códigos colados já entram formatados.
Isso mantém todo o projeto consistente sem esforço.
Aparência do editor
"editor.minimap.enabled": false,
"editor.renderLineHighlight": "gutter",
"editor.semanticHighlighting.enabled": false,Prefiro um editor mais limpo.
Por isso:
- desativo o Minimap;
- mantenho apenas o destaque da linha atual na margem (gutter);
- desativo o Semantic Highlighting, deixando a coloração totalmente sob responsabilidade do tema escolhido.
Cursor
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorBlinking": "smooth",São pequenos detalhes, mas deixam a movimentação do cursor muito mais agradável visualmente.
Não aumentam a produtividade diretamente, mas melhoram bastante a experiência de uso.
Fonte
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true,
"editor.lineHeight": 1.6,Aqui defino a tipografia utilizada no editor.
Utilizo:
- JetBrains Mono;
- ligaturas ativadas;
- altura de linha de 1.6.
Essa combinação deixa o código muito mais confortável para leitura durante várias horas.
Guias de largura
"editor.rulers": [160, 180],
As réguas servem como referência visual para evitar linhas excessivamente grandes.
Embora muitos projetos utilizem 80 ou 120 colunas, costumo trabalhar com limites maiores devido ao tipo de projeto que desenvolvo.
Elas funcionam apenas como um guia durante a escrita do código.
Barras de rolagem
"editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "hidden",Como utilizo bastante o mouse e atalhos de teclado para navegação, praticamente nunca preciso das barras de rolagem.
Escondê-las ajuda a deixar o editor ainda mais minimalista.
Explorer mais organizado
"explorer.compactFolders": false,Essa configuração impede que várias pastas sejam agrupadas em uma única linha.
Prefiro visualizar toda a estrutura do projeto de forma explícita.
File Nesting
Uma das configurações que mais gosto.
"explorer.fileNesting.enabled": true,O File Nesting agrupa automaticamente arquivos relacionados.
Por exemplo:
package.json
├── package-lock.json
├── pnpm-lock.yaml
├── bun.lockb
├── tsconfig.json
├── vite.config.ts
└── .eslintrcDa mesma forma:
index.ts
├── index.js
├── index.d.ts
└── index.js.mapIsso reduz bastante a poluição visual no Explorer, principalmente em projetos grandes.
Terminal integrado
"terminal.integrated.fontFamily": "JetBrains Mono",
"terminal.integrated.fontLigatures.enabled": true,
"terminal.integrated.fontSize": 14,
"terminal.integrated.lineHeight": 1.2,Também gosto de manter o terminal consistente com o restante do editor.
Utilizo a mesma fonte, ligaturas ativadas e um tamanho confortável para leitura de logs, comandos Git e execução de aplicações.
Formatação de notebooks
"notebook.defaultFormatter": "esbenp.prettier-vscode",Caso utilize notebooks (como Jupyter), o Prettier também será responsável pela formatação, mantendo o mesmo padrão aplicado aos demais arquivos do projeto.
Considerações
Minha configuração segue uma filosofia bastante simples: reduzir distrações e automatizar tarefas repetitivas.
Quase todas as alterações têm um único objetivo: fazer com que o Visual Studio Code desapareça durante o desenvolvimento, deixando o foco totalmente no código. Pequenos ajustes, como remover elementos da interface, configurar a formatação automática e organizar o Explorer, podem parecer detalhes isolados, mas juntos tornam o ambiente muito mais agradável e produtivo para o trabalho diário.
