DEV Community

Cover image for Criei uma extensão para VS Code que transforma TODOs em um quadro Kanban e issues reais no Jira
Dante J. Anjos
Dante J. Anjos

Posted on

Criei uma extensão para VS Code que transforma TODOs em um quadro Kanban e issues reais no Jira

É muito comum código com vários TODO.
E o time sabe que a maioria deles nunca vira trabalho de verdade.

Eles ficam perdidos em comentários, são esquecidos, e aos poucos viram dívida técnica invisível.

Foi exatamente por isso que eu criei o TODO Board.

O problema

Na maioria dos projetos, a dívida técnica está espalhada pelo código em comentários como:

// TODO: refatorar isso
// FIXME: tratar edge case
// NOTE: melhorar performance
Enter fullscreen mode Exit fullscreen mode

Essas são pendências reais, mas elas não estão no Jira, não entram em sprint, não têm prioridade e geralmente não têm dono.

Ou seja: o backlog não representa a realidade do código.

A ideia

E se TODOs fossem tratados como itens de backlog de verdade?

O TODO Board é uma extensão para VS Code que escaneia o projeto, encontra TODO, FIXME, NOTE, etc e organiza tudo em um board dentro estilo kanban com busca, labels, filtros, busca textual e por data e tudo isso dentro do próprio editor.
Possui configurações para o usuário customizar

Integrado com Jira. A partir dali, você pode transformar qualquer TODO em uma issue no Jira com um clique.

Sem copiar e colar.
Sem perder contexto.
Sem "depois eu crio o ticket".

O que a extensão faz

  • Escaneia o projeto procurando TODO, FIXME, NOTE...
  • Organiza tudo em um board dentro do VS Code
  • Mostra arquivo, linha, idade e prioridade
  • Cria issues no Jira direto do editor
  • Preenche automaticamente a issue com o contexto do código
  • Mantém a associação TODO ↔ issue entre rescans
  • Possibilidade de adicionar labels e prioridades

Demo dos filtros

Configurações

A TODO Board permite personalizar completamente como o scanner funciona dentro do seu projeto.

Você pode definir quais extensões de arquivo devem ser consideradas no scan:

"todo-board.fileExtensions": [
  "ts", "tsx", "js", "jsx", "vue", "py", "go", "rb", "php", "rs", "swift"
]
Enter fullscreen mode Exit fullscreen mode

Também é possível customizar os padrões de busca usados para identificar pendências no código:

"todo-board.searchPatterns": ["@TODO", "FIXME", "BUG"]
Enter fullscreen mode Exit fullscreen mode

Para evitar capturar blocos muito grandes, você pode limitar quantas linhas cada TODO pode ocupar:

"todo-board.maxTodoLines": 4
Enter fullscreen mode Exit fullscreen mode

O destaque visual dos TODOs no editor também é totalmente configurável:

"todo-board.highlight.enabled": true,
"todo-board.highlight.highPriorityColor": "#e74c3c",
"todo-board.highlight.mediumPriorityColor": "#ffa94d",
"todo-board.highlight.lowPriorityColor": "#4dabf7"
Enter fullscreen mode Exit fullscreen mode

Integração com Jira (do jeito certo)

A integração com Jira usa OAuth 2.0 (3LO) e um backend seguro.

Demo integração com Jira

Alguns pontos importantes:

A extensão não conversa diretamente com as APIs do Jira
Toda comunicação passa por um backend
Tokens ficam armazenados de forma segura
O app pede apenas o mínimo de permissões necessárias
O usuário só consegue criar issues nos projetos que já tem acesso
Isso permite usar a extensão até em ambientes corporativos com mais restrições.

Por que isso é útil

  • A dívida técnica fica visível
  • O backlog passa a refletir a realidade do código
  • Planejamento mais previsível
  • Menos TODO esquecido
  • Menos retrabalho

Seu código finalmente fala com o backlog.

Open source

O projeto é open source e está disponível aqui:
https://github.com/dantewebmaster/todo-board

Extensão no marketplace oficial:
https://marketplace.visualstudio.com/items?itemName=dantewebmaster.todo-board

Feedback, issues e PRs são muito bem-vindos 🙂

Top comments (2)

Collapse
 
drigomartins profile image
Rodrigo Martins

Eu adicionei a extensão no meu vscode, porem ele nao reconhece TODO sem o @, mesmo adicionando nas configurações da extensão

Collapse
 
dantewebmaster profile image
Dante J. Anjos • Edited

Opa temos uma issue aqui será?
Se puder mandar no github o comportamento e como foi a tentativa, talvez uma explicação e deixar sem o @ já por padrão já resolva.
Nos meus testes não precisei, mas tenta um reload window, o pattern é case sensitive também.
Abrir issue no github