VSCode - Instalação e Configuração
Compartilho toda a configuração que realizei para tornar meu VSCode mais produtivo e agradável
Introdução
Personalizar seu ambiente de desenvolvimento é uma jornada única para cada pessoa. É aquele toque especial que torna as longas horas de código mais agradáveis e produtivas. E é exatamente sobre isso que vamos conversar hoje!
Vou guiá-lo através da minha experiência pessoal de customização do VSCode, compartilhando cada passo e configuração que implementei para criar um ambiente que funciona perfeitamente para mim. Mas lembre-se: isso é apenas um ponto de partida, um mapa que você pode usar para explorar suas próprias preferências.
Afinal, não existe certo ou errado quando falamos de personalização - o que importa é criar um ambiente que reflita seu estilo e otimize seu fluxo de trabalho. Seja nas escolhas de temas, extensões, atalhos de teclado ou configurações do editor, você terá total liberdade para adaptar essas sugestões ao seu gosto.
E para facilitar ainda mais sua jornada, ao final deste artigo, compartilharei meus arquivos de configuração completos do VSCode, incluindo minhas extensões favoritas e seus ajustes. Assim, você poderá usá-los como referência ou ponto de partida para criar seu próprio ambiente de desenvolvimento único e personalizado.
Vamos começar?
O que é VSCode?
O Visual Studio Code (VSCode) é um editor de código aberto desenvolvido pela Microsoft, atualmente ele é um dos editores de código mais utilizados no mundo.
Não confunda VSCode com o Visual Studio
O Visual Studio é uma IDE desenvolvida pela Microsoft, dedicada ao .NET Framework e a linguagens como C, C++, C# e F#. Por ser uma solução completa, é uma ferramenta bem mais pesada. Já o VSCode é um editor de código poderoso com vários plugins disponíveis.
Instalando o VSCode
1- Faça o download do Visual Studio Code no site oficial da Microsoft:
E siga com a instalação Próximo → Próximo → Concluir para essa pasta criada
Windows e certifique-se que a opção ADICIONAR AO PATH esteja marcada
Instalando Plugins Locais
Remote Development
Pacote que acompanha três plugins:
Remote WSLRemote SSHRemote Container
Útil e obrigatório para permitir que você use um ambiente de desenvolvimento completo com containers e WSL2.
1- Em seu VSCode → clique em Extensões → digite remote development → clique em Instalar
Material Icon
Útil para tornar os ícones em geral mais agradáveis.
1- Em seu VSCode → clique em Extensões → digite material icon → clique em Instalar
Instalando o VSCode no WSL2
1- Abra seu VSCode → clique no ícone verde >< (canto inferior esquerdo) → escolha a opção Usando um distro existente → selecione a distro e aguarde a instalação ser concluída
VSCode → digite code . (com espaço e ponto mesmo). Ao fazer isso pela primeira vez, você deve ver os componentes de busca do VSCode necessários para executar no WSL2. Isso deve demorar um pouco e é necessário apenas uma vez.Instalando Plugins no WSL2
Docker
Útil para criar e gerenciar imagens e containers Docker, também pode ajudar a criar o Dockerfile.
1- Em seu VSCode → clique em Extensões → digite docker → clique em Instalar
Hashicorp Terraform
Hashicorp Terraform é uma ferramenta incrível de Infra As Code, esse plugin ajudará em sua sintaxe.
1- Em seu VSCode → clique em Extensões → digite hashicorp terraform → clique em Instalar
OpenTofu
OpenTofu é uma ferramenta incrível de Infra As Code, baseado e inspirado no Terraform, é um fork do Terraform desde sua mudança de licenciamento, tornando-o um projeto open source. Esse plugin ajudará em sua sintaxe.
1- Em seu VSCode → clique em Extensões → digite opentofu → clique em Instalar
Kubernetes
Útil para criar e gerenciar containers com Kubernetes, também pode ajudar nas sintaxes dos arquivos de configurações.
1- Em seu VSCode → clique em Extensões → digite kubernetes → clique em Instalar
YAML
Útil para verificar as sintaxes deste tipo de arquivo.
1- Em seu VSCode → clique em Extensões → digite yaml → clique em Instalar
Instalando Tema
codeSTACKr Theme
Há muitos temas por aí, mas particularmente me adaptei bem com esse excelente tema criado, suas cores padrões já fazem todo o trabalho, apenas fiz poucos ajustes nas cores que compartilho em meu arquivo settings.json no final deste artigo.
1- Em seu VSCode → clique em Extensões → digite codestack → clique em Instalar
Night Owl Theme
Outro tema que gosto bastante de usar é o Night Owl, suas cores padrões já fazem todo o trabalho, apenas fiz poucos ajustes nas cores que compartilho em meu arquivo settings.json no final deste artigo.
1- Em seu VSCode → clique em Extensões → digite Night Owl → clique em Instalar
Meu arquivo settings.json
Compartilho meu arquivo settings.json para se por acaso você queira usar o VSCode exatamente como eu, basta copiar e colar. Além de ser uma forma que posso consultar aqui para sempre restaurar quando eu precisar.
1- Abra o VSCode → aperte F1 no teclado → Preferences Open User Settings (JSON)
2- Copie e cole o conteúdo abaixo e salve seu arquivo
⚠️ Importante: Ao aplicar estas configurações no VSCode, você precisará adaptar alguns campos específicos para o seu ambiente de desenvolvimento:
terminal.integrated.defaultProfile: Define qual terminal será iniciado automaticamente
workbench.colorCustomizations: Permite personalizar as cores da sua interface
editor.fontFamily: Especifica qual fonte será utilizada no editorAbaixo você encontrará um exemplo completo dessas configurações, que serve como um ponto de partida para sua personalização. Sinta-se à vontade para ajustar cada campo de acordo com suas preferências e necessidades de desenvolvimento.
// SimplesCloud VSCode settings.json
{
// Integrated Terminal Settings
"terminal.integrated.defaultProfile.linux": "zsh",
"terminal.integrated.defaultLocation": "editor",
"terminal.integrated.fontSize": 16,
"terminal.integrated.fontFamily": "SauceCodePro Nerd Font",
// Theme and Appearance
"workbench.colorTheme": "Night Owl",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
// Color Customization
"workbench.colorCustomizations": {
// VSCode Interface
"editorLineNumber.activeForeground": "#49E287",
"statusBarItem.remoteBackground": "#000000",
"statusBarItem.remoteForeground": "#49E287",
"menu.selectionBackground": "#000000",
"menu.selectionForeground": "#49E287",
"tab.activeBorder": "#49E287",
"list.highlightForeground": "#FFE400",
"list.activeSelectionBackground": "#000000",
"list.activeSelectionForeground": "#49E287",
"focusBorder": "#49E287",
// Notifications
"notifications.background": "#000000",
"notifications.foreground": "#49E287",
"notificationLink.foreground": "#49E287",
"notificationsInfoIcon.foreground": "#49E287",
// Terminal Colors
"terminal.background": "#011627",
"terminal.foreground": "#dddad6",
"terminal.ansiBlack": "#011627",
"terminal.ansiBrightBlack": "#575656",
"terminal.ansiBrightBlue": "#82AAFF",
"terminal.ansiBrightCyan": "#7FDBCA",
"terminal.ansiBrightGreen": "#22DA6E",
"terminal.ansiBrightPurple": "#C792EA",
"terminal.ansiBrightRed": "#EF5350",
"terminal.ansiBrightWhite": "#FFFFFF",
"terminal.ansiBrightYellow": "#FFEB95",
"terminal.ansiBlue": "#82AAFF",
"terminal.ansiCyan": "#21C7A8",
"terminal.ansiGreen": "#22DA6E",
"terminal.ansiPurple": "#C792EA",
"terminal.ansiRed": "#EF5350",
"terminal.ansiWhite": "#FFFFFF",
"terminal.ansiYellow": "#ADDB67"
},
// Editor Settings
"editor.guides.bracketPairs": "active",
"editor.fontFamily": "SauceCodePro Nerd Font",
"editor.fontSize": 16,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.wordWrap": "on",
"editor.tabSize": 4,
"editor.cursorBlinking": "expand",
"editor.cursorStyle": "block",
// Explorer Settings
"explorer.confirmDragAndDrop": false,
"explorer.compactFolders": false,
// Terraform and Terragrunt Specific Settings
"[terraform]": {
"editor.formatOnSave": true
},
"[terragrunt]": {
"editor.formatOnSave": true
},
// Git Settings
"git.enableSmartCommit": true,
// Miscellaneous Settings
"hediet.vscode-drawio.theme": "atlas",
"window.zoomLevel": 1,
"extensions.ignoreRecommendations": true,
"breadcrumbs.enabled": false,
"editor.stickyScroll.enabled": false,
/* Custom Dracula Theme (Commented)
To use Dracula theme with custom colors,
uncomment this block and comment out the
workbench.colorCustomizations above */
// "workbench.colorCustomizations": {
// // Interface
// "activityBar.background": "#000000",
// "activityBar.foreground": "#3884ff",
// "activityBar.inactiveForeground": "#ffffff",
// "sideBar.background": "#13121b",
// "sideBarSectionHeader.background": "#191622",
// "sideBar.foreground": "#dadada",
// "editor.background": "#1c1e27",
// "titleBar.activeBackground": "#191622",
// // Dropdowns and Inputs
// "dropdown.background": "#191622",
// "dropdown.listBackground": "#191622",
// "dropdown.border": "#191622",
// "dropdown.foreground": "#dadada",
// "titleBar.activeForeground": "#dadada",
// "input.background": "#191622",
// // Panels and Tabs
// "panel.background": "#191622",
// "panel.border": "#3884ff",
// "panelTitle.activeBorder": "#b470a0",
// "panelTitle.inactiveForeground": "#0078d4",
// "badge.background": "#0078d4",
// // Editor
// "editorCursor.foreground": "#FFE400",
// "editorCursor.background": "#000000",
// "editor.lineHighlightBorder": "#1c1e27",
// "editor.selectionBackground": "#393744",
// "editor.wordHighlightBackground": "#000000",
// "editor.wordHighlightStrongBackground": "#000000",
// // Status Bar and Breadcrumbs
// "statusBarItem.remoteBackground": "#1e9b0d",
// "statusBarItem.remoteForeground": "#ffffff",
// "breadcrumb.foreground": "#0078d4",
// "breadcrumb.background": "#191622",
// // Tabs
// "tab.activeBackground": "#000000",
// "tab.inactiveBackground": "#191622",
// "tab.activeForeground": "#0078d4",
// "tab.inactiveForeground": "#0078d4",
// // Terminal
// "terminal.background": "#1d2033",
// "terminal.foreground": "#ffffff",
// "terminalCursor.background": "#E9E9F4",
// "terminalCursor.foreground": "#E9E9F4",
// "terminal.ansiBlack": "#282936",
// "terminal.ansiBlue": "#0717ff",
// "terminal.ansiBrightBlack": "#626483",
// "terminal.ansiBrightBlue": "#62D6E8",
// "terminal.ansiBrightCyan": "#A1EFE4",
// "terminal.ansiBrightGreen": "#EBFF87",
// "terminal.ansiBrightMagenta": "#B45BCF",
// "terminal.ansiBrightRed": "#ff0909",
// "terminal.ansiBrightWhite": "#F7F7FB",
// "terminal.ansiBrightYellow": "#00F769",
// "terminal.ansiCyan": "#A1EFE4",
// "terminal.ansiGreen": "#49E287",
// "terminal.ansiMagenta": "#B45BCF",
// "terminal.ansiRed": "#ff0909",
// "terminal.ansiWhite": "#E9E9F4",
// "terminal.ansiYellow": "#00F769"
// }
}
Conclusão
Demonstrei como instalei e configurei o VSCode, fizemos inicialmente a instalação no próprio Windows certificando de marcar a opção de adicionar ao Path, depois instalamos no Linux através do WSL2 e passamos brevemente por algumas extensões que estou usando.
Por fim, compartilhei meu arquivo settings.json para que se um dia eu precisar restaurar, possa consultar aqui e recuperar, além disso fica disponível para você se desejar fazer uma configuração semelhante.