Tasks Folder Extension

A VS Code extension that adds a Task Board with Backlog, Done, Epics, and Wiki. Manage tasks with drag-and-drop, assign tasks to epics, and keep documentation in a hierarchical wiki.

Quick Start

1. Open Task Board – Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and run Open Task Board.
2. Set your root folder – If prompted, set tasks-folder-extension.tasksFolderPath in Settings to the path of your root directory (e.g. ~/projects/my-project/tasks-wiki). It will be created with tasks/ and wiki/ subfolders.
3. Use the Kanban board to manage tasks, epics, and wiki pages.

Directory Structure

Set tasksFolderPath in Settings to the root folder (e.g. tasks-wiki). It must contain two subfolders:

tasks-wiki/               ← Your root (path in Settings)
├── tasks/                ← Task board: order, epics, task files
│   ├── .task-order.json  ← Order of Backlog and Done (auto-created)
│   ├── epic-2/           ← Epic = folder with epic-name/epic-name.md
│   │   ├── epic-2.md     ← Epic doc (required)
│   │   ├── task1.md      ← Tasks in this epic
│   │   └── task2.md
│   └── task-at-root.md   ← Task at top level (no epic)
└── wiki/                 ← Wiki pages (folder = page hierarchy)
    ├── New Page.md       ← Root wiki page
    ├── New Page/         ← Nested page = folder with same-name .md
    │   ├── New Page2.md
    │   └── New Page2/
    │       └── New Page3.md
    └── ...

Rules

• Tasks: .md files at top level or inside epic folders under tasks/. A task in an epic lives at epic-name/task.md.
• Epics: Folder epic-name/ under tasks/ must contain epic-name.md. Tasks in that folder belong to that epic.
• Wiki: Pages live in wiki/. Path = hierarchy: wiki/Parent/Parent.md, wiki/Parent/Child/Child.md.
• Order: .task-order.json in tasks/ holds { "backlog": ["epic-2/task1.md", "task-at-root.md"], "done": ["epic-2/task2.md"] } (relative paths).

Task Board

• Tasks tab: Kanban (Backlog | Done), Epics sidebar. Drag tasks between Backlog and Done. Drag tasks onto epics to assign; drag to "No epic" to unassign.

• Wiki tab: Tree of wiki pages. Create pages with "New Wiki Page" or "+ Child".

• Task and epic detail panels support Markdown, Mermaid diagrams, HTML snippets, and live React for interactive mockups.

• Use live-react (or react / jsx) code blocks to embed real JSX that renders as React components. Same UI as HTML: inline preview, Full screen button, Edit source toggle. Example:

  const [n, setN] = React.useState(0);
  return <button onClick={() => setN(n+1)}>Clicked {n}</button>;
  

• In full-screen Mermaid/HTML/React modals, click ✋ Drag off to enable pan/zoom (off by default).

Prerequisites

• Node.js 18+
• VS Code ^1.85.0

Development

yarn
yarn compile
# F5 to run in Extension Development Host

Scripts

License

MIT