Azure DevOps Backlog Explorer

Browse, edit, and manage your Azure DevOps backlog without leaving VS Code.

Features

• Hierarchical backlog tree — Epics > Features > User Stories / Bugs, organized by area path right in the sidebar
• ADO-styled work item panels — Color-coded type badges, inline title editing, rich text description and acceptance criteria
• Create work items — Right-click any node to create Epics, Features, User Stories, or Bugs with automatic parent linking
• Full field editing — Title, state, iteration, assigned to, tags, description, and acceptance criteria
• Assigned To autocomplete — Team members load in the background and appear as suggestions as you type
• Rich text toolbar — Bold, italic, headings, lists, links, tables, font color, and highlighting — all compatible with ADO's rich text format
• Powerful filtering — Search by title or ID, filter by iteration path, tags, or assigned person
• Drag and drop — Reparent work items by dragging them between nodes in the tree
• Quick actions — Change state, delete, or jump to the Azure DevOps web UI from the context menu
• Team info — View team members for any configured area path
• Custom fields — Define organization-specific fields that appear in work item detail panels and are prompted during creation when marked as required
• State indicators — Configurable colored dot indicators next to work items in the tree view showing their current state at a glance

Getting Started

Prerequisites

• VS Code v1.85.0 or later
• An Azure DevOps organization and project
• A Personal Access Token (PAT) with Work Items (Read & Write) scope

Installation

Install from a .vsix file:

1. Download or build the .vsix (see Building from source below)
2. In VS Code: Extensions sidebar > ... menu > Install from VSIX...
3. Select the .vsix file and reload

Configuration

Open Settings (Cmd+, / Ctrl+,) and search for adoBacklog, or add directly to settings.json:

{
  "adoBacklog.organizationUrl": "https://dev.azure.com/yourorg",
  "adoBacklog.personalAccessToken": "your-pat-here",
  "adoBacklog.project": "YourProject",
  "adoBacklog.areaPaths": [
    "YourProject\\TeamA",
    "YourProject\\TeamB"
  ],
  "adoBacklog.defaultIterationPath": "YourProject\\Sprint 1"
}

All settings are prefixed with adoBacklog. (e.g. adoBacklog.organizationUrl).

State Indicators

Add colored dots next to work items in the tree view to show their state at a glance.

1. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Run ADO: Configure State Indicators
3. Enter a state name (e.g., Active, Closed) and pick an indicator from the dropdown
4. Use * as the state name to set a fallback indicator for any unlisted states

Custom Fields

Display and edit your organization's custom ADO fields on work item detail panels.

1. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Run ADO: Manage Custom Fields
3. Add fields with their ADO reference name (e.g., Custom.Priority), display label, type (string or dropdown), and the work item types they apply to
4. Fields marked as required will be prompted for during work item creation

Usage

1. Click the Azure DevOps icon in the activity bar
2. Expand an area path to browse Epics, Features, and child items
3. Click any work item to open the detail panel
4. Edit fields and hit the save icon in the header

Building from Source

git clone <repo-url>
cd AzureDevOpsBacklogExplorer
npm install
npm run compile

To package as a .vsix:

npx @vscode/vsce package --allow-missing-repository

To run in development mode, press F5 to launch an Extension Development Host. Use npm run watch for live recompilation.

Testing

npm test

Tests run in a VS Code Extension Development Host via @vscode/test-electron. Test files are in src/test/ and use the Mocha suite/test pattern.

Contributing

1. Fork the repo and create a feature branch
2. Make your changes — ensure npm run compile passes cleanly
3. Add or update tests in src/test/ for new functionality
4. Open a Pull Request with a clear description of the change

Architecture overview

Guidelines

• All ADO API calls go in adoService.ts — use the getCached/setCache pattern for caching
• New commands must be registered in both extension.ts and package.json (contributes.commands + contributes.menus)
• Webview styles are scoped inside each panel's <style> block
• Test against a real Azure DevOps project before submitting

License

ISC