Extensões para VSCode

## Desvendando o VS Code: Crie sua Primeira Extensão \"Hello World\"

O Visual Studio Code revolucionou a forma como desenvolvemos, e uma das suas maiores forças reside na sua extensibilidade. A capacidade de personalizar e adicionar funcionalidades diretamente ao seu editor favorito abre um universo de possibilidades. Neste post, vamos embarcar em uma jornada prática para criar sua primeira extensão do VS Code, focando em um exemplo clássico: \"Hello World\". Prepare-se para entender os fundamentos e dar seus primeiros passos no desenvolvimento de extensões!

Por que Criar Extensões para o VS Code?

Imagine ter atalhos personalizados para tarefas repetitivas, integração com suas ferramentas favoritas ou até mesmo um assistente de código que entende o seu fluxo de trabalho específico. As extensões permitem exatamente isso. Elas não apenas aumentam sua produtividade, mas também promovem um ecossistema vibrante onde a comunidade contribui para tornar o VS Code ainda mais poderoso. Para nós, Desenvolvedores e Tech Leads, dominar a criação de extensões significa ter a capacidade de moldar nosso ambiente de desenvolvimento de acordo com as necessidades do projeto e da equipe.

Mãos à Obra: O \"Hello World\" das Extensões

Para começar, você precisará ter o Node.js e o npm (ou yarn) instalados. Além disso, vamos utilizar o Yeoman, um gerador de scaffolding, e o gerador oficial de extensões do VS Code para iniciar nosso projeto.

1. Preparando o Ambiente

Primeiro, instale o Yeoman e o gerador de extensões do VS Code globalmente:

npm install -g yo generator-code

2. Gerando o Projeto

Agora, execute o gerador de extensões. Ele fará algumas perguntas para configurar seu projeto:

yo code

Siga as instruções:

• What type of extension do you want to create? (Que tipo de extensão você quer criar?) - Selecione New Extension (TypeScript). TypeScript é a escolha recomendada pelo VS Code devido à sua tipagem forte e recursos modernos.


• What's the name of your extension? (Qual o nome da sua extensão?) - Digite hello-world-extension.


• What's the identifier of your extension? (Qual o identificador da sua extensão?) - Deixe o padrão hello-world-extension.


• What's the description of your extension? (Qual a descrição da sua extensão?) - Uma extensão simples de Hello World para VS Code.
  


• Initialize a git repository? (Inicializar um repositório git?) - Yes (ou No, como preferir).


• Bundle the source code with webpack? (Empacotar o código fonte com webpack?) - Yes. O webpack otimiza seu código para produção.


• Which package manager to use? (Qual gerenciador de pacotes usar?) - npm (ou yarn).

Após responder, o gerador criará uma estrutura de diretórios para sua extensão.

3. Explorando a Estrutura do Projeto

Navegue até a pasta criada (cd hello-world-extension) e abra-a no VS Code:

code .

Você verá uma estrutura semelhante a esta:

hello-world-extension/

├── .vscode/

│   └── launch.json

├── .gitignore

├── .vscodeignore

├── README.md

├── package.json

├── tsconfig.json

├── src/

│   └── extension.ts

└── webpack.config.js

• package.json: Contém os metadados da sua extensão, suas dependências e, crucialmente, a seção activationEvents e contributes.


• src/extension.ts: Onde a lógica principal da sua extensão reside.


• .vscode/launch.json: Configuração para depurar sua extensão.

4. Entendendo package.json e activationEvents

Abra o package.json. Preste atenção especial a estas seções:

• 
  

  activationEvents: Define quando sua extensão será ativada. Para nosso \"Hello World\", vamos ativar quando o comando hello-world-extension.helloWorld for executado.
  
  

  
  

  \"activationEvents\": [
  
      \"onCommand:hello-world-extension.helloWorld\"
  
  ],
  
  

  
  
  


• 
  

  contributes.commands: Declara os comandos que sua extensão oferece.
  
  

  
  

  \"contributes\": {
  
      \"commands\": [
  
          {
  
              \"command\": \"hello-world-extension.helloWorld\",
  
              \"title\": \"Hello World\"
  
          }
  
      ]
  
  },
  
  

  
  
  

5. Escrevendo a Lógica em src/extension.ts

Abra src/extension.ts. O código gerado é um ótimo ponto de partida:

// Importa a API do VS Code

import * as vscode from 'vscode';



// Método de ativação da extensão. Chamado quando a extensão é ativada.

export function activate(context: vscode.ExtensionContext) {



    // Registra o comando definido no package.json

    // O primeiro argumento é o ID do comando, o segundo é a função a ser executada.

    let disposable = vscode.commands.registerCommand('hello-world-extension.helloWorld', () => {

        // Quando o comando é executado, exibe uma mensagem informativa.

        vscode.window.showInformationMessage('Hello World from Hello World Extension!');

    });



    // Adiciona o comando registrado ao contexto da extensão.

    // Isso garante que o comando seja descartado quando a extensão for desativada.

    context.subscriptions.push(disposable);

}



// Método de desativação da extensão. Chamado quando a extensão é desativada.

export function deactivate() {}

Explicação Detalhada:

• import * as vscode from 'vscode';: Importa todo o namespace da API do VS Code, que nos dá acesso a funcionalidades como exibir mensagens, registrar comandos, etc.


• activate(context: vscode.ExtensionContext): Esta é a função principal que é chamada quando a sua extensão é ativada (conforme definido em activationEvents no package.json). Ela recebe um context que contém informações sobre o ciclo de vida da extensão.


• vscode.commands.registerCommand(commandId, commandHandler): Registra um novo comando no VS Code.
  
  
  
  
  • commandId: Deve corresponder ao command definido no package.json.
  
  
  • commandHandler: É a função que será executada quando o comando for invocado.
  
  
  
  
  
  



• vscode.window.showInformationMessage(message): Exibe uma mensagem informativa no canto superior direito do VS Code.



• context.subscriptions.push(disposable): Gerencia os recursos que sua extensão aloca. Quando a extensão é desativada, todos os itens em context.subscriptions são descartados automaticamente. Isso é crucial para evitar vazamentos de memória.



• deactivate(): Esta função é chamada quando a extensão é desativada. Geralmente, é usada para limpar recursos, mas para extensões simples como esta, pode ficar vazia.

6. Executando e Testando sua Extensão

Para testar sua extensão, pressione F5. Isso iniciará uma nova janela do VS Code (chamada de \"Extension Development Host\") com sua extensão carregada.

Na nova janela:

1. Abra a paleta de comandos (Ctrl+Shift+P ou Cmd+Shift+P).


2. Digite \"Hello World\" e selecione o comando que você registrou.

Você deverá ver a mensagem \"Hello World from Hello World Extension!\" aparecer no canto superior direito!

7. Empacotando e Publicando (Opcional)

Para compartilhar sua extensão, você pode empacotá-la usando o vsce (Visual Studio Code Extensions):

npm install -g vsce

vsce package

Isso criará um arquivo .vsix que pode ser instalado manualmente no VS Code ou publicado no Marketplace do VS Code.

Conclusão

Parabéns! Você criou e executou sua primeira extensão do VS Code. Exploramos a estrutura básica de um projeto de extensão, o papel fundamental do package.json e a API vscode para interagir com o editor. Este \"Hello World" é apenas o começo. Com a API do VS Code, você pode acessar o sistema de arquivos, manipular o editor, criar webviews, adicionar snippets, e muito mais.

Como Tech Leads, investir tempo na criação de extensões personalizadas pode trazer benefícios significativos para a produtividade e padronização da equipe. Continue explorando a documentação oficial do VS Code e experimente criar funcionalidades mais complexas. O poder de moldar seu ambiente de desenvolvimento está em suas mãos!