Guia Completo do Visual Studio Code

O que � o Visual Studio Code?

O Visual Studio Code (ou VS Code) �, basicamente, um editor de c�digos. Ele tamb�m � chamado de IDE.

Todo programador precisa de um IDE, ou editor de c�digos, para escrever o c�digo-fonte dos sistemas que est� trabalhando.

Por exemplo: se voc� est� começando a criar suas p�ginas web, voc� pode utilizar o VS Code para digitar as tags HTML da sua p�gina.

O VS Code � totalmente gratuito e foi desenvolvido pela Microsoft.

Voc� pode fazer o download do editor atrav�s deste link, como mostra a Figura 1.

Figura 1. Visual Studio Code

Para aprofundar seu conhecimento sobre o VS Code, ao longo deste guia abordaremos os seguintes t�picos:

Instalaç�o do VS Code (Windows e Linux): Aprenda como instalar o VS Code em sistemas Windows e Linux.
Criaç�o de Arquivos e Pastas para Seus Projetos: Saiba como criar arquivos e pastas necess�rios para os seus projetos, garantindo uma estrutura organizada.
Instalar extens�es: Conheça e instale extens�es que tornar�o o desenvolvimento do seu projeto mais eficiente.

Instalaç�o do VS Code

O primeiro passo para utilizar o Visual Studio Code (ou VS Code) � realizar a sua instalaç�o no computador.

O VS Code � multiplataforma, ou seja, ele pode ser utilizado em qualquer sistema operacional (Windows, Mac ou Linux). Neste t�pico veremos a instalaç�o do VS Code no Windows e no Linux.

Processo de instalaç�o no Windows

Para instalar o VS Code no Windows, primeiro voc� deve acessar o site oficial e fazer o download, como mostra a Figura 2.

Figura 2. Site oficial do Visual Studio Code

Ap�s ter feito o download, execute o arquivo baixado, como vemos na Figura 3.

Figura 3. Executando o arquivo baixado

Ao executar o arquivo baixado, ser� exibida uma janela que pedir� para voc� aceitar os termos do acordo de licença do VS Code.

Basta marcar em 'Eu aceito o acordo' e em seguida clicar em 'Pr�ximo', como vemos naFigura 4.

Figura 4. Aceitar acordo de licença

Em seguida,como vemos na Figura 5, uma janela para seleç�o de tarefas adicionais ser� exibida. N�o altere nenhum dos campos j� marcados e siga em frente para a pr�xima janela.

Figura 5. Selecionar tarefas adicionais

Na pr�xima janela, apresentada na Figura 6, clique em 'Instalar' para iniciar a instalaç�o do VS Code no seu computador.

Figura 6. Iniciar a instalaç�o do VS Code

Pronto! Com isso o VS Code j� est� instalado no seu computador, como vemos na Figura 7.

Figura 7. Confirmaç�o da instalaç�o do VS Code

Ao concluir o processo de instalaç�o, o VS Code ser� aberto no seu computador (Figura 8).

Figura 8. Tela inicial do VS Code

Processo de instalaç�o no Linux

Existem duas formas de instalar o Visual Studio Code em sistema Linux.

A primeira forma � parecida com o procedimento no Windows, ou seja, voc� deve acessar o site oficial, fazer o download do VS Code e executar o arquivo baixado, como na Figura 9.

Figura 9. Baixando o VS Code (Linux)

No caso do Linux, o arquivo de instalaç�o do VS Code tem a extens�o .deb.

Em seguida, execute o arquivo baixado atrav�s do 'instalador de programas', como mostra a Figura 10.

Figura 10. Executando arquivo do VS Code baixado

Com o instalador de programas aberto, basta clicar no bot�o 'instalar' e o VS Code ser� instalado no seu Linux (Figura 11).

Figura 11. Instalando o VS Code via instalador de programas

Para confirmar a instalaç�o, basta acessar o 'Menu de aplicativos' - apresentado na Figura 12 - do Linux e digitar o nome code. Com isso voc� pode abrir o VS Code no seu Linux, ao clicar no �cone do editor.

Figura 12. Confirmando a instalaç�o do VS Code via 'Menu de aplicativos'

A outra forma de fazer a instalaç�o do VS Code no Linux � atrav�s do terminal.Para isso, basta executar os comandos do C�digo 1 no terminal, que o editor ser� instalado corretamente.


  sudo apt-get update /* comando para atualizar o Linux */
   
  sudo apt install code /* comando para instalar o VS Code */
   
  code /* comando para abrir a tela inicial do VS Code */

C�digo 1. Comandos para a instalaç�o do VS Code no Linux, via terminal

Veja na Animaç�o 1 o VS Code sendo instalado no Linux via terminal.

Animaç�o 1. Instalando o VS Code via terminal

Alterando o idioma do VS Code

Para alterar o idioma do VS Code, ap�s abrir o programa v� at� o menu 'View (Ver)' e clique em 'Command Palette (Paleta de Comandos)', como mostra a Figura 13.

Figura 13. Paleta de Comandos do VS Code

Na barra de busca que aparece (Figura 14), digite 'Language' e clique em 'Configure Display Language'.

Figura 14. Barra de busca do VS Code

Na lista de idiomas escolha a opç�o desejada (Figura 15), no nosso caso, portugu�s (Brasil).

Figura 15. Escolha do idioma portugu�s

Um aviso aparecer� (Figura 16), clique em 'Restart' para reiniciar o VS Code.

Figura 16. Restartar para validar a mudança de idioma

Ap�s reiniciado o seu Visual Studio Code estar� em portugu�s.

Criaç�o de pastas e arquivos

A criaç�o de pastas e arquivos � um passo fundamental para a organizaç�o de qualquer projeto de programaç�o.

Atrav�s do explorador de arquivos do VS Code (localizado no menu lateral esquerdo), voc� pode abrir uma pasta j� criada no seu sistema e tamb�m criar arquivos e pastas necess�rios para o seu projeto.

Veja na Figura 17 como usar o explorador de arquivos do VS Code para acessar uma pasta do sistema.

Figura 17. Acessando pasta do projeto (Passo 1)

Nesse caso, a pasta 'teste' ser� utilizada para armazenar os arquivos do projeto (Figura 18).

Figura 18. Acessando pasta do projeto (Passo 2)

Com a pasta 'teste' aberta, podemos criar os arquivos necess�rios para o desenvolvimento do projeto.

Como estamos trabalhando com um projeto front-end, vamos criar os arquivos HTML e CSS (Figura 19).

Figura 19. Arquivos criados no VS Code

Para criar um novo arquivo, basta clicar no �cone localizado no canto direito do explorador de arquivos, ao lado do nome da pasta do projeto.

Ao clicar nesse �cone, um campo ser� exibido, permitindo que voc� insira o nome do arquivo, incluindo a extens�o apropriada (por exemplo, "index.html" ou "styles.css").

Veja na Animaç�o 2 o processo de criaç�o de arquivos no VS Code.

Animaç�o 2. Processo de criaç�o de arquivos no VS Code

No VS Code tamb�m � poss�vel criar subpastas para melhorar a organizaç�o do seu projeto.

Para isso, basta clicar no segundo �cone do explorador de arquivos, da esquerda para a direita.

Veja na Animaç�o 3 o processo de criaç�o de uma pasta no VS Code.

Animaç�o 3. Processo de criaç�o de uma pasta no VS Code

Nesse caso, criamos a subpasta 'img', que ser� utilizada para armazenar as imagens de um projeto.

Escrevendo c�digo no VS Code

Escrever c�digos no VS Code � uma tarefa simples. Voc� precisa apenas digitar o c�digo nos arquivos correspondentes.

Por exemplo, um c�digo HTML ser� digitado em um arquivo .html, enquanto um c�digo CSS ser� digitado em um arquivo .css.

Veja na Figura 20 um exemplo de c�digo HTML aplicado no arquivo index.html.

Figura 20. C�digo HTML escrito no arquivo index.html

Agora veja na Figura 21 um exemplo de c�digo CSS digitado no arquivo style.css.

Figura 21. C�digo CSS escrito no arquivo style.css

Veja na Animaç�o 4 os c�digos HTML e CSS sendo escrito nos seus respectivos arquivos.

Animaç�o 4. Escrevendo c�digos no VS Code

Editando um arquivo j� existente

Para editar o c�digo de qualquer arquivo existente, voc� primeiro deve abri-lo no editor.

Para isso, primeiro abra a pasta do arquivo que deseja editar atrav�s do explorador de arquivos, como na Figura 22.

Figura 22. Abrindo arquivo no VS Code

Ao fazer isso, ser� aberta uma janela do explorador do seu sistema (Windows) onde voc� poder� selecionar a pasta desejada, como na Figura 23.

Figura 23. Escolhendo um arquivo HTML

A pasta selecionada ser� aberta no VS Code e com isso voc� pode clicar no arquivo e edit�-lo � vontade, como mostra a Figura 24.

Figura 24. Abrindo o arquivo HTML que ser� editado

Veja na Animaç�o 5 o arquivo acessado sendo editado.

Animaç�o 5. Ediç�o de um arquivo

Salvando c�digo no VS Code

O VS Code tamb�m facilita o processo de salvar qualquer c�digo que voc� tenha escrito em um arquivo. Basta utilizar as teclas de atalho 'Ctrl + S'.

Voc� tamb�m pode definir que o VS Code salve o c�digo escrito de forma autom�tica.

Para isso, atrav�s do 'Gerenciador' localizado no canto inferior esquerdo, voc� deve acessar as configuraç�es do VS Code, como mostra a Figura 25.

Figura 25. Acessando as configuraç�es do VS Code

Ao fazer isso, a aba 'Configuraç�es' ser� aberta no seu editor, conforme apresenta a Figura 26.

Figura 26. VS Code exibindo as 'Configuraç�es'

Observe que no in�cio da aba 'Configuraç�es' (Figura 27) � exibido o campo Files: Auto Save.

Figura 27. VS Code exibindo o campo Files: Auto Save

Ser� atrav�s deste campo que voc� definir� o salvamento autom�tico dos seus c�digos escritos.

Basta selecionar a opç�o 'afterDelay'. Isso far� com que o VS Code salve automaticamente qualquer alteraç�o feita em um arquivo, como mostra a Figura 28.

Figura 28. Definindo o salvamento autom�tico

Conhecendo a barra de atividades do Visual Studio Code

Ao abrir o VS Code, voc� notar� uma barra de atividades no canto esquerdo.

Essa barra de atividades � uma parte central da interface do VS Code, fornecendo acesso r�pido a funcionalidades essenciais.

Veja os principais itens presentes na barra de atividades.

1 - Explorador de Arquivos

Permite que voc� navegue e gerencie seus projetos e arquivos, como mostra a Figura 29.

Figura 29. Explorador de arquivos

2 - Pesquisar

Permite efetuar buscas em arquivos abertos, como mostra a Figura 30.

Figura 30. Pesquisar

3 - Gerenciador de Extens�es

Atrav�s dele voc� pode instalar, atualizar e gerenciar extens�es que estendem a funcionalidade do VS Code, como mostra a Figura 31.

Figura 31. Gerenciador de extens�es

4 - Gerenciador

Abre o gerenciador de tarefas, que permite definir e personalizar as configuraç�es do seu VS Code, como mostra a Figura 32.

Figura 32. Gerenciador de Tarefas

Instalar extens�es do VS Code

As extens�es s�o softwares que podem ser adicionados ao Visual Studio Code para melhorar e facilitar o uso do editor.

Elas fornecem recursos extras e ferramentas que n�o est�o dispon�veis no editor padr�o.

Veja na Figura 33 algumas extens�es do VS Code.

Figura 33. Extens�es do VS Code

Essas extens�es podem variar desde temas visuais, suporte para linguagens de programaç�o, automatizaç�o de tarefas e muito mais.

Veja abaixo uma lista das principais extens�es utilizadas pelos desenvolvedores:

Color Highlight
Extens�es de tema
- VS Code Claro
- Shades of Purple
- Cobalt Blue
Live Server

Conhecer e instalar extens�es no VS Code � essencial para melhorar o uso do editor e personalizar a sua experi�ncia de desenvolvimento.

Para instalar uma extens�o utilizamos o gerenciador de extens�es, localizado na barra de atividade do editor, como mostra a Figura 34.

Figura 34. Gerenciador de extens�es

Com o gerenciador de extens�es aberto, voc� pode escolher qualquer extens�o dispon�vel no cat�logo. Basta digitar na barra de pesquisa o nome da extens�o desejada, como mostrado na Figura 35.

Figura 35. Pesquisando a extens�o Live Server

Ap�s escolher uma extens�o, clique em "Instalar" para iniciar o processo de instalaç�o, como mostra a Figura 36. Dessa forma, o VS Code cuidar� do download e far� a instalaç�o autom�tica da extens�o escolhida.

Figura 36. Exemplo de instalaç�o de extens�o

Esse processo � padr�o e serve para instalar qualquer extens�o do VS Code.

Veja na Animaç�o 6 o processo de instalaç�o de uma extens�o no VS Code.

Animaç�o 6. Instalaç�o de uma extens�o no VS Code

Veja mais detalhes sobre algumas das principais extens�es utilizadas por programadores.

1 - Color Highlight

Esta extens�o destaca c�digos de cores, facilitando a identificaç�o visual de valores de cor, especialmente em arquivos CSS e de estilo (Figura 37).

Figura 37. Color Highlight

Ao instalar a extens�o Color Highlight, qualquer valor relacionado a cores no c�digo CSS (seja em formato hexadecimal ou nominal), receber� um efeito de cor de fundo id�ntico ao valor definido (Figura 38). Por exemplo:

O valor hexadecimal #000000, recebe uma cor de fundo preta.
O valor hexadecimal #ff11ff, recebe uma cor de fundo rosa.
O valor nominal 'red', recebe uma cor de fundo vermelha.
E o valor hexadecimal #fff, recebe uma cor de fundo branca

Figura 38. Valores hexadecimais recebendo efeito do Color Highlight

Veja na Animaç�o 7 a instalaç�o e o uso da extens�o Color Highlight.

Animaç�o 7. Instalando a extens�o Color Highlight

2 - Extens�es de Tema

As extens�es de tema permitem personalizar o esquema de cores do Visual Studio Code. No exemplo da Figura 39 voc� pode conferir um tema que usa branco como cor predominante.

Figura 39. Tema VS Code claro

O VS Code disponibiliza uma extensa variedade de temas para voc� escolher o que mais combina com seu gosto.

Veja algumas opç�es de temas dispon�veis no editor:

Shades of Purple (Figura 40)

Figura 40. Extens�o Shades of Purple

Este tema apresenta um esquema de tons vibrantes de roxo com detalhes em azul, amarelo e verde, como mostra a Figura 41.

Figura 41. Editor com o tema Shades of Purple

Cobalt Blue (Figura 42)

Figura 42. Extens�o Cobalt Blue

Esse tema possui um esquema de cores azul-cobalto com detalhes em amarelo e verde, como vemos na Figura 43.

Figura 43. Editor com o tema Cobalt Blue

Para aplicar um novo tema no VS Code, primeiro voc� deve instalar a extens�o correspondente ao tema desejado, como mostra a Figura 44.

Figura 44. Instalando um tema

Nesse caso, instalamos a extens�o de tema Shades of Purple.

Ap�s instalar o tema desejado, v� na barra de atividade, clique em 'Gerenciador' e em seguida clique em 'Temas > Tema de Cores' (Figura 45).

Figura 45. Abrindo os temas instalados

Abaixo da barra de pesquisa do VS ser� exibido uma lista com todos os temas instalados, como mostra a Figura 46.

Figura 46. Lista de temas instalados

Basta selecionar o tema instalado que as cores do VS Code ser�o automaticamente alteradas (Figura 47).

Figura 47. Escolhendo o tema Shades of Purple

Veja na Animaç�o 8 como � aplicado um tema no VS Code.

Animaç�o 8. Aplicando um tema no VS Code

Esse processo � padr�o e serve para aplicar qualquer tema no seu VS Code.

3 - Live Server

Essa extens�o permite que voc� execute projetos front-end atrav�s de um servidor Web local, na sua pr�pria m�quina.

Isso � �til para voc� testar como realmente seus projetos front-end v�o rodar quando forem visualizados atrav�s da internet.

Contextualizando: quando voc� começa a escrever suas primeiras p�ginas HTML, normalmente voc� abre o arquivo diretamente no navegador, como mostra a Figura 48.

Figura 48. P�gina HTML aberta diretamente no navegador

Apesar de ser uma forma simples de exibir o c�digo HTML, esse caminho n�o � o mais correto, pois o usu�rio final n�o vai executar sua p�gina dessa forma.

O usu�rio vai abrir a p�gina atrav�s de um servidor Web, que roda na internet.

Ou seja, o usu�rio vai digitar uma URL para encontrar seu site. O conte�do da p�gina ser� entregue pelo servidor Web (ao inv�s de ser aberto diretamente no navegador - Figura 49).

Figura 49. Exemplo de p�gina aberta atrav�s de um servidor web

O Live Server atua como um servidor Web local. Dessa forma, voc� consegue acessar suas p�ginas HTML da mesma forma que o usu�rio final, ou seja, atrav�s de uma URL. Isso permite um teste mais 'fiel' da p�gina HTML, como vemos na Figura 50.

Figura 50. P�gina aberta com o Live Server

Nesse cen�rio, o servidor Web fica respons�vel em abrir os arquivos e enviar o conte�do para o navegador (ao inv�s de o navegador abrir o arquivo diretamente), como mostra a Figura 51.

Figura 51. Exemplo de servidor Web local

Veja na Figura 52 a extens�o Live Server exibida no Visual Studio Code.

Figura 52. Live Server

Para rodar um projeto front-end com o Live Server, clique primeiro com o bot�o direito do mouse sobre o arquivo HTML. Isso exibir� um 'menu de tarefas', apresentado na Figura 53.

Figura 53. Visualizando um projeto front-end atrav�s do Live Server (parte 1)

Em seguida clique na opç�o 'Open with Live Server', como mostra a Figura 54.

Figura 54. Visualizando um projeto front-end atrav�s do Live Server (parte 2)

Ao clicar em 'Open with Live Server', uma aba do seu navegador ser� aberta, exibindo o conte�do do arquivo index.html - Figura 55.

Figura 55. Visualizando um projeto front-end atrav�s do Live Server (parte 3)

Ao abrir o projeto com o Live Server, observe que um endereço URL ser� exibido na barra de pesquisa do seu navegador (Figura 56).

Figura 56. Endereço gerado pelo Live Server

Esse endereço � gerado automaticamente pelo Live Server e indica que o seu projeto est� rodando atrav�s de um servidor Web local.

Com o Live Server, voc� tem um servidor web local para testar seus projetos front-end de maneira mais realista, semelhante � experi�ncia online.

Assim, � poss�vel simular a visualizaç�o do seu projeto como se estivesse sendo acessado atrav�s de um endereço URL na internet.

O Live Server tamb�m permite que voc� visualize em tempo real todas as alteraç�es feitas no c�digo original do projeto. Portanto, cada vez que voc� modificar o c�digo, o Live Server atualiza automaticamente o navegador, exibindo a alteraç�o, como na Figura 57.

Figura 57. Exemplo de p�gina com o Liver Server

Veja na Animaç�o 9 como visualizar um projeto front-end atrav�s da extens�o Live Server.

Animaç�o 9. Projeto exibido no navegador atrav�s do Live Server

Conclus�o

Este guia oferece uma vis�o geral do Visual Studio Code, abordando desde a instalaç�o at� a criaç�o de arquivos e a utilizaç�o de extens�es.

Ao seguir essas orientaç�es, voc� estar� preparado para explorar as principais capacidades deste poderoso editor de c�digo.

O Visual Studio Code est� sempre evoluindo, e recebe regularmente atualizaç�es com novas funcionalidades.

Guia completo do Visual Studio Code

Neste artigo, apresentaremos um guia sobre a ferramenta mais popular para o desenvolvimento de código: o Visual Studio Code, também conhecido como VS Code. Ao longo deste guia você aprenderá desde a instalação em sistemas Windows e Linux a criar arquivos e pastas para seus projetos.