Executando verificação de segurança...
10
gpaiva
2 min de leitura ·

Meu setup minimalista no VSCode

código de computador

Minimalismo é se livrar do excesso para focar naquilo que é importante

Com isso em mente, configurei minha ferramenta principal de trabalho de modo que removesse toda distração possível. Então te mostrarei algumas configurações que fiz, fique à vontade para seguir as que fizerem mais sentido pra você. 😃

mão no código

O VSCode usa o arquivo settings.json para guardar as configurações dele. Então pressione Control (Command no MacOS) + Shift + P para abrir o painel de comando, digite "settings" e selecione a opção Open User Settings (JSON).

Primeiro, algumas mudanças na interface como a barra lateral. Eu gosto dela no lado esquerdo da tela basicamente porque toda vez que a abro no lado direito, o código no editor é jogado pra direita e isso atrapalha minha leitura e chega a ser irritante.

"window.titleBarStyle": "native",
"workbench.editor.labelFormat": "short",
"workbench.editor.highlightModifiedTabs": true,
"workbench.editor.tabCloseButton": "off", 
"workbench.startupEditor": "none",
"workbench.statusBar.visible": true, 
"workbench.layoutControl.enabled": false,
"workbench.tree.indent": 12,
"workbench.activityBar.visible": false,
"workbench.sideBar.location": "right"

Agora para ganhar espaço na área do editor, podemos remover o minimap, os highlights , breadcrumb e a estilização do código para aproveitar esse espaço ganho:

"editor.padding.bottom": 14,
"editor.padding.top": 14,
"editor.scrollbar.horizontal": "hidden",
"editor.codeLens": false,
"editor.parameterHints.enabled": false,
"editor.inlayHints.enabled": "off",
"editor.inlineSuggest.enabled": false,
"editor.minimap.enabled": false,
"editor.fontSize": 16,
"editor.fontWeight": "350",
"editor.fontLigatures": true,
"editor.cursorSmoothCaretAnimation": true,
"editor.smoothScrolling": true,
"editor.cursorBlinking": "smooth",
"editor.cursorStyle": "line-thin",
"editor.lineHeight": 24,
"editor.largeFileOptimizations": false,
"editor.renderWhitespace": "none", 
"editor.renderLineHighlight": "all", 
"editor.overviewRulerBorder": false, 
"editor.occurrencesHighlight": false, 
"editor.glyphMargin": false, 
"editor.tabSize": 2,
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.foldingStrategy": "indentation",
"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": false
},
"editor.unicodeHighlight.nonBasicASCII": false,
"editor.unicodeHighlight.invisibleCharacters": false,
"editor.unicodeHighlight.ambiguousCharacters": false,
"editor.guides.indentation": false,
"editor.rulers": [90, 120],
"breadcrumbs.enabled": false,

Você pode aplicar essas mudanças no arquivo settings.json e salvá-lo pra ver como está ficando. Comente uma linha qualquer, salve e veja que mudança ela faz.

Por fim, uma pequena mudança no file explorer:

"explorer.compactFolders": true,
"explorer.openEditors.visible": 0,
"explorer.autoReveal": false,

bônus

Um tema de cores bacana, um pacote de ícones e uma fonte estilosa também fazem diferença na hora de codar. Eis minhas extenções e temas preferidos:

Todas as minhas configurações

Obrigado por ler até aqui! 🚀

Fonte: https://medium.com/@paivadepaiva00/meu-setup-minimalista-no-vscode-a504c2e61b86

2
3
1
kallebysantos

Ta até parecendo meu setup do VIM kkk

top demais, eu to tão minimalista que nem tenho mais taskbar do windows to usando tudo no WIN+R. Só não mudo de sistema porque no trabalho na empresa usa Windows, senão ja tinha colocado um linux e feito aqueles setup terminal only.

2
juanozorio

Gostei bastante desse visual e apliquei no meu vscode.
Mas não estou conseguindo usar a barra lateral (Aquela que mostra os arquivos), poderia me ajudar com algum comando, ou um pequeno passo a passo?

4
gpaiva
Autor
Autor

Bem lembrado, @juanozorio! Aqui vai alguns atalhos:

  • Exibir/Ocultar barra lateral: Control (Command) + B
  • Abrir explorador de arquivos: Control (Command) + Shift + E
  • Abrir pesquisa global: Control (Command + Shift + F
  • Abrir extensões: Control (Command) + Shift + X
  • Abrir Controle de código (GIT): Control + Shift + G
2
2
miguel5g

Muito massa, @gpaiva!

Testei uma por uma das que eu não conhecia e adicionei algumas, obrigado por compartilhar!

Não sei se você conhece, mas o VS Code tem o "Modo Zen" ou "Zen Mode", eu gosto bastante de usar ele, me ajuda a me distrair menos com a quantidade de infos na tela, o meu tem algumas configurações extras:

{
  "zenMode.centerLayout": true,
  "zenMode.fullScreen": false,
  "zenMode.hideTabs": false,
  "zenMode.hideLineNumbers": false,
}

O zenMode.hideLineNumbers eu geralmente deixo como true, mas muitas vezes preciso compartilhar o código ai uso as linhas para explicar o que ta acontecendo. O atalho é ctrl + k & z.

Preview:

VS Code Preview

1
1
brnodionisio23

Por mais que esse tópico seja de 1 ano atras gostaria de agradecer as suas dicas, me ajudou bastante a tornar meu ambiente de devensolvimento consideralmente mais agradavel, você me ajudou a encontrar o "algo" que estava me incomodando na interface padrão, muito obrigado pelo seu compartilhamento!

-1