M

MLOG

Português

Desbloqueie o poder do VS Code aprendendo a criar extensões personalizadas. Este guia oferece um passo a passo completo, da configuração à publicação, permitindo que você aprimore seu ambiente de programação e compartilhe suas criações com o mundo.

Dominando o Desenvolvimento de Extensões do VS Code: Um Guia Abrangente para Desenvolvedores Globais

O Visual Studio Code (VS Code) se tornou o editor de código preferido por milhões de desenvolvedores em todo o mundo. Sua popularidade decorre de sua natureza leve, recursos poderosos e, mais importante, sua extensibilidade. A capacidade de criar extensões personalizadas permite que os desenvolvedores adaptem o editor às suas necessidades específicas, aumentando a produtividade e agilizando os fluxos de trabalho. Este guia abrangente o guiará pelo processo de criação de suas próprias extensões do VS Code, desde a configuração inicial até a publicação de sua criação para o mundo usar.

Por que Desenvolver Extensões do VS Code?

O desenvolvimento de extensões do VS Code oferece inúmeros benefícios, tanto para desenvolvedores individuais quanto para organizações:

Pré-requisitos

Antes de mergulhar no desenvolvimento de extensões, certifique-se de ter o seguinte instalado:

Configurando Seu Ambiente de Desenvolvimento

Com os pré-requisitos no lugar, você está pronto para configurar seu ambiente de desenvolvimento:

  1. Crie um Novo Projeto de Extensão: Abra seu terminal e execute o seguinte comando para iniciar o gerador de extensões:
    2. yo code
  2. Responda às Perguntas: O gerador fará uma série de perguntas sobre sua extensão. Aqui está uma análise das perguntas comuns e respostas recomendadas:
    • Que tipo de extensão você deseja criar? Escolha "Nova Extensão (TypeScript)" para uma extensão baseada em TypeScript, que é a abordagem recomendada.
    • Qual é o nome da sua extensão? Escolha um nome descritivo e exclusivo para sua extensão. Exemplos: "Verificador Ortográfico de Código", "Snippets JavaScript", "Preenchimento Automático de Python".
    • Qual é o identificador da sua extensão? Este é um identificador exclusivo para sua extensão, normalmente no formato `publisher.extension-name`. Escolha um nome de editor (por exemplo, seu nome de usuário do GitHub ou nome da empresa).
    • Qual é a descrição da sua extensão? Forneça uma descrição concisa e informativa do que sua extensão faz.
    • Inicializar um repositório git? Escolha "Sim" para inicializar um repositório Git para controle de versão.
    • Você deseja usar eslint para verificar o código? Escolha "Sim" para impor a consistência do estilo do código.
  3. Abra o Projeto no VS Code: Depois que o gerador for concluído, abra a pasta do projeto recém-criada no VS Code.

Entendendo a Estrutura do Projeto

O gerador de extensões cria uma estrutura de projeto básica com os seguintes arquivos-chave:

Escrevendo Sua Primeira Extensão

Vamos começar criando uma extensão simples que exibe uma mensagem "Olá Mundo" quando um comando é executado:

  1. Abra `src/extension.ts`: Este arquivo contém a função `activate`, que é chamada quando sua extensão é ativada.
  2. Modifique a Função `activate`: Substitua o código existente pelo seguinte:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Parabéns, sua extensão "my-extension" agora está ativa!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Olá Mundo da Minha Extensão!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Explicação:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registra um comando com o ID `my-extension.helloWorld`. Este comando estará disponível na paleta de comandos do VS Code.
    • `vscode.window.showInformationMessage('Olá Mundo da Minha Extensão!')`: Exibe uma mensagem informativa na janela do VS Code.
    • `context.subscriptions.push(disposable)`: Adiciona o comando às assinaturas da extensão, garantindo que ele seja devidamente descartado quando a extensão for desativada.
  4. Modifique `package.json`: Adicione o seguinte à seção `contributes` para definir o comando:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Olá Mundo"
		}]
	}
  5. Explicação:
    • `"commands"`: Define os comandos que sua extensão contribui.
    • `"command": "my-extension.helloWorld"`: Especifica o ID do comando que corresponde ao ID usado em `extension.ts`.
    • `"title": "Olá Mundo"`: Define o nome de exibição para o comando na paleta de comandos.

Testando Sua Extensão

Agora é hora de testar sua extensão:

  1. Pressione F5: Isso iniciará uma nova janela do VS Code com sua extensão instalada. Este é o "Host de Desenvolvimento de Extensão".
  2. Abra a Paleta de Comandos: Pressione `Ctrl+Shift+P` (ou `Cmd+Shift+P` no macOS) para abrir a paleta de comandos.
  3. Digite "Olá Mundo": Você deve ver seu comando listado na paleta de comandos.
  4. Selecione "Olá Mundo": Clicar no comando o executará e exibirá a mensagem "Olá Mundo" na janela do VS Code.

Depurando Sua Extensão

A depuração é crucial para identificar e corrigir problemas em sua extensão. O VS Code oferece excelente suporte para depuração:

  1. Defina Pontos de Interrupção: Clique na medianiz do editor ao lado dos números de linha para definir pontos de interrupção em seu código.
  2. Pressione F5: Isso iniciará o Host de Desenvolvimento de Extensão no modo de depuração.
  3. Acione Sua Extensão: Execute o comando ou ação que aciona o código que você deseja depurar.
  4. Inspecione Variáveis e Pilha de Chamadas: O depurador do VS Code pausará a execução em seus pontos de interrupção, permitindo que você inspecione variáveis, percorra o código e examine a pilha de chamadas.

Trabalhando com a API do VS Code

A API do VS Code fornece um rico conjunto de interfaces e funções para interagir com o editor. Aqui estão algumas áreas-chave da API:

Exemplo: Criando uma Extensão de Snippet de Código

Vamos criar uma extensão que adiciona um snippet de código para criar um componente React básico:

  1. Crie uma Pasta `snippets`: Crie uma nova pasta chamada `snippets` na raiz do seu projeto.
  2. Crie um Arquivo de Snippet: Crie um arquivo chamado `react.json` dentro da pasta `snippets`.
  3. Adicione a Definição do Snippet: Adicione o seguinte JSON a `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. Explicação:
    • `"React Component"`: O nome do snippet.
    • `"prefix": "reactcomp"`: O prefixo que aciona o snippet. Digitar `reactcomp` e pressionar `Tab` irá inserir o snippet.
    • `"body"`: Um array de strings representando as linhas de código no snippet.
    • `${1:ComponentName}`: Uma parada de tabulação que permite alterar rapidamente o nome do componente.
    • `"description"`: Uma descrição do snippet.
  5. Modifique `package.json`: Adicione o seguinte à seção `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Explicação:
    • `"snippets"`: Define os snippets que sua extensão contribui.
    • `"language": "javascriptreact"`: Especifica a linguagem para a qual o snippet é aplicável.
    • `"path": "./snippets/react.json"`: Especifica o caminho para o arquivo de snippet.
  7. Teste Seu Snippet: Abra um arquivo `.jsx` ou `.tsx` e digite `reactcomp`. Pressione `Tab` para inserir o snippet.

Técnicas Avançadas de Desenvolvimento de Extensões

Depois de dominar o básico, você pode explorar técnicas mais avançadas de desenvolvimento de extensões:

Internacionalização e Localização (i18n e L10n)

Para atingir um público global, considere internacionalizar e localizar sua extensão. Isso envolve adaptar sua extensão para suportar diferentes idiomas e regiões.

Publicando Sua Extensão

Depois que sua extensão estiver pronta, você poderá publicá-la no VS Code Marketplace para que outros a usem:

  1. Crie uma Organização Azure DevOps: Você precisará de uma organização Azure DevOps para publicar sua extensão. Se você não tiver uma, crie uma conta gratuita no site Azure DevOps.
  2. Instale a Ferramenta `vsce`: O VS Code Extension Manager (`vsce`) é uma ferramenta de linha de comando para empacotar e publicar extensões. Instale-o globalmente usando npm:
    3. npm install -g vsce
  3. Crie um Editor: Um editor é uma identidade que possui suas extensões no Marketplace. Crie um editor usando o comando `vsce create-publisher`. Você precisará fornecer um nome de editor e um token de acesso pessoal (PAT) do Azure DevOps.
  4. Gere um Token de Acesso Pessoal (PAT): No Azure DevOps, vá para "Configurações do Usuário" -> "Tokens de Acesso Pessoal" e crie um novo PAT com o escopo "Marketplace (Publicar)".
  5. Empacote Sua Extensão: Use o comando `vsce package` para empacotar sua extensão em um arquivo `.vsix`.
  6. Publique Sua Extensão: Use o comando `vsce publish` para publicar sua extensão no Marketplace. Você precisará fornecer o nome do seu editor e seu PAT.

Melhores Práticas para Desenvolvimento de Extensões

Siga estas práticas recomendadas para criar extensões do VS Code de alta qualidade e fáceis de manter:

Recursos da Comunidade

Aqui estão alguns recursos valiosos para aprender mais sobre o desenvolvimento de extensões do VS Code:

Conclusão

O desenvolvimento de extensões do VS Code é uma maneira poderosa de personalizar seu ambiente de codificação, aumentar a produtividade e compartilhar suas soluções com a comunidade global de desenvolvedores. Ao seguir este guia abrangente, você pode dominar a arte do desenvolvimento de extensões e criar ferramentas inovadoras que aprimoram a experiência do VS Code para você e outros. Lembre-se de abraçar a comunidade, contribuir para projetos de código aberto e aprender e explorar continuamente o mundo em constante evolução do desenvolvimento de extensões do VS Code. Boa sorte e boa programação!