Pular para o conteúdo

Visual Studio Code

A fim de escrever código, você precisará de um editor de texto apropriado. É interessante que ele seja voltado para o desenvolvimento de software, com funcionalidades como syntax highlighting, code completion, debugging, etc.

O Visual Studio Code é um editor de texto muito popular entre desenvolvedores. Ele é leve, rápido e possui uma grande quantidade de extensões que facilitam o desenvolvimento de software.

Para este guia, vamos utilizar o Visual Studio Code e configurá-lo para compilar e depurar código em C e C++.

Instalação

Apresento as formas ideias de instalar o Visual Studio Code nos três sistemas operacionais que estamos tratando neste guia: Windows, Ubuntu e Fedora.

Windows e WSL

Você pode fazer o download do editor pelo site oficial. Mesmo que você esteja usando o WSL, é necessário instalar o Visual Studio Code no Windows, pois é ele que irá gerenciar as extensões e configurações do editor.

Página de downloads do website do Visual Studio Code.
Opções de download do Visual Studio Code, em que se seleciona o instalador do Windows.

Execute o instalador e siga as instruções. Quando chegar ao passo Selecionar tarefas adicionais, marque todas as opções na seção Outros.

Instalação do Visual Studio Code, em que se selecionam todas as opções na seção Outros.
Seleção de tarefas adicionais na instalação do Visual Studio Code.

Ubuntu

Para instalar o Visual Studio Code no Ubuntu, e em outros sistemas que utilizam o gerenciador de pacotes apt (como Mint, Debian, Pop!_OS, entre outros), podemos adicionar o repositório oficial do Visual Studio Code, o que o manterá atualizado automaticamente.

Para isso, utilize os seguintes comandos, conforme recomendado pelo site oficial.

Terminal window
sudo apt-get install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" |sudo tee /etc/apt/sources.list.d/vscode.list > /dev/null
rm -f packages.microsoft.gpg

Em seguida, atualize a lista de pacotes e instale o Visual Studio Code:

Terminal window
sudo apt install apt-transport-https
sudo apt update
sudo apt install code

Fedora

Para instalar o Visual Studio Code no Fedora, também podemos adicionar o repositório oficial do Visual Studio Code.

Utilize os seguintes comandos, conforme recomendado pelo site oficial:

Terminal window
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" | sudo tee /etc/yum.repos.d/vscode.repo > /dev/null

Em seguida, instale o Visual Studio Code:

Terminal window
dnf check-update
sudo dnf install code

Executando

Para abrir o Visual Studio Code, basta procurar por ele no menu de aplicativos do seu sistema operacional — seja Windows, Ubuntu ou Fedora — ou executar o comando code no terminal.

Janela do Windows Terminal, em que se executa o comando de abertura do Visual Studio Code. Ao lado, a janela do Visual Studio Code é aberta.
Executando o Visual Studio Code pelo Windows Terminal.

Para abrir o VSCode no WSL, você pode prosseguir de duas formas abrir o Windows terminal pelo perfil do WSL e executar o comando code.

Ou então, pode abrir o VSCode normalmente, e selecionar o botão azul no canto inferior esquerdo, chamado Open a Remote Window.

Porção inferior esquerda do Visual Studio Code, em que há um botão azul, cujo texto auxiliar indica a ação de abrir uma janela remota.
Botão para abrir uma conexão remota pelo Visual Studio Code.

Então, selecione a opção WSL no menu que aparecer.

Menu de conexões remotas do Visual Studio Code, em que se seleciona a opção 'WSL: Ubuntu'.
Opção WSL selecionada no menu de conexões remotas.

Isso irá instalar a extensão do WSL no VSCode e atualizar sua janela para se conectar com o Ubuntu.

Algumas de suas extensões previamente instaladas manter-se-ão funcionando, mas algumas podem requerer que você clique em Install in WSL: Ubuntu para que funcionem corretamente.

Seção de extensões do visual Studio Code, em que se vê a extensão "WSL" instalada e sua descrição breve, além das extensões "Error Lens" e "vscode-pdf". Também se veem as extensões "AsciiDoc" e "Brazilian Portuguese - Code Spell Checker" desabilitadas, nas quais aparece um botão escrito "Install in WSL: Ubuntu". No canto inferior esquerdo do aplicativo, o botão de conexões remotas agora mostra o texto "WSL: Ubuntu".
Seção de extensões do visual Studio Code, em que se vê a extensão WSL instalada.

Extensões

O Visual Studio Code possui uma grande quantidade de extensões que podem ser instaladas para adicionar funcionalidades ao editor.

Para instalar uma extensão no Visual Studio Code, clique no ícone de quadrados no canto esquerdo da janela, ou pressione Ctrl+Shift+X.

Então, pesquise pelo nome da extensão desejada e clique no botão Install.

Recomendo a instalação das seguintes:

Se você gostou do meu tema de cores, você pode instalá-lo também:

Para cada uma dessas extensões, clique com o botão direito sobre e selecione Apply Extensions to all Profiles.

Janela de extensões do Visual Studio Code, em que se aplica a extensão "Git Graph" a todos os perfis do editor.
Aplicando a primeira extensão a todos os perfis do Visual Studio Code.

Isso será importante mais tarde, quando criarmos perfis específicos para cada linguagem de programação.

Configurações

Para configurar o Visual Studio Code, você pode acessar as configurações do editor clicando no ícone de engrenagem no canto inferior esquerdo da janela.

Alternativamente, você pode editar o arquivo settings.json diretamente. Para isso, abra a paleta de comandos com Ctrl+Shift+P e digite Preferences: Open User Settings (JSON).

Janela de paleta de comandos do Visual Studio Code, em que se digita 'Preferences: Open User Settings (JSON)'. A primeira opção é selecionada.
Abrindo o arquivo de configurações do Visual Studio Code pela paleta de comandos.

Eu preparei um conjunto de configurações para o Visual Studio Code que inclui algumas definições úteis.

Copie o conteúdo abaixo. Então, abra o arquivo settings.json do seu Visual Studio Code e cole nele o conteúdo copiado.

{
"[c]": {
"editor.defaultFormatter": "ms-vscode.cpptools"
},
"[cpp]": {
"editor.defaultFormatter": "ms-vscode.cpptools"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[markdown]": {
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"prettier.tabWidth": 2
},
"cSpell.language": "en,en-US,pt,pt-BR",
"cSpell.userWords": ["catppuccin"],
"editor.codeActionsOnSave": {
"source.fixAll.markdownlint": "explicit"
},
"editor.detectIndentation": false,
"editor.fontFamily": "'MesloLGL Nerd Font Mono', 'FiraCode Nerd Font Mono'",
"editor.fontWeight": "400",
"editor.formatOnSave": true,
"editor.inlineSuggest.enabled": true,
"editor.mouseWheelZoom": true,
"editor.selectionClipboard": false,
"editor.semanticHighlighting.enabled": true,
"editor.tabSize": 4,
"editor.wordWrap": "bounded",
"explorer.confirmDragAndDrop": false,
"files.associations": {
"*.css": "css"
},
"files.autoSave": "afterDelay",
"git.autofetch": true,
"git.openRepositoryInParentFolders": "always",
"github.copilot.enable": {
"*": true,
"markdown": true,
"plaintext": true,
"scminput": true
},
"markdownlint.config": {
"MD024": false,
"default": true
},
"markdownlint.run": "onSave",
"terminal.integrated.fontFamily": "'MesloLGL Nerd Font Mono', 'FiraCode Nerd Font Mono'",
"terminal.integrated.minimumContrastRatio": 1,
"workbench.colorTheme": "Catppuccin Latte",
"workbench.iconTheme": "catppuccin-latte",
"workbench.settings.applyToAllProfiles": [
"[css]",
"[html]",
"[javascript]",
"[json]",
"[jsonc]",
"[markdown]",
"cspell.language",
"cspell.userWords",
"editor.codeActionsOnSave",
"editor.detectIndentation",
"editor.fontFamily",
"editor.fontWeight",
"editor.formatOnSave",
"editor.inlineSuggest.enabled",
"editor.mouseWheelZoom",
"editor.selectionClipboard",
"editor.semanticHighlighting.enabled",
"editor.tabSize",
"editor.wordWrap",
"explorer.confirmDragAndDrop",
"files.associations",
"files.autoSave",
"git.autofetch",
"git.openRepositoryInParentFolders",
"github.copilot.enable",
"markdownlint.config",
"markdownlint.run",
"terminal.integrated.fontFamily",
"terminal.integrated.minimumContrastRatio",
"workbench.colorTheme",
"workbench.iconTheme"
]
}

Você também pode acessar esse arquivo no repositório do livro.

A última opção, workbench.settings.applyToAllProfiles, é importante para que as configurações sejam aplicadas a todos os perfis do Visual Studio Code. Veremos mais sobre eles mais tarde. Para todas as definições que você deseja que sejam aplicadas, independentemente do perfil selecionado, adicione o nome da configuração à lista.

Sinta-se livre para alterar as configurações conforme sua preferência.