O autor do material, cuja tradução publicamos hoje, criou 33 extensões para o VS Code. Ele decidiu compartilhar com quem gosta deste editor, métodos de desenvolvimento e suporte a extensões. Além disso, ele falou brevemente sobre seus projetos. Talvez você encontre entre eles algo que seja útil para você.
Como escrever extensões
Busco trabalho produtivo e amo a automação, por isso desenvolvi um processo bem organizado para o desenvolvimento de extensões para o VS Code. Vou falar sobre os principais componentes desse processo.
▍Ferramentas
Eu escrevi uma
ferramenta muito simples que ajuda você a começar rapidamente em novos projetos usando um modelo. O utilitário correspondente funciona assim:
- Ele aceita uma pasta como entrada (é o que é chamado de "modelo").
- Ele processa todos os arquivos usando o pacote de guidão , perguntando no processo de processamento de perguntas sobre o que deve ser substituído por cada espaço reservado encontrado (como
{{name}} ). - Como resultado, ela forma uma nova pasta, cujos arquivos contêm o que foi inserido em resposta às suas perguntas.
Pensei em usar o utilitário
yeoman para trabalhar com modelos, mas, para minhas necessidades, parece excessivamente complicado. Eu usei a ferramenta
khaos , mas ela não é suportada e não atualiza os modelos automaticamente, e atualizá-los manualmente sempre que eu precisar usá-los não é particularmente conveniente.
▍Modelo
É assim que eu, usando a
extensão template vscode , começo a desenvolver uma nova extensão para o VS Code.
Crie um novo projetoDepois que as respostas às perguntas do programa foram inseridas, tenho à minha disposição uma extensão de trabalho, algo como "Olá, mundo!" para VS Code. O modelo inclui muitas funções auxiliares, que, como se viu, geralmente uso no desenvolvimento de extensões. Em particular, o modelo suporta o carregamento do arquivo de configuração do usuário a partir da pasta
.vscode , registro automático de comandos, pode encontrar o diretório raiz atual com base no arquivo ativo e resolver outros problemas semelhantes.
Se eu pudesse voltar o relógio, provavelmente colocaria todas essas funções auxiliares em um pacote independente, em algo como
vscode-utils , em vez de fazer cópias dessas funções em todos os projetos de desenvolvimento de extensões. Infelizmente, porém, eu não sabia que criaria dezenas de extensões. Agora preciso gastar algum tempo atualizando o código correspondente em todos os projetos das minhas extensões.
Se você planeja desenvolver extensões para o VS Code, aconselho você a criar seu próprio modelo, talvez usando o meu como base.
Documentation Documentação útil
Durante o processo de desenvolvimento, sempre tenho em mãos a
documentação do código API VS. Inicialmente, trabalhar com este documento, que é uma página enorme, não é particularmente conveniente, mas se você demorar algum tempo para revisá-lo rapidamente, se entender quais APIs estão disponíveis, será fácil usá-lo. Em geral, posso observar que o conjunto de APIs disponíveis é muito bom para mim.
A propósito, se você deseja desenvolver extensões para o VS Code, será extremamente útil para você ler
esta seção da documentação.
▍Sobre extensões que desenvolvi
Estou desenvolvendo extensões para resolver vários problemas, falaremos sobre eles abaixo. Além disso, algumas dessas extensões me ajudam a desenvolver outras extensões.
Minhas extensões
Como eu disse, busco produtividade, muitas das minhas extensões visam aumentar a produtividade do trabalho. Tento não lidar com a constante invenção da bicicleta, tento conseguir uma clara separação de funções entre várias extensões, para que o uso conjunto não cause problemas.
Não sei se isso é bom ou ruim, mas gosto de criar extensões para o VS Code. Além disso, o fluxo de tarefas que podem ser automatizadas não seca. Foi por isso que, depois de escrever a primeira extensão, fiz a segunda e depois a terceira, atingindo, como resultado, até o trigésimo terceiro.
Agora vou falar brevemente sobre minhas extensões. Detalhes sobre eles podem ser encontrados em suas páginas.
▍ Extensões para criar extensões
No. 1. Gerenciador de depuração
A extensão do
Gerenciador de Depuração permite iniciar a depuração, mesmo a partir do terminal, sem a necessidade de criar tarefas ou arquivos de configuração. Criei esta extensão porque não queria entupir os repositórios com arquivos desnecessários (e quem, por exemplo, usa tarefas?). Eu acredito que iniciar o depurador a partir do terminal é um recurso tão útil que deve ser
incluído no próprio código VS.
Executando o depurador a partir do terminalNo. 2. Depurador StatusBar
A extensão
StatusBar Debugger adiciona controles de depuração à barra de status do programa. Isso é muito mais conveniente que o
painel de depuração padrão. Além disso, se o VS Code fornecer
mais dados de depuração , minha extensão seria ainda melhor.
Número 3. Instale .VSIX
A
extensão Instalar .VSIX permite instalar arquivos
.vsix diretamente no painel
. O motivo dessa extensão foi o fato de o procedimento de instalação padrão para esses arquivos ser
inconveniente .
Número 4. Bump
A extensão
Bump permite aumentar o número da versão do projeto e inserir novos dados no log de alterações. Essa ferramenta atua de acordo com sua própria lógica interna, mas pode ser personalizada. Eu o criei devido ao fato de que qualquer extensão decente precisa de um log de alterações, mas isso não significa que o desenvolvedor dessa extensão precise entrar no diário manualmente. Essa é uma das minhas extensões favoritas. Talvez eu crie uma ferramenta de linha de comando baseada nela, como gostaria que um dia permitisse a automação dos lançamentos do GitHub.
Usando a extensão BumpNo. 5. Otimizar imagens
A extensão
Otimizar imagens permite otimizar as imagens disponíveis no projeto usando um aplicativo externo selecionado pelo usuário. Uma equipe - e o trabalho está feito.
Management Gerenciamento de Projetos
No. 6. Projetos +
A extensão
Projetos + é usada para gerenciar projetos. Possui recursos avançados, pode ser configurado, encontra projetos automaticamente. Uma das extensões mais usadas desse tipo é o
gerente de projetos , mas tenho cerca de cem repositórios e preciso das ferramentas certas para gerenciá-las, uma das quais é o suporte a grupos de aninhamento ilimitados.
Trabalhando com o Projeto + Extensão▍Gerenciando listas de tarefas
Número 7. Todo +
A extensão Todo + simplifica o trabalho com listas de tarefas. É uma ferramenta poderosa, fácil de usar e personalizável. Se você não precisar de realce de sintaxe para arquivos
TODO ou se estiver satisfeito com o realce interno padrão, tente a agradável extensão
Todo Tree .
Destaque de sintaxe usando Todo + e informações em nível de projetoNúmero 8. Destaque
A extensão
Highlight é uma ferramenta avançada de destaque de sintaxe de expressão regular. É útil para trabalhar com listas de tarefas, anotações e similares. A extensão
TODO Highlight é muito popular nessa área, mas minha extensão é mais versátil e muito mais poderosa. Além disso, provavelmente funciona mais rápido.
No. 9. Todo markdown
A extensão
Todo Markdown facilita o trabalho com listas de tarefas dentro dos arquivos de remarcação. Não há nada de especial nisso, mas permite que você use os recursos do Todo + nos arquivos de remarcação.
No. 10. Projetos + Todo +
A extensão
Projects + Todo + permite analisar projetos, por assim dizer, do ponto de vista de pássaros, para ver o resultado da agregação de todos os arquivos de tarefas em um arquivo. Se você usar a extensão Projetos + para gerenciamento de projetos e Todo + para trabalhar com listas de tarefas, graças a essa extensão, você poderá coletar listas de tarefas de todos (ou de alguns) projetos em um único local.
PExpansa para abrir arquivos
O importante para mim é a capacidade de alternar rapidamente entre diferentes aplicativos ou páginas da web. Por isso, criei uma série de extensões para o VS Code que simplificam a solução de tais problemas.
No. 11. Abrir no aplicativo
A extensão
Abrir no aplicativo permite abrir arquivos arbitrários no aplicativo padrão ou no aplicativo que o desenvolvedor decide usar. Esta é uma extensão universal.
No. 12. Abrir em navegadores
A
extensão Abrir em navegadores adiciona comandos ao editor que permitem abrir o arquivo ou projeto atual em qualquer navegador ou mesmo imediatamente em todos os navegadores disponíveis.
No. 13. Abrir no código
A extensão
Open in Code facilita a alternância entre o VS Code e o VS Code Insiders.
No. 14. Abrir no localizador
A extensão
Abrir no Finder foi projetada para abrir o arquivo ou projeto atual no gerenciador de arquivos do Finder.
Número 15. Abrir no github
A extensão
Abrir no GitHub permite abrir o projeto ou arquivo atual no github.com. Existem muitas extensões para resolver esse problema, mas quando as experimentei, descobriu-se que elas tinham muitas funções das quais não preciso.
No. 16. Aberto em gittower
A
extensão Abrir no GitTower adiciona um comando ao editor para abrir o projeto atual no
GitTower .
Número 17. Aberto no mercado
A extensão
Abrir no mercado equipa o editor com uma equipe para abrir o projeto atual no
diretório de extensão do VS Code.
Número 18. Abrir em node_modules
A
extensão Abrir no node_modules permite localizar os módulos correspondentes ao texto selecionado ou alguma linha arbitrária na pasta
node_modules e abrir suas pastas. É útil para os casos em que o desenvolvedor deseja entender melhor os módulos que ele usa.
No. 19. Aberto em npm
A extensão
Abrir no NPM permite abrir as páginas do módulo no diretório npm. É conveniente usar para visualizar as informações de ajuda dos módulos.
No. 20. Aberto no navio
A extensão
Open in Ship adiciona um comando ao editor para abrir o projeto atual no Ship. Infelizmente, Ship parou de funcionar. Portanto, agora, para não esquecer as informações que recebo sobre problemas em meus projetos, preciso usar uma folha de lembrete especial no
Noty .
No. 21. Aberto no terminal
A extensão
Abrir no terminal facilita a abertura do projeto atual no terminal.
Número 22. Abrir na transmissão
A extensão
Abrir na transmissão permite abrir o arquivo ou projeto atual na
transmissão .
▍ Diversos
Número 23. Atualização do navegador
A extensão
Atualização do navegador permite que você atualize a página no navegador pressionando ⌘R diretamente do VS Code, sem precisar alternar para o navegador. Essa extensão é útil nos casos em que a opção de recarregamento interativo não pode ser usada e quando você não precisa
browser-sync atualizar a página
sem a necessidade disso .
Número 24. Comandos
A extensão
Commands permite chamar comandos arbitrários na barra de status. Passagem de argumento suportada.
Comandos personalizados criados por comandosNúmero 25. Diff
A extensão
Diff permite comparar arquivos abertos. Eu criei esta extensão porque a construção
code-diff path1 path2 é muito lenta.
No. 26. Histórico de arquivos Git
A extensão
Git File History simplifica a análise das diferenças entre o arquivo atual e sua versão anterior. Existem muitas extensões para resolver esse problema, mas quando as testei, elas estavam cheias de recursos desnecessários ou inoperantes.
Número 27. Notificações do Github
A extensão segura e personalizável das
Notificações do GitHub foi projetada para exibir informações de notificação do GitHub na barra de status.
No. 28. Monokai Night Theme
O Tema Noite Monokai é um tema escuro minimalista baseado no tema Monokai. Eu o criei devido ao fato de não conseguir entender o que me convinha nos tópicos existentes.
Monokai Night ThemeNo. 29. Não [Não suportado]
A extensão
No [Não suportada] tem como objetivo remover a linha “[Não suportada]” do cabeçalho do editor. Esta extensão já está obsoleta, por isso recomendo
Corrigir as somas de verificação VSCode . Infelizmente, mesmo após
esta e
esta discussão, a inscrição irritante “[Não suportado]” não desapareceu.
No. 30. Abra vários arquivos
A extensão
Abrir vários arquivos permite abrir simultaneamente todos os arquivos em uma determinada pasta. Se necessário, os arquivos podem ser filtrados por modelo.
No. 31. Pesquisa - Abrir todos os resultados
A extensão
Pesquisar - Abrir todos os resultados permite exibir simultaneamente todos os resultados da pesquisa usando um único comando.
Número 32. Gerente de terminais
A extensão
do Terminals Manager automatiza o trabalho com vários terminais de uma só vez, por exemplo, a execução de alguns comandos neles. Devo dizer que o Terminals Manager foi minha primeira extensão. Se você usar os terminais - recomendo tentar.
No. 33. Transmitir
A extensão
Transmit equipa o editor com vários comandos para organizar a interação com o Transmit.
Gerenciamento de extensão
Gerenciar vários repositórios pode ser uma tarefa assustadora. Vou lhe dizer como faço.
Comm Confirmações recorrentes
Cedo ou tarde, chega o momento em que você precisa fazer algumas alterações em todos os repositórios suportados. Isso se resume ao fato de que muitos repositórios precisam fazer as mesmas confirmações. Muito em breve se transforma em uma tarefa chata.
Para automatizar a solução desse problema, criei o
autogit - uma ferramenta que permite executar comandos quando aplicados a muitos repositórios.
Executando um comando usando autogitEu constantemente encontro novas maneiras de usar o
autogit . Por exemplo, recentemente, usando esta ferramenta, fiz as seguintes alterações em todos os repositórios nos quais o código das minhas extensões para o VS Code está armazenado:
- Crie com o
webpack . Isso resultou em uma melhoria na velocidade de inicialização de aproximadamente 80%. - Ignorando o
package-lock.json . Este arquivo obstrui apenas meu histórico de consolidação. Aqui está um bom material sobre este tópico. - Atualize
tsconfig.json . Uso intensivamente os novos recursos da linguagem, em particular funções assíncronas. Eles são transpostos se o alvo da transpilação for definido como <= es5 , para construções muito lentas. Como o VS Code entende o código moderno, isso não é mais necessário. - Desinstale o TSLint . Descobri que, basicamente, não presto atenção às dicas do linter, então me livrei dessa oportunidade.
- Uso de um logotipo de alta resolução em materiais de referência. Eu costumava usar o logotipo 128x128, agora, para melhorar a aparência dos materiais de referência, usei uma imagem melhor. Não posso dizer que a imagem em si seja um milagre tão bom, mas isso é outra história.
Fazer essas alterações em um repositório não é por muito tempo, mas quando se trata de trinta e três, é muito mais difícil viver sem as ferramentas de automação.
▍ Sincronize descrição e palavras-chave com o GitHub
O que está sendo discutido aqui não é necessário, mas uma ferramenta que automatize a sincronização de descrições e palavras-chave não me faria mal. Esta tarefa pode ser gerenciada pelas ferramentas das minhas ferramentas
autogit e
autogit-command-github-sync .
Sincronizar descrições e palavras-chave com o autogitMas
autogit-command-github-publish é minha ferramenta para criar automaticamente novos repositórios.
▍Relatórios
Logo após criar várias extensões, fiquei interessado em saber como elas são populares, como, com o tempo, o número de downloads muda. Você pode encontrar informações sobre todas as extensões de um determinado desenvolvedor em uma página especial. Por exemplo,
aqui está minha página. No entanto, esta página não fornece informações, por exemplo, sobre quantos downloads de extensão foram feitos desde a última verificação. Por isso criei o
rssa . Esta é uma ferramenta que permite rastrear alterações em qualquer coisa acessível por URL.
Dados recebidos pela rssaO texto é bom, mas seria muito melhor apresentar os dados em um gráfico. Agora estou desenvolvendo uma ferramenta para resolver esse problema, ainda não o publiquei. Aqui, por exemplo, se parece com o agendamento de download da extensão
Todo + , construído com base nos dados obtidos usando o
rssa .
Todo + Download ScheduleAqui, em alguns lugares, você pode ver um aumento acentuado no número de downloads. Isso acontece quando as atualizações são publicadas, uma vez que a instalação das atualizações de extensão é considerada pelo sistema como um download. Isso leva ao fato de que qualquer pessoa pode ser o autor da extensão com um milhão de downloads, escrevendo-a e publicando muitas atualizações. A propósito, esse é um dos
problemas do catálogo de extensões do VS Code.
Sumário
Ao mesmo tempo, pensei que, em termos do número de extensões publicadas para o VS Code, eu estava em segundo lugar depois da Microsoft. No entanto, como se viu,
alguns deles têm mais 2 do que o meu. Portanto, continuo escrevendo extensões.
Caros leitores! Você escreve extensões para o VS Code?