Se você é como eu, que valoriza um ambiente de desenvolvimento limpo e eficiente, ajustar as configurações do VSCode pode fazer toda a diferença. Abaixo, explico como configurei o meu VSCode para otimizar minha experiência de codificação, usando a extensão APC para personalizações mais profundas e para alcançar um visual mais minimalista.

Introdução

É bem provável que seu VSCode se pareça com o da imagem, talvez com um tema ou fonte diferente.

Não há nada de errado em usar as configurações padrão do VSCode. Está tudo bem utilizá-lo assim, mas podemos melhorar:

Personalizando o Visual do Editor

Para garantir que meu ambiente de codificação seja agradável e eficiente, fiz algumas alterações na aparência do editor:

• Fonte e Aparência do Texto:

"editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true

Utilizo a fonte JetBrains Mono, que possui ligaduras para um código mais legível e estilizado.

"editor.fontSize": 14,
"editor.lineHeight": 1.8

Ajustei o tamanho da fonte e a altura da linha para garantir uma leitura confortável.

• Minimização e Rolar:

"editor.minimap.enabled": false,
"editor.minimap.renderCharacters": false

Desativei o minimap para reduzir a distração e focar no código.

"editor.scrollbar.vertical": "auto"

Configurei a barra de rolagem para aparecer automaticamente, mantendo a interface limpa.

• Configurações do Terminal:

"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font'"

Mantive a consistência de fonte entre o editor e o terminal.

Layout e Visibilidade

Para manter meu ambiente de trabalho organizado e livre de distrações:

• Barra Lateral à Direita:

"workbench.sideBar.location": "right"

Para alguns, isso pode parecer uma declaração de guerra, mas optei por colocar a barra lateral com os arquivos no lado direito do editor. O ESLint sugere que as linhas de código devem ter no máximo 80 caracteres. Após esses 80 caracteres, ainda teríamos um espaço livre no editor. Então, por que não aproveitar esse espaço e colocar a barra lateral com os arquivos lá?

Essa configuração me ajuda a utilizar melhor o espaço disponível sem sacrificar a visibilidade do código.

• Rulers no Editor:

 "editor.rulers": [
  {
    "column": 80,
    "color": "#ffffff13"
  },
  {
   "column": 120,
   "color": "#ffffff13"
  }
]

Adicionei rulers no editor para visualizar exatamente onde terminam as linhas de 80 e 120 caracteres.

• Controle da Barra Lateral e da Barra de Status:

"workbench.activityBar.location": "hidden",
"workbench.statusBar.visible": false

Ocultei a barra de atividades e a barra de status para um layout mais limpo. Com os comandos teclado Ctrl+Alt+B e Ctrl+Alt+S, posso alternar a visibilidade da barra de atividades e da de status conforme necessário:

"key": "ctrl+alt+b",
"command": "workbench.action.toggleActivityBarVisibility"

"key": "ctrl+alt+s",
"command": "workbench.action.toggleStatusbarVisibility"

• Acesso Rápido com Ctrl+Q:

Com Ctrl+Q, posso acessar todos os recursos da barra de atividades e da barra de status, mesmo que eles estejam ocultos para um layout mais limpo.

Além disso, o VSCode possui atalhos para itens na barra de atividades que facilitam o acesso direto:

• Pesquisa: Ctrl+Shift+F

• Extensões: Ctrl+Shift+X

• Explorer: Ctrl+Shift+E

• Configurações Adicionais:

"window.menuBarVisibility": "compact",

• Pacote de Ícones “Symbols”:

Escolhi o pacote de ícones “symbols” para ajustar o tema de ícones e cores para um visual mais harmonioso.

Pacote de ícones symbols

"workbench.iconTheme": "symbols"

• Tema de Cores “Catppuccin Mocha”:

Ajustei o tema de cores para “Catppuccin Mocha” para um visual mais agradável e consistente.

Tema Catppuccin Mocha

"workbench.colorTheme": "Catppuccin Mocha"

Configurações do APC

Para as próximas configurações, será necessário que você tenha a Extensão APC instalada.

Mas antes de tudo, é importante entender por que uso a extensão APC: o VSCode é construído com o Electron, um framework que combina tecnologias web. Por causa disso, nosso editor de código compartilha muitas características com o Chrome. E, assim como no Chrome, temos acesso ao DevTools para depurar aplicações web.

Com a extensão APC, posso selecionar os elementos que quero personalizar e incluí-los em:

"apc.stylesheet": {}

Isso permite que eu ajuste o VSCode usando seletores CSS, proporcionando uma personalização profunda. Além disso, o APC oferece a possibilidade de modificar aspectos específicos do Electron, ampliando ainda mais o controle sobre o ambiente do editor.

"apc.font.family": "Inter"

Mudo a fonte Sans do VSCode para Inter, fazendo com que todo o texto que não é editável utilize essa fonte. Caso prefira, você pode usar JetBrains Mono para obter um layout mais parecido com o do VIM.

"apc.listRow": {
  "height": 24
}

Aumento a altura das entrelinhas das pastas. Acho as pastas muito coladas, e essa separação deixa a leitura mais agradável ao navegar por pastas e arquivos.

".composite.title": "visibility: hidden !important"

Remove o texto “EXPLORER: PASTA” que aparece no topo do Explorer. Para mim, esse texto é desnecessário e ocupa espaço visual sem agregar valor.

".editor-actions": "display: none"

Oculta o menu de configurações no canto superior direito da tela. Raramente precisei usar as opções desse menu, e tudo que ele oferece pode ser acessado com os atalhos Ctrl+Shift+P ou Ctrl+Q.

".pane-header": "padding: 0 8px"
".pane-body": "padding: 8px"

Adiciona um pouco de padding no terminal e no Explorer, proporcionando uma sensação de organização e espaçamento mais agradável.

".active-item-indicator": "visibility: hidden !important"

Remove a borda que indica a aba ativa no terminal, deixando apenas o texto visível. Isso contribui para um visual mais limpo.

".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container": "background: none;"

Remove a borda superior das abas no editor, deixando o design mais minimalista e simplificado.

Juntando tudo:

"apc.stylesheet": {
  ".composite.title": "visibility: hidden !important",
  ".editor-actions": "display: none",
  ".pane-header": "padding: 0 8px",
  ".pane-body": "padding: 8px",
  ".active-item-indicator": "visibility: hidden !important",
  ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container": "background: none;"
}

Conclusão

Ao configurar meu VSCode dessa maneira, consigo manter um ambiente de desenvolvimento minimalista, organizado e altamente funcional.

Embora essas configurações possam parecer extremas para alguns, elas permitem que eu me concentre no que realmente importa: o código. Sinta-se à vontade para adaptar essas configurações às suas preferências e descobrir como pequenas mudanças podem fazer uma grande diferença na sua produtividade.