backstage
@backstage/plugin-todo
This plugin lists // TODO
comments in source code. It currently exports a single component extension for use on entity pages.
Setup
- Run:
# From your Backstage root directoryyarn --cwd packages/app add @backstage/plugin-todoyarn --cwd packages/backend add @backstage/plugin-todo-backend
- Add the plugin backend:
In a new file named todo.ts
under backend/src/plugins
:
import { Router } from 'express';import { CatalogClient } from '@backstage/catalog-client';import { createRouter, TodoReaderService, TodoScmReader,} from '@backstage/plugin-todo-backend';import { PluginEnvironment } from '../types';
export default async function createPlugin( env: PluginEnvironment,): Promise<Router> { const todoReader = TodoScmReader.fromConfig(env.config, { logger: env.logger, reader: env.reader, });
const catalogClient = new CatalogClient({ discoveryApi: env.discovery, });
const todoService = new TodoReaderService({ todoReader, catalogClient, });
return await createRouter({ todoService });}
And then add to packages/backend/src/index.ts
:
// In packages/backend/src/index.tsimport todo from './plugins/todo';// ...async function main() { // ... const todoEnv = useHotMemoize(module, () => createEnv('todo')); // ... apiRouter.use('/todo', await todo(todoEnv));
- Add the plugin as a tab to your service entities:
// In packages/app/src/components/catalog/EntityPage.tsximport { EntityTodoContent } from '@backstage/plugin-todo';
const serviceEntityPage = ( <EntityLayout> {/* other tabs... */} <EntityLayout.Route path="/todo" title="Todo"> <EntityTodoContent /> </EntityLayout.Route>
Format
The default parser uses Leasot, which supports a wide range of languages. By default it supports the TODO
and FIXME
tags, along with @
prefix and author reference through with either a (<name>)
suffix or trailing /<name>
. For more information on how to configure the parser, see @backstage/plugin-todo-backend
.
Below are some examples of formats that are supported by default:
// TODO: Ideally this would be working
// TODO(Rugvip): Not sure why this works, investigate
// @todo: This worked last Monday /Rugvip
// FIXME Nobody knows why this is here
Note that trailing comments are not supported, the following TODO would not be listed:
function reverse(str: string) { return str.reverse(); // TODO: optimize}
The scanner also ignores all dot-files and directories, meaning TODOs inside of those will not be listed.
Extensions
name | description |
---|---|
EntityTodoContent | Content for an entity page, showing a table of TODO items for the given entity. |