Introdução

Visual Studio Code é um editor de texto desenvolvido pela Microsoft para Windows, Linux, MacOSX. Possuindo suporte para depuração, versionamento via Git incorporado, realce de sintaxe, complementação inteligente de código, snippets, ferramentas para refatoração.

Ele é customizável e é esse o foco do post de hoje, vou mostrar como costumo fazer minhas modificações no VSCode

Tema: Mr Robot

Este é o tema padrão que venho usando no meu VSCode não por ser simples e bonito com poucas cores para confundir. Este tema me atrai visualmente, porque ele não força minha visão.

Não existe muito que eu possa dizer sobre esse tema, ele é simples e eu gosto assim

Icon Theme: Material Icon Theme

Novamente, este não é o icon theme mais minimalista que posso encontrar, e sinceramente o mínimo que eu procuro é algo que entregue rapidamente a informação que busco.

Então considero muito válido o uso do mesmo em usa praticidade.

Configurações em Json

O VSCode pode ser configurado graficamente mas eu considero uma perda de tempo, então me acostumei a configura - lo em seu json para deixar pelo menos pré pronto para ser utilizado.

Vou mostrar o exemplo completo da configuração e ir explicando aos poucos

{
  "window.zoomLevel": 2,

  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Mr Robot",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.labelFormat": "short",
  "workbench.activityBar.location": "hidden",
  "workbench.statusBar.visible": false,
  "workbench.layoutControl.enabled": false,

  "editor.fontFamily": "FiraCode Nerd Font Mono, Hack Nerd Font Mono, Monospace",
  "editor.fontSize": 18,
  "editor.lineHeight": 1.3,
  "editor.rulers": [80, 200],
  "editor.renderLineHighlight": "gutter",
  "editor.fontLigatures": true,
  "editor.semanticHighlighting.enabled": false,
  "editor.minimap.enabled": false,
  "editor.scrollbar.vertical": "hidden",
  "editor.scrollbar.horizontal": "hidden",

  "breadcrumbs.enabled": false,

  "explorer.compactFolders": false,
  "explorer.fileNesting.enabled": true,

  "files.autoSave": "afterDelay",

  "terminal.integrated.fontSize": 18,
  "terminal.integrated.fontFamily": "FiraCode Nerd Font Mono, Hack Nerd Font Mono, Monospace"
}

Configurações do window

{
  "window.zoomLevel": 2
}

Está configuração define o nível de zoom da janela para 200% isso garante uma tela grande e visível para quem tem uma visão desavantajada como a minha. Mas você pode deixar em 1.25 equivalente a 125% ou 1.5 equivalente a 150%

Configurações de workbench

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Mr Robot",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.labelFormat": "short",
  "workbench.activityBar.location": "hidden",
  "workbench.statusBar.visible": false,
  "workbench.layoutControl.enabled": false
}

Essas são as linhas de configuração do ambiente de trabalho.

• A primeira define o tema de ícone para material-icon-theme.
• A segunda define o tema de cores para Mr Robot.
• A terceira linha define que o editor será aberto diretamente em um novo arquivo sem título.
• A quarta define que o formato do rótulo será curto.
• A quinta linha define que a barra de atividades será oculta, mas isso só funciona quando estamos em contato com uma configuração especial em shortcuts.
• A sexta linha define não veremos a barra de status.
• A sétima e ultima linha define que o controle de layout do workbench será desabilitado.

Configuração do editor

"editor.fontFamily": "FiraCode Nerd Font Mono, Hack Nerd Font Mono, Monospace",
"editor.fontSize": 18,
"editor.lineHeight": 1.3,
"editor.rulers": [80, 200],
"editor.renderLineHighlight": "gutter",
"editor.fontLigatures": true,
"editor.semanticHighlighting.enabled": false,
"editor.minimap.enabled": false,
"editor.scrollbar.vertical": "hidden",
"editor.scrollbar.horizontal": "hidden",

Essas são as linhas de configuração do editor:

• A primeira linha define a família de fonte do editor.
• A segunda linha define o tamanho da fonte do editor para 18px.
• A terceira linha define a altura de linha do editor para 1.3 ou 130%
• A quarta linha define as linhas verticais do editor normalmente as linhas guia estão em 80 e 200.
• A quinta linha define como a linha destacada é renderizada, no nosso caso usamos o gutter que é a margem esquerda do editor.
• A sexta linha define que as ligatures da fonte estão habilitadas.
• A sétima linha define que o realce semântico está desabilitado.
• A oitava linha define que o minimapa está desabilitado.
• A nona e decima linha desabilitam a scrollbar verticalmente e horizontalmente

Configuração do breadcrumb

{
  "breadcrumbs.enabled": false
}

Define que as breadcrumbs estão desabilitadas

Configuração do explorer

{
  "explorer.compactFolders": false,
  "explorer.fileNesting.enabled": true
}

• A primeira linha define que as pastas compactadas estão desabilitada
• A segunda linha define que o aninhamento de pastas está habilitada

Configuração de files

{
  "files.autoSave": "afterDelay"
}

Define que os arquivos serão salvos automaticamente após determinado delay

Configuração do terminal integrado

{
  "terminal.integrated.fontSize": 18,
  "terminal.integrated.fontFamily": "FiraCode Nerd Font Mono, Hack Nerd Font Mono, Monospace"
}

• A primeira linha define o tamanho da fonte do terminal integrado para 18px
• A segunda linha define a família de fontes para o terminal integrado

Shortcut especial

// Em Keybinds.json
{
  "key": "ctrl-q",
  "command": "workbench.action.quickOpenView"
}

Com esse shortcut, você não precisará de acessar a action bar se quiser instalar uma nova extensão ou coisa parecida. E como resultado:

Conclusão

Essa é minha configuração minimalista para o VSCode no meu caso em especial, ele é bastante útil para desenvolvimento em geral.

Não chega a ser um vim/neovim mas está bem customizado pra longas horas de digitação com o minimo de recursos atrapalhando na tela. Tornando assim o nosso editor, distraction free