# VSCode - Instalação e Configuração --- ## 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: * 👉 [https://code.visualstudio.com/download](https://code.visualstudio.com/download) E siga com a instalação `Próximo` → `Próximo` → `Concluir` para essa pasta criada
⚠
ATENÇÃO: Instale no Windows e certifique-se que a opção ADICIONAR AO PATH esteja marcada
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662933227106/wnPmdCtOS.png align="center") --- ## Instalando Plugins Locais ### Remote Development Pacote que acompanha três plugins: * `Remote WSL` * `Remote SSH` * `Remote 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` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662933590461/QYGeTyPav.png align="center") --- ### 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` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662934583286/Wr0teXkA_.png align="center") --- ## 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 ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662933860636/T7V_IB_39.png align="center")
💡
Dica: Caso o passo acima não ocorra, abra o terminal do linux → vá até a pasta que preferir instalar o 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` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662933712304/95j9MQbhp.png align="center") --- ### 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` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662934327966/sWLPl10BV.png align="center") --- ### 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` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1730493512983/cbbe4f95-c2c8-4d70-b718-400be060de96.png align="center") --- ### 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` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712611634225/1ace45e4-3181-4b77-ae31-49a83e3a5511.png align="center") --- ### YAML Útil para verificar as sintaxes deste tipo de arquivo. 1- Em seu `VSCode` → clique em `Extensões` → digite `yaml` → clique em `Instalar` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712611705211/4ff292bf-708a-43c0-bf35-f93eb23929d8.png align="center") --- ## 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` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662934869283/k0sUeiyXF.png align="center") --- ### **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` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1730493309680/2846e76f-1b7f-4895-8e22-627c9a86d344.png align="center") --- ## 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. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1730494138670/47d67101-ba38-40ce-9ad6-1acf7a7c0ad6.png align="center") 1- Abra o VSCode → aperte `F1` no teclado → `Preferences Open User Settings (JSON)` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712611961604/a3d74789-d3de-4c62-92e6-d80cb7a5c8b4.png align="center") 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 editor > > > Abaixo 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. ```json // 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.
✅
Espero que as informações tenham sido úteis para você!