DEV Community

Lucas Pereira de Souza
Lucas Pereira de Souza

Posted on

Extensões para VSCode

logotech

## Como Criar uma Extensão VS Code: Um Guia Prático

Criar extensões para o Visual Studio Code (VS Code) pode transformar sua experiência de desenvolvimento, automatizando tarefas, adicionando funcionalidades específicas e personalizando o editor para suas necessidades. Este guia te levará pelos passos essenciais, desde a configuração inicial até um exemplo simples \"Hello World\".

1. Pré-requisitos

  • Node.js e npm: Certifique-se de ter o Node.js e o npm (Node Package Manager) instalados em seu sistema. Você precisará deles para gerenciar as dependências do seu projeto de extensão.
  • VS Code: Obviamente, você precisa do VS Code instalado.
  • Conhecimento básico de JavaScript/TypeScript: Embora não seja estritamente necessário, um conhecimento básico de JavaScript ou TypeScript facilitará o desenvolvimento. TypeScript é a linguagem preferida para extensões VS Code.

2. Configurando o Ambiente

  1. Instale o Yeoman e o Gerador de Extensões VS Code:

    Abra o terminal e execute:

    npm install -g yo generator-code

    O Yeoman é um gerador de scaffolding que facilita a criação de projetos de extensão. O generator-code é um gerador específico para extensões VS Code.

  2. Crie a Estrutura da Extensão:

    No terminal, navegue até a pasta onde deseja criar sua extensão e execute:

    yo code

    O Yeoman irá te guiar por algumas perguntas para configurar sua extensão:

*   **Tipo de extensão:** Selecione a opção desejada (neste exemplo, escolheremos \"New Extension (TypeScript)\").
*   **Nome da extensão:** Dê um nome para sua extensão (ex: \"hello-world-extension\").
*   **Identificador da extensão:** Será gerado automaticamente, mas você pode modificá-lo.
*   **Descrição:** Adicione uma breve descrição da sua extensão.
*   **Nome do autor:** Seu nome ou o nome da sua organização.
*   **Gerenciar as dependências do projeto:** Escolha a opção padrão (npm).
*   **Inicializar o repositório Git:** Escolha a opção padrão (Sim, ou No, se não quiser usar Git).
*   **Abrir no VS Code:** Escolha a opção padrão (Sim).

Após responder às perguntas, o Yeoman criará a estrutura básica da sua extensão.
Enter fullscreen mode Exit fullscreen mode

  1. Entendendo a Estrutura do Projeto:

    O gerador cria uma pasta com os seguintes arquivos e pastas importantes:

*   `package.json`: Contém metadados da extensão, dependências e configurações.
*   `src/extension.ts`: O arquivo principal da extensão, onde você escreverá o código.
*   `README.md`: Um arquivo de texto com informações sobre sua extensão.
*   `.vscode/`: Contém configurações do VS Code específicas para o projeto (ex: launch.json para depuração).
Enter fullscreen mode Exit fullscreen mode

3. As APIs do VS Code

As extensões do VS Code se comunicam com o editor por meio de uma vasta gama de APIs (Application Programming Interfaces). As principais áreas de atuação são:

  • vscode.commands: Permite registrar e executar comandos.
  • vscode.languages: Permite adicionar suporte a linguagens (syntax highlighting, autocompletar, etc.).
  • vscode.window: Permite interagir com a interface do usuário (ex: exibir mensagens, criar painéis).
  • vscode.workspace: Permite acessar e manipular arquivos e pastas no workspace.
  • vscode.TextEditor e vscode.TextDocument: Permite interagir com editores de texto e documentos.
  • vscode.ExtensionContext: Fornece acesso ao contexto da extensão (ex: pasta de extensão, armazenamento de dados).

Você pode encontrar a documentação completa da API do VS Code na documentação oficial: https://code.visualstudio.com/api

4. Exemplo \"Hello World\"

Vamos criar uma extensão simples que exibe uma mensagem \"Hello World!\" quando um comando é executado.

  1. Modifique src/extension.ts:

    Abra o arquivo src/extension.ts no seu editor. Substitua o conteúdo atual pelo seguinte:

    import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('hello-world-extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from Hello World Extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

*   **`activate()`:**  Esta função é chamada quando a extensão é ativada.
*   **`vscode.commands.registerCommand()`:** Registra um novo comando. O primeiro argumento é o ID do comando, e o segundo é a função a ser executada quando o comando é chamado.
*   **`vscode.window.showInformationMessage()`:** Exibe uma mensagem na tela do usuário.
*   **`context.subscriptions.push()`:** Adiciona o comando à lista de \"subscriptions\" da extensão. Isso garante que o comando seja removido corretamente quando a extensão for desativada.
Enter fullscreen mode Exit fullscreen mode

  1. Modifique package.json:

    No arquivo package.json, adicione a seguinte seção contributes dentro do objeto principal:

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

*   **`commands`:**  Define os comandos que sua extensão registra.
*   **`command`:**  O ID do comando, que deve corresponder ao ID usado em `registerCommand` no arquivo `extension.ts`.
*   **`title`:**  O texto que aparecerá no menu de comandos do VS Code.
Enter fullscreen mode Exit fullscreen mode
  1. Compile e Execute a Extensão: 
*   **Compile:** No terminal, dentro da pasta da sua extensão, execute:
Enter fullscreen mode Exit fullscreen mode 
    ```bash
    npm install
    npm run compile
    ```
Enter fullscreen mode Exit fullscreen mode 
*   **Execute:** No VS Code, pressione `F5` para iniciar a depuração. Uma nova janela do VS Code será aberta com sua extensão carregada.
Enter fullscreen mode Exit fullscreen mode
  1. Teste a Extensão: 
*   Na janela de depuração (a nova janela do VS Code), pressione Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (macOS) para abrir o menu de comandos.


    

  •   Digite \"Hello World\" e selecione o comando \"Hello World\" que você criou.
    • 

  •   Você deverá ver a mensagem \"Hello World from Hello World Extension!" aparecer no canto inferior direito da tela.

    •
Enter fullscreen mode Exit fullscreen mode

  1. Próximos Passos

  • Explore as APIs do VS Code: A documentação da API é seu melhor amigo. Experimente diferentes funcionalidades.
  • Adicione funcionalidades: Crie comandos mais complexos, adicione suporte a linguagens, integre com outras ferramentas.
  • Publique sua extensão: Compartilhe sua criação na Marketplace do VS Code para que outros desenvolvedores possam usá-la.

Este guia te deu uma base sólida para começar a criar suas próprias extensões VS Code. Divirta-se e explore as possibilidades!

Top comments (0)