Como o vscode é um editor de código, ele pode ter um desempenho muito mais rápido e mais leve que o IDE típico, como o eclipse. Porém, com esse desempenho, surge uma desvantagem, na qual o IDE geralmente fornece ferramentas melhores, como linter embutido, melhor modelo de código, ferramenta de versão de código e alguns recursos, como o preenchimento automático.
Mas onde o vscode realmente brilha é o poder da comunidade. O Vscode permite a instalação de extensões que vêm diretamente do próprio mercado vscode. Essas extensões permitem uma personalização muito flexível por usuário. Adicionando linter ou qualquer outro recurso como suporte colorido e até mesmo colocando nyan cat no seu vscode!
Descubra por que você criou um
Sim, “por que” é a palavra-chave aqui. A primeira e mais importante coisa a se falar quando você quer começar a fazer algo é se perguntar por que você quer fazer isso? As respostas mais comuns são geralmente para Aprendendo ou ganhando fama, ou talvez ambos, quanto mais razões existir, mais motivação você terá.
Uma coisa que posso dizer é: ainda não é preciso pensar grande, basta criar uma ferramenta muito específica que talvez você possa usar apenas. Sempre existe o primeiro passo em tudo e, no final do dia, pelo menos você se ajuda com sua extensão.
Eu, em particular, estou iniciando porque, por uma razão específica específica, quero criar uma ferramenta que eu mesmo possa usar para aumentar ainda mais minha produtividade e talvez até uma pequena parte da comunidade próxima a mim. É por isso que as extensões que eu criei são muito precisas e têm um caso de uso muito específico, porque o que eu não estou buscando é uma grande marca, pretendo aumentar minha produtividade e aprender algo novo, diabos eu acho que isso é motivo suficiente para mim!
E, obviamente, tudo parecia impossível no começo, fazer com que as extensões vscode parecessem uma obra de arte genial (o que obviamente não sou). Mas sim, quem sabe o que está por vir, tenho muito tempo livre na mão, de qualquer maneira, é melhor tentar.
A primeira parte
Obviamente, número um, você precisa do vscode, caso ainda não tenha um, vou colocar o link para download aqui.
As extensões de código vs. suportam dois idiomas principais, Javascript e TypeScript. Portanto, ter algum conhecimento em qualquer um deles é bastante obrigatório.
Além disso, verifique se você possui o nodejs instalado, pois vamos usar muito npm aqui.
Gerando modelo
Ah Template, como é muito conveniente. O vscode já possui o gerador de modelos para uso, vamos direto para ele.
Primeiro, instale seu gerador de modelos com npm install -g yo generator-code
Depois, vamos executá-lo com yo code
E ele irá exibir essa coisa estranha de cabeça (?) E a seleção de idioma, escolher o idioma preferido e continuar (eu escolhi o javascript aqui)
Posteriormente, você precisará editar o nome e a descrição da extensão aqui, basta prosseguir com o que preferir.
Agora, uma pasta chamada hellovscode será criada em seu diretório pessoal, abra-a com vscode e simplesmente digite code hellovscode no diretório da pasta
Usar F5 para executar sua extensão e outra janela será exibida.
Agora pressione ctrl+shift+p e encontra Hello World comando, execute-o e um pop-up deve aparecer no canto inferior direito
Voila! Você acabou de executar sua primeira extensão.
Mas o que realmente está acontecendo com tudo isso? Não se preocupe, explicarei alguns bits abaixo, principalmente em dois arquivos, em extension.js e package.json
Extension.js
É aqui que você gasta seu tempo para codificar. Este arquivo contém todo o seu bloco de código e fluxo lógico.
Não há muita diferença disso no código nodejs normal, uma das principais diferenças é o comando de registro. Você encontrará este bloco vscode.commands.registerCommand('hellovscode.helloWorld' , em poucas palavras, que registrará sua chamada de função a ser usada.
Outro é o uso frequente da API vscode e voltaremos a isso mais tarde.
Se você examinou o código, também verá isso vscode.window.showInformationMessage('Hello World from hellovscode!');
Para o experimento, tente alterar o valor da mensagem e tente executá-la novamente.
Package.json
Esse arquivo é o que basicamente ligará os comandos que você criou extension.js e vincule-o aos comandos que você definiu.
Você verá o comando que você registrou acima hellovscode.helloWorld sendo colocado como parte do comando intitulado Hello World .
E é assim que o comando realmente está vinculado ao seu código.
Além disso, esse arquivo também permitirá que o comando seja colocado na barra de clique direito e filtrando onde o comando deve aparecer (tipo de arquivo)
Publicação
Apenas no caso de você querer publicar, também colocarei como fazer aqui!
- Primeiro e de extrema importância, instale o vsce
npm install -g vsce, usaremos isso na maior parte do tempo para publicar. - Se você ainda não tem uma conta da Microsoft, deve registro pois precisaremos do token de acesso aqui.
- Depois de obter a conta, faça login no Mercado. Crie o seu organização e clique nele, a tela abaixo deve aparecer.
4. Agora clique no canto superior direito onde está o círculo vermelho e selecione Token de acesso pessoal, crie seu token de acesso pessoal e escolha todas as organizações acessíveis com acesso total.
5. Lembre-se do seu token, pois ele será usado ao fazer o upload da sua extensão.
6. Você precisará criar sua identidade de editor agora, vá para o prompt de comando e digite run vsce create-publisher YOUR_PUBLISHER_NAME .
Insira seu nome humano, email e token de acesso pessoal quando solicitado. Sua conta do editor deve ser criada com sucesso.
7. É hora de publicar! Prepare seu ambiente de extensão no prompt de comando e digite vsce package isso irá compactar sua extensão para o formato de mercado e agora digite vsce publish
E é isso, sua extensão será publicada.
Em uma nota lateral, ao publicar, você deve modificar seu leia-me (pelo menos a primeira parte em que está dizendo This is Readme for.. ), pois o vsce o detectará e solicitará que você modifique o leia-me.
Algumas dicas
Agora você deve ter um entendimento básico de como as extensões vscode funcionam. Aqui, vou compartilhar algumas coisas que aprendi.
Utilizando a API do VS Code
O próprio Vscode forneceu muita API para você utilizar e fazer sua extensão vscode. Geralmente, você encontrará vários obstáculos comuns, como obter a posição do cursor, obter a posição da linha ou talvez obter a palavra destacada. Tudo isso pode ser resolvido com o uso da API vscode.
Eu sugiro que você leia suas documentação e experimentando suas APIs e até mesmo lendo seu código de API! Com a quantidade de documentação contida no próprio código, você poderá descobrir de alguma maneira qual API será a sua luz de salvamento.
Pesquisando no Google (leia os documentos ou o código)
Na maioria das vezes em nossa vida de programação, quando estamos presos, sempre existe o Google ou Stackoverflow que está nos ajudando em nossa jornada.
Mas desta vez nem sempre estará poupando você.
Primeiro, pesquisar no Google é bastante complicado, como por exemplo, se você deseja destacar a palavra no cursor, procure por vs code extension how to get total line.. ou tal. E deixe-me dizer, na maioria das vezes, ele o direcionará para a extensão real em si ou fornecerá um manual sobre como usar o próprio vscode.
Uma maneira de facilitar as coisas para você é adicionar api palavra-chave lá como vs code extension api how to ...
Por outro lado, é bastante difícil encontrar a resposta apropriada no google, porque, por uma ou duas coisas, parece não haver muitas pessoas que estão fazendo a extensão vscode sem nenhuma razão prática. Também fazer extensões vscode é aclamado como uma outra coisa, enfim, difícil como o inferno. Que na realidade, não é exatamente tão difícil.
É por isso que algumas das melhores maneiras de aprender a desenvolver extensões vscode são lendo as documentações ou o código.
Exemplo do Github
Eu forneci um exemplo de manipulação de texto no meu repositório github o que pode ajudar nas referências de código (tenha cuidado com alguns códigos complicados!)
Esse código irá gerar algum teste de unidade de modelo no idioma Go.
Empacotando
O que eu cobri aqui é apenas o máximo básico para criar uma extensão vscode. Uma mensagem que eu quero continuar dando é que não é tão difícil quanto parece, às vezes você só precisa se esforçar um pouco e tentar dar uma olhada.
Pode haver muitos desafios no caminho, mas se você nunca começou, está perdendo tudo.
No final, obrigado por dedicar seu tempo, espero que você goste e seja capaz de entender todo esse monte de coisas que acabei de explicar para todos vocês.
E espero que você também comece a fazer uma extensão!
Feliz codificação para todos vocês nesta temporada de distanciamento social.
