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 é relativamente leve, rápido e possui uma grande quantidade de extensões que facilitam o desenvolvimento de software.

Instalação

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

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 download do Visual Studio Code, em que se seleciona o instalador do Windows. — Opções de downloads do website do Visual Studio Code.

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.

Fedora

Para instalar o Visual Studio Code no Fedora, podemos adicionar o repositório oficial do Visual Studio Code, o que o manterá atualizado automaticamente.

Utilize os seguintes comandos, conforme recomendado pelo site oficial.

O sistema pode pedir para você confirmar a instalação. Neste caso, pressione y y e depois Enter Enter . Ele também pode pedir para você digitar a senha do seu usuário. Neste caso, digite-a e pressione Enter Enter . Por padrão, o Fedora não mostra os caracteres enquanto você digita a senha, mas pode ficar tranquilo, pois ela está sendo digitada.

1
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
2
echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\nautorefresh=1\ntype=rpm-md\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.

1
dnf check-update
2
sudo dnf install code -y

Mint

Para instalar o Visual Studio Code no Mint, e em outros sistemas que utilizam o gerenciador de pacotes apt (como Fedora, Debian, Pop!_OS, entre outros), também podemos adicionar o repositório oficial.

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

1
sudo apt-get install wget gpg
2
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
3
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
4
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
5
rm -f packages.microsoft.gpg

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

1
sudo apt install apt-transport-https -y
2
sudo apt update -y && sudo apt upgrade -y
3
sudo apt install code -y

Executando

Para abrir o Visual Studio Code, basta procurar por ele no menu de aplicativos do seu sistema operacional — seja Windows, Fedora ou Fedora &mdash.

Fedora e Mint

Você também pode abrir o terminal padrão e executar o comando code. No Fedora, o terminal se chama Ptyxis. Já no Mint, ele é o GNOME Terminal.

Windows

No Windows, você pode executar o comando code pelo PowerShell.

Janela do PowerShell, 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 PowerShell.

Isso abrirá o aplicativo no ecossistema do Windows, o que provavelmente não é o que você quer fazer. Idealmente, você deve executar o VSCode integrado no ambiente do WSL, como ensinado abaixo.

WSL

Para executar o VSCode no WSL, você pode abrir o aplicativo do WSL e executar o comando code .. Isso abrirá o aplicativo focado na sua pasta home do Fedora.

Na primeira vez que executar esse comando, o Visual Studio Code pedirá autorização para se conectar com o sistema do WSL. Maque a caixa de seleção Permanently allow host 'wsl.localhost' e clique no botão Allow.

Janela do WSL, em que se executa o comando de abertura do Visual Studio Code na pasta "home" do usuário. Ao lado, uma janela do Visual Studio Code pede autorização para se conectar ao WSL. — Executando o Visual Studio Code pelo WSL.

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

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'. — 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 Fedora.

Conta

O Visual Studio Code permite sincronizar suas configurações por meio da sua conta do GitHub. No canto inferior esquerdo da tela, existe um ícone de uma pessoa. Clique nele, e, em seguida, clique na opção Backup and Sync Settings... do menu que se abrir.

Então, o VSCode abrirá um outro menu no centro do canto superior, em que você deve marcar todas as caixas de seleção e pressionar o botão Sign in. No próximo menu, selecione a opção Sign in with Github.

Menu de seleção de quais recursos sincronizar. Todos estão selecionados. — Menu de sincronização do VSCode.

Menu de seleção qual serviço usar para se conectar, em que se seleciona o GitHub. — Menu de sincronização do VSCode.

O seu navegador abrirá o site do GitHub. Caso você não esteja logado, pode fazer log-in neste momento. Então, o GitHub mostra a conta conectada.

Página do GitHub, em que se seleciona a conta em que conectar. — Seleção da conta do GitHub.

Selecione o botão Continue. O VSCode vai começar a fazer a sincronização.

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 Control + Shift + X Control + 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.

Conectando-se pelo VSCode no WSL, algumas podem requerer que você clique em Install in WSL: Fedora 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. Também se vê a extensão "Brazilian portuguese - Code Spell Checker" desabilitada, na qual aparece um botão escrito "Install in WSL: FedoraLinux-42". — Seção de extensões do visual Studio Code, em que se pode selecionar a extensão "Brazilian portuguese - Code Spell Checker" para ser instalada no WSL.

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 Control + Shift + P Control + 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 as seguintes definições úteis:

editor.defaultFormatter: define o plugin de formatação padrão para determinada linguagem. Escolhemos o Prettier para JSON.
cSpell.language: define o idioma do corretor ortográfico. Escolhemos inglês dos Estados Unidos o português do Brasil.
editor.formatOnSave: define que o editor deve formatar o código automaticamente ao salvar o arquivo.
editor.semanticHighlighting.enabled: ativa o destaque semântico do código, para melhorar a legibilidade.
files.autoSave: define que o editor deve salvar automaticamente os arquivos quando o foco sair do editor. -files.eol: define o tipo de quebra de linha a ser utilizado. Escolhemos \n, que é o padrão do Linux.
files.insertFinalNewline: define que o editor deve adicionar uma quebra de linha ao final do arquivo.
files.trimFinalNewlines: garante que haja apenas uma quebra de linha ao final do arquivo.
git.autofetch: busca automaticamente atualizações do repositório remoto do Git.
markdownlint.run: define que o plugin de linting de Markdown deve rodar automaticamente ao salvar o arquivo.

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

1
{
2
  "[json]": {
3
    "editor.defaultFormatter": "esbenp.prettier-vscode"
4
  },
5
  "[jsonc]": {
6
    "editor.defaultFormatter": "esbenp.prettier-vscode"
7
  },
8
  "[snippets]": {
9
    "editor.defaultFormatter": "esbenp.prettier-vscode"
10
  },
11
  "cSpell.language": "en,en-US,pt,pt-BR",
12
  "editor.formatOnSave": true,
13
  "editor.semanticHighlighting.enabled": true,
14
  "files.autoSave": "onFocusChange",
15
  "files.eol": "\n",
16
  "files.insertFinalNewline": true,
17
  "files.trimFinalNewlines": true,
18
  "git.autofetch": true,
19
  "markdownlint.run": "onSave",
20
  "workbench.settings.applyToAllProfiles": [
21
    "cSpell.language",
22
    "editor.formatOnSave",
23
    "editor.semanticHighlighting.enabled",
24
    "files.autoSave",
25
    "files.eol",
26
    "files.insertFinalNewline",
27
    "files.trimFinalNewlines",
28
    "git.autofetch",
29
    "git.enableCommitSigning",
30
    "github.gitProtocol",
31
    "markdownlint.run"
32
  ]
33
}

A opção workbench.settings.applyToAllProfiles é muito importante, pois ela define quais configurações serão aplicadas a todos os perfis do Visual Studio Code. Veremos mais sobre eles nos próximos capítulos. Para todas as definições que você deseja que sejam aplicadas, independentemente do perfil selecionado, adicione o nome da configuração à lista.

Também deixo algumas recomendações estéticas para o Visual Studio Code.

1
{
2
  "[json]": {
3
    "editor.defaultFormatter": "esbenp.prettier-vscode"
4
  },
5
  "[jsonc]": {
6
    "editor.defaultFormatter": "esbenp.prettier-vscode"
7
  },
8
  "[snippets]": {
9
    "editor.defaultFormatter": "esbenp.prettier-vscode"
10
  },
11
  "cSpell.language": "en,en-US,pt,pt-BR",
12
  "editor.fontFamily": "'FiraCode Nerd Font Mono'",
13
  "editor.fontSize": 15,
14
  "editor.fontWeight": "normal",
15
  "editor.formatOnSave": true,
16
  "editor.lineHeight": 1.625,
17
  "editor.mouseWheelZoom": true,
18
  "editor.semanticHighlighting.enabled": true,
19
  "editor.wordWrap": "bounded",
20
  "files.autoSave": "onFocusChange",
21
  "files.eol": "\n",
22
  "files.insertFinalNewline": true,
23
  "files.trimFinalNewlines": true,
24
  "git.autofetch": true,
25
  "markdownlint.run": "onSave",
26
  "terminal.integrated.fontFamily": "'FiraCode Nerd Font Mono'",
27
  "terminal.integrated.fontSize": 15,
28
  "terminal.integrated.lineHeight": 1.1,
29
  "workbench.colorTheme": "Catppuccin Latte",
30
  "workbench.iconTheme": "catppuccin-latte",
31
  "workbench.settings.applyToAllProfiles": [
32
    "cSpell.language",
33
    "editor.fontFamily",
34
    "editor.fontSize",
35
    "editor.fontWeight",
36
    "editor.formatOnSave",
37
    "editor.lineHeight",
38
    "editor.mouseWheelZoom",
39
    "editor.semanticHighlighting.enabled",
40
    "editor.wordWrap",
41
    "files.autoSave",
42
    "files.eol",
43
    "files.insertFinalNewline",
44
    "files.trimFinalNewlines",
45
    "git.autofetch",
46
    "git.enableCommitSigning",
47
    "github.gitProtocol",
48
    "markdownlint.run",
49
    "terminal.integrated.fontFamily",
50
    "terminal.integrated.fontSize",
51
    "terminal.integrated.lineHeight",
52
    "workbench.colorTheme",
53
    "workbench.iconTheme"
54
  ]
55
}

editor.fontFamily: define a fonte padrão do editor. Escolhi a FiraCode Nerd Font Mono, que vamos aprender a instalar no capítulo sobre Terminal.
editor.fontSize: define o tamanho da fonte do editor.
editor.fontWeight: define o peso da fonte do editor. Deixamos em normal, mas você pode alterar para bold ou bolder se preferir e se sua fonte suportar.
editor.lineHeight: define a altura da linha do editor.
editor.mouseWheelZoom: aumenta o tamanho da fonte ao usar a tecla CTRL CTRL e girar a roda do mouse.
editor.wordWrap: define que o editor deve quebrar as linhas automaticamente com base na largura da janela.
terminal.integrated.fontFamily: define a fonte do terminal integrado do Visual Studio Code. Escolhi a mesma fonte que utilizamos no editor.
terminal.integrated.fontSize: define o tamanho da fonte do terminal integrado do Visual Studio Code.
terminal.integrated.lineHeight: define a altura da linha do terminal integrado do Visual Studio Code.
workbench.colorTheme: define o tema de cores do Visual Studio Code. Escolhi o Catppuccin Latte, mas você pode escolher outro tema de sua preferência.
workbench.iconTheme: define o tema de ícones do Visual Studio Code. Também escolhi o Catppuccin Latte, mas você pode escolher outro tema de sua preferência.

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