TaskBoard for VS Code
A Visual Studio Code extension that provides a simple, efficient Kanban board for managing tasks directly within your editor. Perfect for developers who want to track their tasks without leaving VS Code.
Features
🎯 Task Management
- Create, edit, and organize tasks in a Kanban-style board
- Smooth drag-and-drop functionality with visual feedback
- Reorder tickets within columns
- Move tickets between columns
- Quick status updates via drag-and-drop
- Automatic timestamp tracking for task creation and updates
📋 Board Organization
- Three-column layout:
- Clean, VS Code-native interface
- Persistent board state and ticket order
- Visual drop previews when moving tickets
💾 Data Storage
- Support for both JSON and CSV file formats
- Auto-save functionality
- File watching for real-time updates
- Proper handling of special characters and formatting
🎨 User Experience
- Smooth animations and transitions
- Clear visual feedback during drag operations
- Drop previews for better positioning
- Responsive layout that adapts to your window size
- Native VS Code theming support
Getting Started
- Open the Command Palette (
Cmd+Shift+P
/ Ctrl+Shift+P
)
- Type "TaskBoard" to see available commands:
TaskBoard: Create New Board
- Create a new board file
TaskBoard: Open Board
- Open an existing board
TaskBoard: Show Current Board
- Display the active board
Using TaskBoard
Creating a New Board
- Open Command Palette
- Select
TaskBoard: Create New Board
- Choose file format (JSON or CSV)
- Select save location
Managing Tasks
- Create Task: Click "Add" in any column
- Edit Task: Click on the task title or description
- Move Task:
- Drag and drop between or within columns
- Visual preview shows where the task will be placed
- Delete Task: Click the delete button on the task
Auto-save
All changes are automatically saved to your board file. No manual saving required!
{
"columns": [
{
"id": "todo",
"name": "To Do",
"tickets": [
{
"id": "ticket-1",
"title": "Example Task",
"description": "Task description",
"status": "todo",
"createdAt": "2024-03-26T16:00:00.000Z",
"updatedAt": "2024-03-26T16:00:00.000Z",
"position": 1000
}
]
}
]
}
The CSV format includes all task fields in a flat structure:
id,title,description,status,createdAt,updatedAt,position
ticket-1,Example Task,Task description,todo,2024-03-26T16:00:00.000Z,2024-03-26T16:00:00.000Z,1000
Requirements
- Visual Studio Code version 1.87.0 or higher
- Node.js and npm (for development)
Development
Setup
git clone https://github.com/siupangjau/taskboard_vsc_extension.git
cd taskboard
npm install
Build
npm run compile
Debug
- Open in VS Code
- Press F5 to start debugging
- Use Command Palette to test commands
Contributing
Found a bug or have a feature request? Please open an issue on our GitHub repository.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Built with React and TypeScript
- Uses react-beautiful-dnd for drag-and-drop functionality
- Inspired by Kanban methodology