Vikunja Pretty Tasks
Show Vikunja task title, kanban bucket, project name, and priority inline next to task links in the editor.
Author: Sergey Novikov · serrnovik
Features
- Detects Vikunja task URLs and decorates them inline with:
- Kanban bucket / column name (
[To-Do], [Doing], [backlog], [done], …)
- Task title and project-scoped identifier
- Project name (
@ My Project)
- Priority label (
· urgent, · high, …)
- Colour-coded by bucket type
- Hover the link for full details: title, project, assignees, description preview.
- Commands:
- Configure — set base URL and API token.
- Show Task by ID — fetch task info by numeric ID.
- Open Task by ID — open the task in the browser.
What it looks like
when you have tasks in UI:
Bucket colours:
| Bucket name |
Colour |
done, complete |
green |
closed, cancel |
brown-red |
doing, in progress, wip |
orange |
to-do, todo |
blue |
backlog |
grey |
| anything else |
light blue |
Matching is case-insensitive and partial (Backlog, BACKLOG, In Progress all match).
Task hex_color overrides bucket colour when set in Vikunja.
Setup
- Install from
.vsix or the VS Code Marketplace.
- Run "Vikunja Pretty Tasks: Configure (base URL & API token)" from the command palette.
- Set base URL — your instance origin, e.g.
https://tasks.example.com (no trailing slash).
- Create an API token in Vikunja (Settings → API Tokens) with the permissions below.
API token permissions
| Scope |
Rights needed |
Used for |
| Tasks |
Read One |
Fetch task title, status, priority |
| Projects |
Read All |
Resolve project name |
| ProjectsViews |
Read All, Read One |
Find the kanban view for a project |
| ProjectsViewsTasks |
Read All |
Map tasks to their kanban bucket |
Tip: use a dedicated read-only token. If the extension is missing bucket or project info,
it will show a hint like [need Projects: Read All] in the decoration rather than failing silently.
Security note
The token is stored in VS Code global settings (settings.json). Do not share that file or commit it to git.
URL matching
By default the extension matches links of the form:
https://your-host/tasks/123https://your-host/some/path/tasks/123 (subpath before tasks)https://your-host/#/tasks/123 (hash router)
Set vikunja-pretty-tasks.openTaskUrlStyle to hash if your UI opens tasks at /#/tasks/:id.
To match a non-standard URL pattern, set vikunja-pretty-tasks.linkPattern to a RegExp source
(flags gi are added automatically). Capture group 1 must be the numeric task ID:
https?:\/\/[^\s)'"<>]+\/custom\/path\/tasks\/(\d+)
Development
cd vikunja-pretty-tasks
npm install
npm run compile
# F5 in VS Code to launch "Run Extension"
Package for distribution:
npx @vscode/vsce package --allow-star-activation
Links
