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
ou130%
- 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