Como configurar o VS Code para o desenvolvimento para a web em alguns passos

Artigo original: How to Set Up VS Code for Web Development in A Few Simple Steps

O Visual Studio Code se tornou o editor de código mais popular. Ele é leve e poderoso. Certamente, é o meu editor predileto.

Neste artigo, mostrarei como iniciar com o VS Code e como configurá-lo para o desenvolvimento para a web.

No vídeo abaixo (em inglês), você tem um complemento para o artigo:

Introdução ao VS Code

Se você não tem o VS Code instalado no computador, acesse code.visualstudio.com e baixe-o. Você pode abrir o menu suspenso para selecionar a versão (ou versões) que deseja baixar, mas, em geral, clicar no botão maior deve ser o bastante para você.

Guia de boas-vindas do VS Code

Ao instalar e abrir o VS Code, a primeira coisa que você verá é uma guia de boas-vindas (Welcome, em inglês). Nela, você encontrará algumas seções:

Start (Iniciar): você pode decidir entre criar um arquivo ou abrir uma pasta.

Recent (Recentes): aqui, você pode encontrar as pastas recentemente abertas.

Help (Ajuda): você pode encontrar informações úteis. Por exemplo, lá, você encontra uma ficha informativa sobre os atalhos do teclado ou uma série de vídeos introdutórios.

Customize (Personalizar): você pode instalar configurações e atalhos de teclado de outros editores, como o Vim ou o Atom. Caso você esteja acostumado a usar um daqueles editores, siga em frente e confira essas configurações.

O que queremos examinar é o tema de cores. Se você selecionar Color theme, verá que existe uma lista de temas que você pode escolher. Você também pode usar as setas para cima e para baixo para pré-visualizar os temas. Meu tema favorito, no entanto, é o padrão. Ficarei com ele, portanto.

Learn (Aprender): Aqui, você encontrará 3 seleções. A primeira da lista é Find and run all commands (Encontre e execute todos os comandos). Com ela, você pode encontrar e executar todos os comandos disponíveis. Nós a utilizaremos bastante. Por isso, recomendo memorizar o atalho, que é Command/Control + Shift + P.

A segunda seleção é a Interface Overview (Visão geral da interface). Se a selecionarmos, poderemos ver os elementos mais comuns da interface do usuário, bem como o atalho para ativar/desativar esses elementos:

A última seleção é o Interactive Editor Playground (Playground interativo do editor). Aqui, você encontrará os recursos em destaque no VS Code, com instruções e exemplos.

Vamos selecionar o Emmet, por exemplo. Com o Emmet, você pode escrever atalhos e expandi-los como um trecho de código.

Digamos, por exemplo, que queremos criar um elemento de lista não ordenada com 3 itens e que cada item tenha uma classe com o nome "fruit". Podemos digitar ul>li.fruit*3 e pressionar Tab no teclado.

Você também pode ver que, no exemplo existente, (ul>li.item$*5), eles tentaram criar uma lista não ordenada e 5 itens com o nome de classe item dentro dela. O nome da classe, porém, também vem com numeração:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Nesta seção, também é possível encontrar um link para a ficha informativa do Emmet (em inglês), que pode ser muito útil para você.

Certo. Recomendo agora que você confira alguns desses recursos. Eles são muitos e não há problema em não entender todos eles agora. Você poderá sempre voltar aqui no futuro.

Explorador de arquivos do VS Code

Em seguida, vamos passar para o File Explorer (Explorador de arquivos) e selecionar a primeira guia na barra lateral de navegação (o atalho de teclado para ela é Command/Control + Shift + E).

Aqui, você pode abrir uma pasta existente, mas vamos criar uma pasta e um arquivo. Em vez de abrir uma nova janela, vamos abrir o terminal no VS Code. Você pode selecionar o botão error and warning (erros e avisos) na barra de status e, em seguida, selecionar a guia Terminal, ou ainda usar o atalho Control + `.

Neste momento, estou no meu diretório home. Vamos criar uma pasta, digitando mkdir vscode-tutorials e acessá-la usando cd vscode-tutorials.

Nota da tradução: no Windows, o terminal aberto seria o do Powershell. O diretório seria o diretório principal do seu usuário, C:\Users\seu_nome_de_usuario. O comando para criar a pasta seria md vscode-tutorials.

Agora, queremos abrir a pasta dentro do VS Code. Para isso, podemos selecionar o botão Open folder (Abrir pasta) e navegar até o diretório em questão – é bastante trabalho. Em vez disso, no terminal, podemos digitar code .. Agora, você pode encontrar o erro: bash: code: command not found.

Para consertar isso, podemos abrir a Command Palette (Paleta de comandos) e procurar por Shell Command: Install code command in Path (Comando do shell: instalar o comando code no Path) e selecioná-lo. Agora, se voltarmos ao terminal e digitarmos code ., a nova janela do VS Code abrirá na pasta criada.

Bem, em seguida, queremos criar um arquivo. Na seção da pasta, podemos clicar no ícone do arquivo novo e clicar com o botão direito e selecionar new file (Novo arquivo). Vamos dar ao arquivo o nome index.html e, no arquivo, vamos digitar o ponto de exclamação (!) e pressionar Tab ou Enter. Com o Emmet, isso gerará um template de HTML.

Agora, é hora de abrir a Command Palette (Paleta de comandos) novamente e de procurar por Format Document (Formatar documento) e selecioná-lo. Você pode ver que o comando adiciona espaçamentos entre as diversas seções do código e o deixa mais limpo.

Esse é um recurso muito útil do VS Code. Se, no entanto, não quisermos procurar por Format Document toda hora e se quisermos formatar o documento sempre que salvarmos o arquivo, há uma alternativa.

Você perceberá, também, que a indentação está com 4 espaços, o que, na minha opinião, é um exagero. Podemos alterar isso para 2 espaços apenas. Para fazer isso, podemos acessar Setting (Configurações) ou usar o atalho Command/Control + ,.

Na guia Commonly Used (Comumente usados), podemos alterar Tab size (Tamanho da tabulação) para 2. Em Text Editor/Formatting (Editor de texto/Formatação), podemos selecionar Format on Save (Formatar ao salvar). Agora, sempre que salvarmos, os arquivos serão formatados adequadamente.

Extensões do VS Code

A última coisa que eu gostaria de mostrar é como utilizar as Extensões. Você pode selecionar a guia Extensions (Extensões) na barra lateral de navegação ou usar o atalho: Command/Control + Shift + X.

Aqui, podemos filtrar as extensões, por exemplo, por Most Popular ou Recommended (Mais populares ou Recomendadas).

Você pode selecionar diversas extensões. A primeira que precisaremos instalar, porém, é o Live Server. Com ele, podemos fazer um recarregamento local do servidor de páginas estáticas da web.

Por exemplo, se formos em nosso arquivo index.html e se abrirmos a Command Palette e procurarmos por Live Server: Open with Live Server (Live Server: abrir com o Live Server), veremos que uma nova guia foi aberta no navegador.

Se criarmos um elemento no HTML – por exemplo, <h1>Introdução ao VS Code<h1/> – depois que salvarmos a página, ela será recarregada automaticamente e será possível ver as alterações. No arquivo index.html, você também pode abrir o Live Server com o botão Go Live (algo como "recarregar com as alterações") na barra de status.

Conclusão

Há muitas outras extensões úteis, mas tratarei delas em outro artigo e em outro vídeo.

De momento, com esta breve introdução e guia de configuração, tenho certeza de que você está pronto para começar em sua jornada pelo desenvolvimento para a web.

Assim, concluímos este artigo. Você pode seguir o autor por suas redes sociais para ver atualizações futuras. Uma boa programação para você e até a próxima.

__________ 🐣 Sobre o autor __________

• Ele é o criador do site DevChallenges
• Você pode se inscrever no canal do autor no YouTube
• Você pode seguir o autor no Twitter
• Você também pode se inscrever no servidor do Discord do DevChallenges