Extensões para VSCode

Source: Dev.to

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

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? – Selecione New Extension (TypeScript).
• What’s the name of your extension? – Digite hello-world-extension.
• What’s the identifier of your extension? – Deixe o padrão hello-world-extension.
• What’s the description of your extension? – Uma extensão simples de Hello World para VS Code.
• Initialize a git repository? – Yes (ou No).
• Bundle the source code with webpack? – Yes.
• Which package manager to use? – npm (ou yarn).

Após responder, o gerador criará a estrutura de diretórios da extensão.

3. Explorando a Estrutura do Projeto

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

code .

Estrutura típica:

hello-world-extension/
├── .vscode/
│   └── launch.json
├── .gitignore
├── .vscodeignore
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   └── extension.ts
└── webpack.config.js

• package.json – Metadados, dependências e, crucialmente, as seções activationEvents e contributes.
• src/extension.ts – Lógica principal da extensão.
• .vscode/launch.json – Configuração para depuração.

4. Entendendo package.json e activationEvents

Abra o package.json e observe:

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

• activationEvents define quando a extensão será ativada.
• contributes.commands declara os comandos oferecidos.

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

// 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
    let disposable = vscode.commands.registerCommand('hello-world-extension.helloWorld', () => {
        // Exibe uma mensagem informativa.
        vscode.window.showInformationMessage('Hello World from Hello World Extension!');
    });

    // Garante que o comando seja descartado ao desativar a extensão.
    context.subscriptions.push(disposable);
}

// Método de desativação da extensão.
export function deactivate() {}

Explicação Detalhada

• import * as vscode from 'vscode'; – Importa a API completa.
• activate(context) – Função chamada conforme activationEvents.
• vscode.commands.registerCommand – Registra o comando.
• vscode.window.showInformationMessage – Exibe notificação.
• context.subscriptions.push(disposable) – Gerencia o ciclo de vida do comando.

Próximos Passos

1. Teste a extensão – Pressione F5 para abrir uma nova janela do VS Code com a extensão carregada. Abra a paleta de comandos (Ctrl+Shift+P) e execute Hello World.
2. Depure – Use pontos de interrupção no extension.ts e observe o comportamento em tempo real.
3. Publique – Quando estiver satisfeito, siga o guia oficial do VS Code para publicar sua extensão no Marketplace.

Um novo comando no VS Code

• commandId – Deve corresponder ao command definido no package.json.
• commandHandler – Função executada quando o comando é invocado.
• vscode.window.showInformationMessage(message) – Exibe uma mensagem informativa.
• context.subscriptions.push(disposable) – Gerencia recursos e evita vazamentos de memória.
• deactivate() – Chamado ao desativar a extensão; pode permanecer vazio para extensões simples.

6. Executando e Testando sua Extensão

Pressione F5 para iniciar o Extension Development Host. Na nova janela:

1. Abra a paleta de comandos (Ctrl+Shift+P ou Cmd+Shift+P).
2. Digite “Hello World” e selecione o comando registrado.

A mensagem “Hello World from Hello World Extension!” aparecerá no canto superior direito.

7. Empacotando e Publicando (Opcional)

Para compartilhar sua extensão, empacote‑a com vsce:

npm install -g vsce
vsce package

Isso gera um arquivo .vsix que pode ser instalado manualmente ou publicado no Marketplace.

Conclusão

Parabéns! Você criou e executou sua primeira extensão do VS Code. Exploramos:

• Estrutura básica de um projeto de extensão.
• O papel fundamental do package.json.
• 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. Investir tempo na criação de extensões personalizadas traz benefícios significativos para a produtividade e padronização da equipe. Continue explorando a documentação oficial e experimente funcionalidades mais complexas. O poder de moldar seu ambiente de desenvolvimento está em suas mãos!