Crie seu próprio tema para Visual Studio Code
Tags: vscode, tutorial
Published: 2021-05-17 14:31:47

O Visual Studio Code acabou se tornando a principal ferramenta de trabalho de grande parte dos desenvolvedores, já que ele oferece um bom suporte para diversas linguagens de programação e pode ser customizado conforme o gosto de cada usuário graças às suas extensões. Sendo assim passamos horas olhando para nossos códigos e sem dúvida um bom tema de cores faz toda a diferença, então por que não criar seu próprio tema?

Neste artigo eu mostrarei passo a passo como criar e publicar um tema para o `vscode`.

## Passo 0
Antes de colocarmos a mão na massa é necessário se cadastrar nos serviços que serão utilizados. 

### Theme Studio
O primeiro serviço que utilizaremos é o **Theme Studio for VS Code**. Esta ferramenta nos permitirá customizar as cores do vscode de forma visual. Para se cadastrar acesse [este link](https://themes.vscode.one/)

### Azure DevOps
O Azure DevOps é um serviço fornecido pela Microsoft que contém todas as ferramentas para gestão de projetos de software, é possível gerenciar o código fonte, as sprints e até mesmo automatizar o deploy. Precisamos ter uma conta do Azure DevOps para que seja possível publicar nosso tema no marketplace do vscode. Dito isso, acesse [este link](https://dev.azure.com/) e clique em **start free** para se cadastrar com uma conta microsoft ou **start free with Github** para usar sua conta do Github.

### Visual Studio Marketplace
O último serviço que precisamos nos cadastrar é o Marketplace . Acesse [este link](https://marketplace.visualstudio.com/manage) para se cadastrar. Quando estiver preenchendo seus dados repare que será criado um `publisher id`, você precisará informá-lo na hora de publicar seu tema no marketplace.

## Passo 1 - Preparação do ambiente
Agora que já criamos todas as contas necessárias, vamos instalar as ferramentas necessárias para a criação do tema. Primeiro vamos instalar as ferramentas para gerar o projeto base, então abra seu terminal e execute o comando abaixo:

```bash
npm install -g yo generator-code
```

Agora vamos instalar a ferramenta que nos permitirá publicar o tema no marketplace, para isso execute o comando abaixo:

```bash
npm install -g vsce
```

## Passo 2 - Criando o tema base
Nesta etapa utilizaremos a ferramenta `generator-code` para criar toda a estrutura base do tema, para isso basta executar  o seguinte comando no terminal:

```bash
yo code
```
Após executar o comando você deve ver no seu terminal algo parecido com a imagem abaixo:

![Yeoman Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q13btys52y4m2xblkhdb.png)

Selecione `New Color Theme` e em seguida `No, start fresh`. Em seguida o assistente te perguntará algumas informações sobre o tema, preencha da seguinte forma:

- What's the name of your extension? **nome-do-tema**
- What's the identifier of your extension? **nome-do-tema**
- What's the description of your extension? **Breve descrição sobre o tema**
- What's the name of your theme shown to the user? **Nome que será exibido para o usuário**

Por último você precisa escolher se o seu tema será do tipo `Dark` ou do tipo `Light`. Agora é só esperar todos os arquivos serem gerados.

## Passo 3 - customizando as cores
Finalmente chegamos na parte divertida, acesse o serviço **Theme Studio**, faça login e clique em `Create new Theme`. Você terá que escolher entre as opções `Dark` ou `Light`, aqui é importante selecionar a mesma opção que foi escolhida no passo anterior, em seguida clique em `Create Theme`. Agora você deve estar vendo uma tela como esta:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9feycxctsz8psgizjuth.png)

Na barra superior onde está escrito **Untitled** é exibido o nome do tema, clique sobre o nome para alterá-lo e coloque o nome que será exibido para o usuário. Do lado esquerdo existe um menu com 3 abas, sendo elas:

- **Colors:** Nesta seção é onde customizamos os elementos principais como StatusBar, SideBar, Terminal, inputs e botões.
- **Editor:** Nesta seção é onde customizamos as cores do editor de código em si, os balões de sugestões.
- **Syntax:** Nesta seção é onde customizamos as cores do código como variáveis, classes, palavras chaves e strings.

Quando terminar as estilizações basta clicar no botão **Save Theme** localizado no canto superior direito.

Após fazer as customizações de cores e salvar o tema você será redirecionado para a página _Your Themes_. 

## Passo 4 - Preparando o tema para ser publicado
Agora que já finalizamos a personalização das cores, precisamos repassar estas configurações para o nosso tema base. Para isso acesse o **Theme Studio**, clique em **Your Themes**, passe o mouse sobre o tema que foi criado e clique no botão de download como exibido na imagem abaixo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc31n88ycnsm3uhuiyx3.png)

Abra a pasta do tema base no vscode e substitua o conteúdo do arquivo `themes/color-theme.json` pelo conteúdo do arquivo json que foi baixado. Para testar o tema antes de publicar pressione `F5`, isso iniciará o debug e abrirá uma nova janela do vscode com o tema aplicado.
Além do arquivo de cores podemos configurar também o ícone e cor de background que será exibido no marketplace. Estas configurações são feitas no arquivo `package.json`, a imagem abaixo mostra as opções disponíveis:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9c0t2d9q8dl77fhab2c.png)

Outro arquivo importante é o `README.md`. Este arquivo funciona como a página inicial do seu tema, o conteúdo dele será exibido tanto no marketplace do vscode, quanto dentro do próprio vscode na aba de extensões.

**Obs.: Vale lembrar que para exibir imagens neste arquivo é preciso hospedá-las em algum servidor com https**

## Passo 5 - Publicando o tema
Finalmente podemos publicar nosso tema. Para fazer isso acesse o Azure DevOps, clique no ícone de usuário e acesse a opção `personal access token`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ins3gabycl1xjhob6fh.png)

Clique em New Token e preencha o formulário conforme a imagem abaixo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49tt13s33azxgpg17o99.png)

Ao clicar em create será gerado um novo token. **Copie este token e salve em um lugar seguro, pois não será exibido novamente**

Agora vá para o terminal, acesse o diretório do tema e execute o comando abaixo:

```bash
vsce login <publisher name>
``` 

Lembrando que **Publisher Name** é o seu **Publisher ID** que foi gerado no passo 0. Ao executar este comando o vsce pedirá o seu token, copie e cole o token que foi gerado no Azure DevOps. Em seguida execute o comando abaixo:

```bash
vsce publish
```

Pronto!!!
Se tudo correu bem você já poderá ver seu tema no marketplace e instalá-lo no vscode.

## Dica Extra

O **Theme Studio** facilita bastante a customização das cores, mas pode ser que você queira definir configurações mais específicas. Neste caso o ideal é fazer o seguinte:

Pressione as teclas `Ctrl + Shift + P` (`cmd + Shift + P` se estiver usando Mac OS), e selecione a opção **Developer: Inspect editor tokens and scopes** como mostra a imagem abaixo.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmq4m9aiapw7vpzaysjw.png)

Assim será possível saber o "escopo" a ser customizado, como  os nomes de variáveis por exemplo. Copie o _scope_ exibido

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eftqlleblb5iq35ujm88.png)

Em seguida abra o arquivo `themes/color-theme.json` e dentro da seção `tokenColors` procure pelo scope que você copiou para alterá-lo e, caso não exista é só criar um bloco de código como na imagem abaixo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j15kq5e7eal9vegqadzo.png)

### Explicando o bloco de código
- **name:** É uma descrição que ajuda a identificar o bloco, pode nomear como preferir
- **scope:** Aqui é onde deve ser informado o scope que você inspecionou
- **settings:** Aqui é onde de fato fazemos a customização, podemos alterar a cor da fonte, a família da fonte e colocar o texto como negrito ou itálico 
- **settings > foreground:** Entenda foreground como cor da fonte

## Referências

[Theme Studio FAQ](https://themes.vscode.one/faq/publishing-theme)

[Visual Studio Code - Create a new Color Theme](https://code.visualstudio.com/api/extension-guides/color-theme#create-a-new-color-theme)

[Visual Studio Code - Publishing Extensions](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)