Asana Task Manager for VS Code

Manage Asana tasks directly from VS Code with a beautiful webview interface and seamless git integration. This extension provides a rich UI experience for managing your Asana tasks without leaving your development environment.

✨ New Webview UI

The extension now features a modern webview interface accessible from the VS Code sidebar, providing a more intuitive and visual way to manage your tasks.

Features

🎨 Rich Visual Interface

• Sidebar Webview - Access all Asana features from a dedicated panel in VS Code sidebar
• Task List View - See all your tasks with visual indicators for status, priority, and due dates
• Task Filters - Quick filters for:
  • All - All tasks in current view
  • To Do - Only incomplete tasks
  • Done - Only completed tasks
  • My Tasks (All Projects) - Switch to personal view showing all your tasks across workspace
• Real-time Updates - Task list automatically refreshes when changes are made

📝 Task Management

• Hybrid View System - Two distinct views for managing tasks:
  • Project Tasks - Shows tasks from your configured project only (team collaboration view)
  • My Tasks (All Projects) - Shows ALL your assigned tasks across ALL projects in the workspace
• Create Tasks - Two modes for task creation:
  • Manual Entry - Traditional form-based task creation
  • From Git Commit - Create tasks directly from recent commits with one click
• Visual Priority Indicators - Color-coded priority badges (🔴 Critical, 🟠 High, 🟡 Medium, 🟢 Low)
• Due Date Management - Visual indicators for overdue (Yesterday), upcoming (Today), and future tasks
• Task Details Modal - Click any task to view full details, comments, and actions
• Quick Actions - Complete tasks, set as current, or open in Asana with one click
• Clear View Indicators - Always know which view you're in with visual headers showing project name or "My Tasks"

🔧 Developer Features

• Git Integration - Automatically includes branch name and commit information
• Recent Commits View - Browse and select from your recent git commits when creating tasks
• Current Task Tracking - Visual indicator (green dot) shows your current working task
• Status Bar Integration - Current task displayed in VS Code status bar

🎯 UI Controls

• Icon Buttons in the header:
  • ⚙️ Settings - Configure Asana connection
  • 🔄 Refresh - Reload task list
  • ➕ Create - Quick access to create new task
• Configuration Status - Green/red indicator shows connection status

Installation Instructions

Method 1: Install from VS Code Marketplace (Recommended)

Option A: Via VS Code Extensions View

1. Open VS Code
2. Click the Extensions icon in the sidebar (or press Ctrl+Shift+X)
3. Search for "Asana Task Manager"
4. Click the Install button
5. Reload VS Code if prompted

Option B: Via Command Line

code --install-extension ScottAllen34.asana-task-manager

Option C: Via Web Browser

1. Visit: https://marketplace.visualstudio.com/items?itemName=ScottAllen34.asana-task-manager
2. Click Install
3. VS Code will open and install the extension

Method 2: Install from VSIX File (Manual Installation)

If you have a .vsix file provided by your team:

Option A: Using Command Palette

1. Open VS Code
2. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
3. Type "Install from VSIX" and select "Extensions: Install from VSIX..."
4. Browse to and select the .vsix file
5. Click "Install"
6. Reload VS Code when prompted

Option B: Using Command Line

code --install-extension path-to-file.vsix

Getting Started with the New UI

Accessing the Asana Panel

1. After installation, look for the Asana Tasks icon in the VS Code Activity Bar (left sidebar)
2. Click the icon to open the Asana panel
3. The panel will show your tasks or prompt you to configure if not set up

Using the Interface

Viewing Tasks

• Tasks are displayed in a clean list with visual indicators
• Green dot (●) indicates your current working task
• Priority badges show task urgency (Critical, High, Medium, Low)
• Due dates appear with color coding (red for overdue, orange for today)
• Use the filter buttons at the top to switch between All, To Do, Done, and My Tasks views

Creating Tasks

1. Click the ➕ button in the header or the Create New Task button
2. Choose between two creation modes:
   • Manual Entry - Fill out a form with task details
   • From Git Commit - Select from your recent commits
3. For Git Commit mode:
   • Your recent commits appear in a list
   • Click any commit to use it as the task basis
   • Optionally add due date, priority, and other details
   • Click Create Task to submit

Managing Tasks

• Click any task to view its full details in a modal
• Complete a task using the checkmark button in the details view
• Set as current to track which task you're actively working on
• Add comments directly from the details modal
• Open in Asana to view the task in your browser

Initial Setup

Step 1: Get Your Asana Personal Access Token

1. Open your browser and go to: https://app.asana.com/0/my-apps
2. Click "Create new token"
3. Give it a name (e.g., "VS Code Extension")
4. Copy the token immediately (you won't see it again!)
5. Store it somewhere safe temporarily

Step 2: Configure the Extension

1. In VS Code, press Ctrl+Shift+P to open Command Palette
2. Type "Asana" and select "Asana: Configure"
3. Follow the prompts:
   • Enter Access Token: Paste your token from Step 1
   • Select Workspace: Choose your Asana workspace
   • Select Portfolio (optional): Choose a portfolio to narrow down projects
   • Select Project (optional): Choose a default project for new tasks
   • Select Team (optional): Choose your team for assignee selection
   • Set Default Assignee (optional): Choose who tasks should be assigned to by default

How to Use

Quick Start

1. Start working on a task: Press Ctrl+Shift+A, C to create a new Asana task
2. Add updates as you work: Press Ctrl+Shift+A, U to update your current task
3. Mark complete when done: Press Ctrl+Shift+A, D to complete the task

Keyboard Shortcuts

• Ctrl+Shift+A, C - Create new task
• Ctrl+Shift+A, U - Update current task (add comment)
• Ctrl+Shift+A, D - Mark task Done (complete)
• Ctrl+Shift+A, S - Show current status
• Ctrl+Shift+A, P - Switch Project (quick project switcher)

Mac users: Replace Ctrl with Cmd

Using Command Palette

All commands are also available through the Command Palette (Ctrl+Shift+P):

• Asana: Configure - Set up or reconfigure the extension
• Asana: Create Task - Create a new task with git context
• Asana: Update Current Task - Add a progress comment
• Asana: Complete Current Task - Mark as complete
• Asana: Show Status - Display current task and git info
• Asana: Switch Task - Switch to a different existing task
• Asana: Switch Project - Quickly switch between Asana projects without reconfiguring
• Asana: Clear Configuration - Remove all Asana settings and credentials

Status Bar Indicator

Look at the bottom of VS Code for the Asana status:

• ⚠ Asana: Not Configured - Click to set up
• ➕ Asana: No Task - Click to create your first task
• ✓ Asana: TASK-123 - Shows your current task ID (click to see options)

Typical Workflow

1. Start your day: Create a task for what you're working on

   • Press Ctrl+Shift+A, C
   • Enter task title (auto-fills with git info)
   • Set due date and priority
   • Task is created and set as current

2. As you work: Add progress updates

   • Press Ctrl+Shift+A, U
   • Type your update
   • Comment is added with git context

3. When finished: Complete the task

   • Press Ctrl+Shift+A, D
   • Confirm completion
   • Task marked complete with final git info

Troubleshooting

"Asana not configured" Error

• Run "Asana: Configure" from Command Palette
• Make sure you've entered a valid access token
• Check that you've selected a workspace

Extension Not Working After Installation

1. Make sure VS Code is fully restarted
2. Check that the extension is enabled:
   • Go to Extensions view (Ctrl+Shift+X)
   • Search for "Asana"
   • Make sure it's enabled

Can't See Asana Commands

• Make sure you're in a workspace/folder (not just a single file)
• Try reloading VS Code: Ctrl+Shift+P → "Developer: Reload Window"

Token Issues

• Make sure your token hasn't expired
• Try generating a new token from Asana
• Reconfigure the extension with the new token

Priority Field Not Working

If priorities aren't showing correctly:

1. The extension uses default priority field IDs
2. Your workspace may have different IDs
3. Contact your administrator for the correct configuration

Tips

• The extension saves your current task ID in a .asana-task-id file in your project root
• Add .asana-task-id to your .gitignore to avoid committing it
• You can manually switch tasks using "Asana: Switch Task" command
• Git information is automatically included when available
• Tasks created include repository name, branch, and latest commit message

Support

For issues or questions:

1. Check the Troubleshooting section above
2. Try reconfiguring the extension
3. Contact your team's Asana administrator
4. Report issues to your IT support team

Privacy & Security

• Your Asana token is stored securely in VS Code's settings
• The token is never shared or transmitted except to Asana's API
• Task IDs are stored locally in your project folder
• No data is sent to third parties

Uninstalling

To remove the extension:

1. Open Extensions view (Ctrl+Shift+X)
2. Search for "Asana Task Manager"
3. Click the gear icon → Uninstall
4. Restart VS Code

Version 1.0.0 - For internal use only