Iniciando uma nova extensão para Azure DevOps

Seja bem vindo, ao novo desenvolvimento de extensões para o Azure DevOps! Estas são algumas das únicas palavras, que encontramos no mundo de desenvolvimento de extensões para o VSTS / TFS. Então, neste artigo vamos ver como iniciar uma nova extensão para o mesmo, utilizando os novos conceitos e desmistificando algumas dúvidas.

Introdução

Como é feito para iniciar uma extensão com o layout para o Azure DevOps?

Inicialmente, precisamos adicionar sempre os arquivos necessários:

Manifesto (vss-extension.json / azure-devops-extension.json)
Source
Empacotamento do código source para a extensão

Conseguimos simplificar estas adições? – A resposta é SIM!!!

Gerar layout inicial da extensão via Command Line

Navegando um pouco no github da Microsoft, conseguimos encontrar um exemplo para gerar este layout. Este exemplo, conta com dois componentes que precisamos instalar via NPM.

Porém, após a instalação vamos rodar apenas um comando, que estará pronta nossa estrutura.

Vamos lá!

Utilizando seu Command Line e NPM, realize a execução dos seguintes comandos:

npm install -g yo
npm install -g @microsoft/generator-azure-devops-extension

Então, após as instalações, vamos executar a geração:

yo @microsoft/azure-devops-extension

Saída com a estrutura

Se os comandos foram seguidos da forma correta, você terá uma saída como esta:

├── .eslintrc.js
├── .gitignore
├── .vscode
│   └── launch.json
├── README.md
├── configs
│   ├── dev.json
│   └── release.json
├── img
│   └── world.png
├── package.json
├── src
│   └── hub
│       ├── hub.html
│       ├── hub.scss
│       └── hub.tsx
├── tsconfig.json
├── vss-extension.json
└── webpack.config.js

Pronto, tudo certo! Sua estrutura inicial da extensão, foi gerada com sucesso!

Compilando e gerando o pacote

Agora, vamos gerar o pacote .vsix para enviarmos ao Azure DevOps.

Realize o comando de instalação dos pacotes.

npm install

Certifique-se de que o publicador no arquivo configs/release.json está configurado.

Após finalizado, vamos gerar o pacote com o seguinte comando:

npm run package

Neste momento um arquivo de extensão .vsix foi gerado na sua pasta out.

Publicando no marketplace

Acesse o marketplace.

Vá em Publish Extensions.

Crie um novo publicador, caso não exista.

Selecione a criação de uma nova extensão para Azure DevOps. Logo após insira o arquivo .VSIX

Pronto! Sua extensão estará disponível agora. Vá nas configurações e compartilhe com sua organização Azure DevOps.

Acesse sua organização Azure DevOps, e vá na página criada no Board! E lá está sua página.