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
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 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 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:
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:
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:
yo code
Após executar o comando você deve ver no seu terminal algo parecido com a imagem abaixo:
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:
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:
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:
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.
Clique em New Token e preencha o formulário conforme a imagem abaixo:
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:
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:
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.
Assim será possível saber o "escopo" a ser customizado, como os nomes de variáveis por exemplo. Copie o scope exibido
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:
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
Top comments (0)