O Visual Studio Code é um software gratuito disponibilizado pela Microsoft usado para desenvolver código em diversas linguagens de programação diferentes. Este artigo ensina como você instala e faz as principais configurações do Visual Studio Code para trabalhar com o Office Addins.

Introdução

O Visual Studio Code (ou simplesmente VSCode e não confundir com o clássico Visual Studio) pode ajudar bastante no processo de criação dos seus Office Addins. Costumo usá-lo para criar o layout das páginas (HTML/CSS) ou testar código (JavaScript/TypeScript) que não interaja diretamente com o Excel.

Não é obrigatório instalar o Visual Studio Code para desenvolver seus Office Addins.

O Visual Studio consegue fazer tudo o que o Visual Studio Code faz, mas de forma um pouco mais desajeitada e não tão prática, justificando então o uso do Visual Studio Code. Por outro lado, nem tudo o que o Visual Studio faz, o Visual Studio Code consegue fazer.

Instalação

O Visual Studio Code pode ser obtido em: https://code.visualstudio.com/Download.

Baixe e execute o instalador (dê preferência ao instalador de 64 bits, se a arquitetura do seu Windows suportar).

Durante a instalação, será perguntado qual idioma deseja instalar. Não há opção em português mas, como bom programador você deve ser, mesmo que tivesse, seria recomendável você manter em inglês mesmo, que é o idioma que todo programador deve usar.

Avance todas as etapas do instalador até concluir a instalação e abra o Visual Studio Code.

Trabalhar com um Projeto no VSCode

Partindo da premissa que cada projeto de Office Addins fica numa pasta diferente, então, ao se trabalhar num projeto no VSCode, o que iremos fazer será abrir uma pasta, e não arquivos avulsos. Não se preocupe que, ao carregar a pasta raiz do seu projeto, você verá todos os arquivos que o compõe e pode acessá-los facilmente.

Crie, em algum lugar no seu computador, uma pasta chamada Meu Primeiro Projeto. Em seguida, no VSCode, vá no menu File >> Open Folder (ou use o atalho Ctrl+K, Ctrl+O), selecione a pasta criada e, em seguida, clique no botão Selecionar pasta:

Seu projeto foi carregado. Clique na seta representada por (1 da figura abaixo) para mostrar ou ocultar o painel Explorer.

Se você fechar o VSCode, ao abrí-lo novamente irá automaticamente carregar o último projeto (isto é, pasta) que você deixou na última sessão.

No Explorer (2) em Open Editors são mostrados todos os itens que, no momento estão carregados na janela de código e estão numa das abas. O item Welcome pode ser desconsiderado, não é um arquivo e pode ser fechado clicando no pequeno ícone de X à esquerda do seu nome.

Ainda no Explorer, Meu Primeiro Projeto lista todos os arquivos do seu projeto. Não terá nenhum item, porque não há nenhum arquivo na pasta.

Em (3) são listadas todas as abas no seu VSCode. À medida que você abre novas abas, elas são acrescentadas na região Open Editors no seu Explorer. Você pode criar quantas abas quiser, dando dois cliques nos nomes dos arquivos, ou fechar, clicando no ícone X tanto no Explorer como nas abas:

Vamos criar um arquivo em branco HTML. Você pode clicar com o botão da direita no Explorer e então clicar em New File, ou então ir no menu File >> New File ou então simplesmente pressionar Ctrl+N.

Dê o nome de index.html e pressione Enter. A janela de código do index.html será exibida, em branco. Cole o código abaixo no seu editor:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <h2>Olá mundo!</h2>
</body>
</html>

Este deverá ser o resultado:

Pressione Ctrl+S para salvar as alterações no arquivo index.html.

Agora, vamos ver como um navegador interpreta esse código. Para tal, basta abrir o arquivo index.html na pasta seu projeto. Se você quiser localizar o arquivo de uma forma fácil, basta clicar com o botão da direita, sobre o nome dele no Explorer e, no menu flutuante, em Reveal in Explorer:

Isso irá abrir uma janela do Windows Explorer na pasta do arquivo:

Ao abrir o arquivo, provavelmente seu navegador padrão será aberto e então você terá o resultado da visão:

De volta ao VSCode, se você editar o código de index.html e pressionar Ctrl+S para salvar, basta voltar ao navegador e pressionar F5 para recarregar o arquivo e atualizar a visão no navegador.

Existe uma extensão chamada Live Server que simplifica as etapas de ir até o navegador e recarrega manualmente a página alterada. Basta continuar lendo este artigo para aprender como usar essa facilidade.

Extensões

As Extensões são o que tornam o VSCode poderoso. Você pode instalar várias delas, e cada uma delas integra ao aplicativo acrescentando uma funcionalidade diferente.

Por exemplo: existe uma extensão que permite você compilar e executar código da linguagem C#, outro que mostra erros no seu código e até um que permite que mais de uma pessoa edite, ao mesmo tempo, o mesmo arquivo!

Para instalar uma Extensão no VSCode, basta clicar no ícone Extensions (cuja tecla de atalho é Ctrl+Shift+X (lembre x de eXtensions). Um painel irá abrir, e então basta você digitar o nome da extensão desejada:

Neste caso, vou instalar a extensão chamada Live Server, que foi o que digitei na caixa de texto. Ela foi o primeiro resultado, a qual selecionei. Então, é mostrado um pequeno resumo da extensão, incluindo ícones, avaliação, quantidade de downloads e resumo, onde cliquei no botão Install:

O processo de instalação será iniciado, pode demorar até uns 30 segundos para instalar completamente, até o texto do botão Install mudar para a cor azul e com o texto Uninstall, que caso clicado, irá desinstalar a extensão.

Você deve ter notado que apareceu outro botão ao lado de Uninstall, que é o Disable. Esse comando desabilita uma extensão instalada, mas não a remove do VSCode. Isso é útil para quando você precisa fazer testes ou desabilitar uma extensão temporariamente sem perder as configurações específicas salvas para essa extensão. Você pode voltar a reabilitá-la novamente de forma rápida, acessando essa mesma tela.

No próximo post, irei mostrar quais são as melhores extensões que você pode instalar no seu VSCode para desenvolver seus projetos de Office Addins.

Download

Para baixar o projeto de exemplo utilizado nesta página, clique aqui.