Olá amigos do helpdevs, beleza? Hoje vamos aprender como criar uma extensão para VS Code.

Nos sigam em nossas redes sociais!

Se você utiliza o Visual Studio Code, seja no trabalho, na faculdade ou até mesmo em projetos pessoais, já deve ter se deparado com as famosas extensions!!

Extension, ou extensões, nada mais são do que plugins que adicionam novos recursos ao editor de texto de Microsoft. Com elas você pode mudar o visual (tema) do VS Code, criar code snippets, configurar novos atalhos de teclado e até mesmo dar suporte a uma nova linguagem!!

Bora criar a nossa própria extensão!

Set up

Para este exemplo, vamos criar uma simples extensão para VS Code simples, que ao ser acionada, cria um arquivo HTML básico para facilitar a vida daquele dev front end que rotineiramente precisa escrever este tipo de arquivo. Para isto, vamos precisar de:

Pra quem não conhece, o Yeoman é uma ferramenta de scaffolding, ou seja, ela te ajuda a iniciar vários tipos de projetos. Para instalar, rode o seguinte comando no seu terminal:

npm install -g yo

Com o Yeoman instalado, agora é necessário instalar o gerador específico de extensão para o Visual Studio Code. Ainda no terminal, rode o seguinte comando:

npm install -g yo generator-code

Criando nosso projeto

Para começar, vamos utilizar o gerador de extensão que acabamos de instalar:

yo code

O código acima apresenta alguns tipos de extensão que o Yeoman Generator nos ajuda a criar. Para este exemplo, vamos escolher a extensão JavaScript!

Você terá que responder algumas perguntas do Generator e… pronto! Nosso projeto de extensão já está criado!

Debugando pela primeira vez

Agora que criamos nosso projeto, vamos dar uma olhada na estrutura antes de debugarmos. Neste primeiro momento, os dois arquivos mais importantes pra nós são:

package.json

extension.js

Vamos dar uma olhada no nosso package.json. Além do nome e descrição do app, tem duas seções que são muito importantes:

activationEvents : lista de eventos que vão ativar sua extensão. Por padrão as extensões só são carregadas quando acionadas por algum evento desta lista.

: lista de eventos que vão ativar sua extensão. Por padrão as extensões só são carregadas quando acionadas por algum evento desta lista. commands: lista de comandos que você fornece ao usuário para executar por meio da sua extensão.

Agora daremos uma olhada no extension.js. Aqui é onde nós iremos escrever o código da nossa extensão. O Generator já criou a estrutura e alguns comentários explicando o básico. Mas o que eu gostaria de chamar a atenção é para a função activate. Ela é chamada quando algum evento configurado no package.json é acionado.

Note que o trecho selecionado é o nome do evento que está configurado no nosso package.json.

Vamos debugar a aplicação pra ver o que acontece. Aperte F5 no seu VS Code e ele irá abrir uma nova instância do editor em modo de debug.

Abra o Command Palette (Ctrl + Shift + p) e digite Hello World. Você verá algo similar a seguinte imagem:

Clique na extensão e perceba que uma mensagem no canto inferior direito será mostrada.

Pronto, nossa extensão já está funcionando e agora podemos desenvolver algo um pouco mais relevante.

Modificando o evento ‘activate’

Vamos começar modificando o nome do nosso evento.

Para isso, vá até a lista de eventos (activationEvents) no package.json, e mude de extension.helloWorld para extension.criaHTML. Também mude o nome do comando e a descrição, segundo imagem:

Agora, é necessário colocar exatamente o mesmo nome dentro da função activate no arquivo extension.js.

Funções auxiliares

Pronto, agora podemos começar desenvolver nossa funcionalidade. Primeiro vamos escrever uma função que retorne um HTML básico, que é o objetivo da nossa extensão:

function generateHTML() { return ( `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Meu HTML</title> <link rel="stylesheet" href="app.css" /> </head> <body> <script src="app.js"></script> </body> </html>` ); }

Feito isso, também vamos precisar criar uma função que retorne o diretório atual que o usuário está trabalhando.

function getCurrentWorkspaceFolder() { try { return vscode .workspace .workspaceFolders[0] .uri .toString() .split(":")[1]; } catch (error) { console.error(error); return ''; } }

Note que existe a possibilidade de estourar uma exceção no nosso código. Isso acontece porque o usuário pode abrir o VS Code sem ter selecionado nenhum projeto. Fazendo dessa forma, podemos dar uma mensagem amigável ao nosso usuário.

Agora que nossas funções auxiliares estão prontas, vamos escrever o código principal dentro da função extension.criaHTML.

Para isso vamos importar dois pacotes nativos do Node.js:

const fs = require("fs"); const path = require("path");

Insira o seguinte trecho de código:

const folderPath = getCurrentWorkspaceFolder(); if (!folderPath) { vscode.window.showErrorMessage('Selecione um workspace!'); return; }

Note que caso o usuário não tenha nenhum workspace aberto, iremos dar uma mensagem amigável ao invés de estourar um exceção .

Agora vamos escrever o nosso HTML no HD, utilizando o fs.writeFile, que recebe três parâmetros:

path : diretório que será salvo

: diretório que será salvo data : dado que será escrito

: dado que será escrito callback: função de callback que é chamada quando a escrita finaliza.

Nosso código então ficou assim:

fs.writeFile(path.join(folderPath, "index.html"), generateHTML(), err => { if (err) { return vscode.window.showErrorMessage( "Falha na criação do arquivo HTML" ); } vscode.window.showInformationMessage( "HTML criado com sucesso" ); });

No parâmetro path, passamos o caminho do diretório que recuperamos através do método getCurrentWorkspaceFolder. No data, chamamos o método generateHTML, que retorna o conteúdo a ser salvo e na função de callback nós verificamos se retornou algum erro para dar uma mensagem ao usuário. O código completo ficou assim:

Agora vamos debugar. Rode sua aplicação apertando F5. Abra a paleta de comandos (Ctrl + Shift + p) e digite Criar HTML . Selecione o comando que criamos e… VOILÀ! Nossa extensão criou um arquivo chamado index.html no diretório selecionado!

Conclusão

Legal, né? Agora que você já sabe como criar sua própria extensão para VS Code, é só deixar a imaginação fluir. Mas isso é apenas um exemplo básico sobre este assunto. Na documentação da Microsoft tem tudo o que precisamos pra fazer coisas bem iradas e usuais.

O código completo você encontra aqui.

See y’all!

Quer aprender mais sobre javascript? Acesse: https://helpdevs.net/category/javascript/

Compartilhe isso: Twitter

Facebook

