VS Code: instalação e vínculo a uma pasta

1. Visão geral

O VS Code é um dos editores de código fonte mais utilizados atualmente. Ele pode ser utilizado para inúmeras finalidades, como

• Edição de texto comum
• Programação em Java
• Programação em Python
• Desenvolvimento Web com HTML, CSS e Javascript/Typescript

entre muitas outras possibilidades.

O que você vai aprender

• Como fazer a instalação do VS Code
• Como vinculá-lo a uma pasta, o que simplifica bastante o trabalho
• Como trocar o tema de cores e abrir um terminal vinculado ao VS Code

O que você vai precisar

• Um computador com Windows e acesso à internet
• Um navegador (neste material, o Google Chrome)

2. Download do VS Code

O primeiro passo é obter uma cópia da última versão do VS Code disponível para o seu sistema operacional. Para tal, basta visitar o link a seguir.

https://code.visualstudio.com/

Você deverá se deparar com uma tela parecida com aquela que a Figura 2.1.1 mostra. Basta clicar em Download.

Figura 2.1.1 – Página de download do VS Code.

A tela seguinte deverá ser semelhante àquela exibida pela Figura 2.1.2. Observe que, uma vez que o download tenha terminado, o seu navegador poderá exibir uma "caixa" no canto inferior esquerdo que, quando clicada, coloca o instalador em execução. Vá em frente e clique sobre ela.

Figura 2.1.2 – Download concluído: clique no arquivo para executar o instalador.

3. Executando o instalador

Na primeira tela do instalador, exibida pela Figura 2.1.3, é preciso concordar com os termos de uso e clicar em Próximo.

Figura 2.1.3 – Acordo de licença.

A tela seguinte, exibida pela Figura 2.1.4, permite escolher o diretório de instalação do VS Code. Basta manter o valor padrão e clicar em Próximo.

Figura 2.1.4 – Diretório de instalação.

A tela seguinte, exibida pela Figura 2.1.5, pergunta se você deseja que seja criado um atalho para o VS Code no menu iniciar do sistema operacional. Faça a sua escolha e clique em Próximo. Neste material, mantivemos tudo como estava, o que quer dizer que o atalho será criado.

Figura 2.1.5 – Atalho no menu iniciar.

A seguir, como a Figura 2.1.6 exibe, é possível optar pela criação de mais atalhos, como aqueles que aparecem nos menus de contexto (quando clicamos com o direito numa pasta, por exemplo) e um ícone na área de trabalho. Eles podem ser muito úteis. Por isso, marcamos todas as caixinhas. A seguir, clique em Próximo.

Figura 2.1.6 – Tarefas adicionais: todas as opções marcadas.

Finalmente chegamos ao ponto em que a instalação pode começar. Na tela exibida pela Figura 2.1.7, basta clicar em Instalar.

Figura 2.1.7 – Pronto para instalar.

Quando a instalação terminar, você deverá se deparar com uma tela parecida com aquela que a Figura 2.1.8 exibe. Podemos optar por abrir o VS Code neste momento, o que ainda não é necessário. Por isso, desmarque a caixinha. A seguir, clique em Concluir.

Figura 2.1.8 – Instalação concluída.

4. Criando a pasta de trabalho

Vinculando o VS Code a uma pasta

Uma das melhores formas para se trabalhar com o VS Code é fazendo com que ele opere "vinculado" a uma pasta. O processo é bastante simples:

• Criamos uma pasta no Windows
• Abrimos o VS Code
• No VS Code, escolhemos a opção Arquivo >> Abrir pasta e pronto. O VS Code está vinculado a uma pasta.

A partir daí, ele

• exibirá os arquivos existentes nesta pasta no menu lateral
• criará novos arquivos e novas pastas nesta pasta a que está vinculado
• fará uso de um "terminal" que, automaticamente, é aberto associado à pasta a que está vinculado.

Abrindo o Explorador de Arquivos do Windows

O primeiro passo é abrir o navegador de arquivos do Windows. Para tal, clique no botão da barra Iniciar e busque por Explorador. Após clicar no botão, basta começar a digitar. Você deverá se deparar com algo semelhante àquilo que a Figura 2.2.1 exibe.

Figura 2.2.1 – Buscando o Explorador de Arquivos.

Navegando até a pasta do usuário

O ideal é criarmos uma pasta que seja subpasta da pasta do usuário atualmente logado no sistema operacional. Assim podemos evitar eventuais problemas envolvendo o mecanismo de permissões do sistema operacional. Por isso, vamos criar uma pasta como subpasta da pasta de documentos do usuário. Para encontrá-la, comece clicando em Este Computador, como na Figura 2.2.2.

Figura 2.2.2 – Este Computador.

Na tela seguinte, exibida pela Figura 2.2.3, clique duas vezes em Disco Local (C:).

Figura 2.2.3 – Disco Local (C:).

A seguir, encontre a pasta chamada Usuários — ou Users, depende do idioma do seu sistema operacional — e clique duas vezes sobre ela. Veja a Figura 2.2.4.

Figura 2.2.4 – Pasta Usuários.

As pastas exibidas na tela seguinte, exibida pela Figura 2.2.5, são referentes a cada usuário existente no sistema operacional. Cada um tem a sua. Encontre a pasta que leva o nome do usuário que você utilizou para acessar o sistema operacional do seu computador e clique duas vezes sobre ela. Neste exemplo, o usuário se chama Aulas. Claro, o nome do seu usuário provavelmente será diferente.

Figura 2.2.5 – Pasta do usuário.

Na pasta seguinte, exibida pela Figura 2.2.6, deverá ser possível encontrar uma pasta chamada Documentos — ou Documents. Clique duas vezes sobre ela.

Figura 2.2.6 – Pasta Documentos.

Criando as pastas java e aula01

Agora podemos criar uma pasta. Digamos que teremos diversas aulas de Java, apenas como exemplo. Uma boa ideia seria criar uma pasta chamada java que teria como finalidade abrigar diversas subpastas, uma para cada aula. Façamos isso. Comece clicando com o direito no "vazio" para obter o menu de contexto exibido pela Figura 2.2.7.

Figura 2.2.7 – Novo >> Pasta.

Como na Figura 2.2.8, escolha o nome "java", sem as aspas. A seguir, aperte Enter para confirmar o nome da pasta.

Figura 2.2.8 – Pasta java.

Clique duas vezes sobre a pasta que acaba de criar. Na tela resultante, clique com o direito novamente na região "vazia", crie uma nova pasta e escolha o nome "aula01". Aperte Enter a seguir. Veja as figuras 2.2.9 e 2.2.10.

Figura 2.2.9 – Criando uma subpasta dentro de java.

Figura 2.2.10 – Pasta aula01.

5. Abrindo o VS Code vinculado à pasta

Agora podemos abrir o VS Code, vinculando-o à pasta criada. Para tal, clique no botão iniciar do Windows e busque por VS Code, como mostra a Figura 2.2.11.

Figura 2.2.11 – Abrindo o VS Code.

Provavelmente, o VS Code dará a opção de fazer a instalação do pacote de idiomas que inclui o português do Brasil. Façamos isso. Clique na opção destacada pela Figura 2.2.12.

Figura 2.2.12 – Instalando o pacote de idioma.

Feita a instalação, o VS Code deve reiniciar-se automaticamente. Agora vamos fazer o vínculo com a pasta. Clique em Arquivo >> Abrir pasta, como na Figura 2.2.13.

Figura 2.2.13 – Arquivo >> Abrir pasta.

Na tela resultante, clique Este Computador >> Disco Local (C:) >> Usuários >> nomeDoSeuUsuario >> java >> aula01. A esperança é obter um resultado semelhante àquele exibido pela Figura 2.2.14. Clique em Selecionar Pasta.

Figura 2.2.14 – Selecionando a pasta aula01.

O VS Code possui recursos capazes de executar arquivos automaticamente. Por isso, ele pergunta se você confia nos autores desta pasta. Em outras palavras, se os arquivos que serão armazenados nela são confiáveis. Marque a caixinha e clique no botão destacado pela Figura 2.2.15.

Figura 2.2.15 – Confiando nos autores da pasta.

Agora, o VS Code deve estar exibindo uma tela com diversos links. Repare que alguns deles dão acesso a tutoriais sobre o uso do VS Code e podem ser muito interessantes. Procure visitá-los quando possível. Neste momento, você pode fechar esta aba, como mostra a Figura 2.2.16.

Figura 2.2.16 – Fechando a aba de introdução.

Observe que o menu à esquerda mostra o nome da pasta. Veja a Figura 2.2.17. Agora estamos prontos para trabalhar com o VS Code. Ele está vinculado a uma pasta!

Figura 2.2.17 – VS Code vinculado à pasta aula01.

O menu à esquerda se chama Explorador. Você pode ocultá-lo — para ganhar mais espaço para trabalhar nos seus arquivos, por exemplo — e exibi-lo novamente clicando no botão destacado pela Figura 2.2.18.

Figura 2.2.18 – Ocultando e exibindo o Explorador.

6. Trocando o tema de cores

Por padrão, o VS Code utiliza um tema escuro. Se desejar trocar, você pode fazê-lo clicando em Arquivo >> Preferências >> Tema de Cores, como mostra a Figura 2.2.19.

Figura 2.2.19 – Arquivo >> Preferências >> Tema de Cores.

Na tela resultante, exibida pela Figura 2.2.20, escolha, por exemplo, o tema Claro+ (claro padrão).

Figura 2.2.20 – Escolhendo o tema Claro+.

Volte ao VS Code e verifique o resultado. Se desejar, teste outras opções e verifique a que lhe agrada mais!

7. Abrindo um terminal vinculado ao VS Code

Quando interagimos com o sistema operacional, estamos interessados em realizar alguma tarefa, o que é, em geral, feito por algum programa que solicitamos que seja aberto. A forma mais comum de fazê-lo se dá por meio do uso de interfaces gráficas ou "janelas". Também é possível interagir com o sistema operacional solicitando que ele, por exemplo, execute programas, textualmente. Ou seja, digitando comandos que devem ser executados. Isso é feito pela conhecida linha de comando. As expressões shell, terminal, bash, prompt de comando etc. são utilizadas para se referir a este mecanismo.

O VS Code permite que terminais internos sejam abertos, o que facilita bastante o trabalho. Para tal, basta clicar em Terminal >> Novo Terminal como na Figura 2.2.21.

Figura 2.2.21 – Terminal >> Novo Terminal.

O resultado esperado se parece com aquele que a Figura 2.2.22 exibe.

Figura 2.2.22 – Terminal aberto no VS Code.

Digite, por exemplo, o comando pwd — de print working directory. O resultado deve ser semelhante ao que a Figura 2.2.23 exibe. Este comando exibe o diretório a que o terminal se encontra vinculado no momento.

Terminal

pwd

Figura 2.2.23 – Resultado do comando pwd: o terminal está na pasta aula01.

8. Parabéns!

Você instalou o VS Code, criou uma pasta de trabalho dentro da pasta do seu usuário, vinculou o editor a ela, ajustou o tema de cores e abriu um terminal integrado já posicionado na pasta.

Próximos passos

• Visite os tutoriais oferecidos na tela de boas-vindas do VS Code
• Siga para o codelab de introdução à lógica de programação e ao primeiro programa em Java