Desenvolva sites com Visual Studio Code

O Visual Studio Code é uma ferramenta de desenvolvimento multiplataforma. Ele é leve, possui recursos como highlight (destaque para palavras especiais do código) e possui integração com o Git, repositório para controle de versões de código.

Outro recurso presente também no Visual Studio Code é tarefas de depuração de código e a possibilidade de intregação com o Node.js para execução de Javascript.

Instalando o Visual Studio Code

Para instalar o Visual Studio Code, você deve baixar e executar o instalador através do site https://code.visualstudio.com/Download. Ele está disponível em diferentes plataformas (Linux, Mac OS X e Windows).

Conhecendo o Visual Studio Code

O Visual Studio Code permite que você trabalhe com arquivos individuais ou com uma pasta contendo vários arquivos. Quando desenvolvemos Sites, o ideal é abrirmos a pasta raiz do site de onde teremos acesso a todos os nossos arquivos.

Tela Inicial do Visual Studio Code

Para abrir uma pasta, clique em “Open Folder” ou acesse o item de menu “File” > “Open Folder”. E quando abrimos a pasta, já é mapeado todo conteúdo da pasta no Visual Studio Code:

Pasta Selecionada no Visual Studio Code

Note que na parte inferior da ferramenta são exibidas informações sobre o arquivo aberto no editor. Se clicarmos nessas opções, o Visual Studio Code irá exibir outras opções possíveis. Para nosso exemplo acima, as informações exibidas são:

1. Linha e coluna do local onde está o ponteiro de edição. No nosso caso é Linha 1 e Coluna 16.
2. Codificação de caracteres do arquivo. No nosso caso é UTF-8.
3. Sequência de código para término de linha. No nosso caso é CLRF.
4. Tipo do arquivo mostrado no editor. No nosso caso é HTML. Aliás isso permite identificar quais palavras serão destacadas (highlight) no texto. Nesse site você pode verificar quais linguagens são suportadas pelo Visual Studio Code.
5. Por fim tem ainda uma carinha (smile) que permite a você dar sua opinião sobre a ferramenta.
   

   O Visual Studio Code ainda está em uma versão preview. Portanto, qualquer opinião é relevante para aperfeiçoar ainda mais a ferramenta.

No lado esquerdo da ferramenta temos também as opções:

1. Explore: para exibir ou esconder a árvore de arquivos e diretórios contidos na pasta aberta na ferramenta.
2. Search: para busca de informações. Essa busca envolve tanto nome de arquivos e pastas como também o conteúdo dos arquivos. Por exemplo, se procurarmos por img, o Visual Studio Code irá exibir todos os arquivos que contém o texto img.

   

   Busca dentro do Visual Studio Code

3. Git: Quando a pasta que abrimos no Visual Studio Code é a pasta raiz de um repositório Git, aqui teremos opções para executar comandos Git como Pull, Push e Commit.

   

   Integração com Git

4. Depuração: Permite definir como iremos testar nosso conteúdo. Aqui podemos configurar, por exemplo, uma aplicação em Javascript e executá-la via Node.js para poder testar nosso conteúdo da pasta. Essa configuração é feita através do arquivo launch.json.

   

   Depuração no Visual Studio Code

Testando nosso Site num servidor Web local

Uma etapa importante no desenvolvimento de sites é termos disponível um servidor HTTP para testar nosso site. Para tanto, precisamos que a ferramenta de desenvolvimento nos ajude a publicar nossas páginas no servidor.

O Visual Studio Code permite configurar a tarefa de execução do conteúdo da pasta. E podemos fazer isso usando qualquer comando externo de linha de comando ou até scripts Javascript executados no Node.js.

Para nosso exemplo aqui, vamos usar o Node.js para publicar o conteúdo da pasta num servidor HTTP local.

1. Instalar no Node.js.

   

   Instalando o Node.js

2. Abrir o console (prompt de comando) e executar o seguinte comando:
   

   npm install http-server -g

3. Para testar, especificar o seguinte comando:
   

   http-server .

   Será iniciado um servidor HTTP por padrão na porta 8080 publicando o conteúdo da pasta onde o comando `http-server` foi executado.

4. De volta no Visual Studio Code, vamos agora configurar a tarefa para executar nosso site no servidor HTTP disponibilizado pelo Node.js. Para tanto, pressionar as teclas CTRL+SHIFT+P. Será exibida uma caixa de busca. Escrever o texto “Configure” para selecionar a opção Configure Task Runner:

   

   Configurando tarefa de execução

5. Será então criado o arquivo tasks.json dentro de .vscode, criado na pasta que abrimos no Visual Studio Code. No arquivo vamos colocar o seguinte conteúdo:

   {
   	"version": "0.1.0",
   
   	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
   	"command": "http-server",
   
   	// The command is a shell script
   	"isShellCommand": true,
   
   	// Show the output window only if unrecognized errors occur.
   	"showOutput": "silent",
   
   	// args is the HelloWorld program to compile.
   	"args": [".", "-p 8081"]
   }
   

   Note que estamos configurando a tarefa para executar o comando Shell http-server. Podemos ainda passar argumentos. No caso acima, estamos configurar o servidor HTTP para iniciar na pasta corrente e na porta 8081.

   

   Arquivo tasks.json exemplo.

6. Para testar, basta agora pressionar as teclas CTRL+SHIFT+B. Será iniciado o servidor HTTP na porta 8081.

   

   Executando o comando para iniciar o servidor HTTP

   Pode ser necessário reiniciar o Visual Studio Code após a instalação do http-server para que o mesmo possa ser executado dentro da ferramenta.

7. Podemos agora abrir o nosso site usando um browser através de um dos endereços mostrados no Visual Studio Code. Exemplo: http://localhost:8081/:

   

   Abrindo o site no servidor HTTP

Quer obter mais dicas e sugestões? Comente aqui ou faça uma pergunta no Stack Overflow em Português com a tag “microsoft-edge”. E continue nos acompanhando no talkitbr.