JIRA Workflow Checklist for Frontend Developers

A VS Code extension that helps frontend developers track their JIRA tasks and follow a standardized workflow checklist for each task.

Features

• View all your assigned JIRA tasks in VS Code
• Track a detailed workflow checklist for each JIRA task
• Standardized workflow for frontend development tasks
• Customizable checklist templates via JSON
• Export checklists as HTML or JSON
• Links to parent tasks and epics

Requirements

• VS Code 1.98.0 or higher
• JIRA account with API access

Extension Settings

This extension contributes the following settings:

• jiraWorkflow.baseUrl: Your JIRA instance URL (e.g., https://your-domain.atlassian.net)
• jiraWorkflow.username: Your JIRA username (email)
• jiraWorkflow.apiToken: Your JIRA API token
• jiraWorkflow.customChecklistTemplate: Custom JSON template for workflow checklists
• jiraWorkflow.notificationsEnabled: Enable or disable notifications for new JIRA task assignments
• jiraWorkflow.notificationPollingInterval: How often to check for new tasks (in minutes)
• jiraWorkflow.notificationSound: Play a sound when new tasks are assigned

Getting Started

1. Install the extension
2. Click on the JIRA Workflow icon in the activity bar
3. Configure your JIRA credentials when prompted
4. View your assigned tasks in the "My JIRA Tasks" panel
5. Click on a task to open its workflow checklist
6. Track your progress using the checklist for each task

How to Get a JIRA API Token

1. Log in to your Atlassian account
2. Go to Account Settings > Security > Create and manage API tokens
3. Click "Create API token" and provide a label
4. Copy the generated token and use it in the extension settings

Workflow Checklist Sections

The extension provides a comprehensive checklist covering all aspects of frontend development:

1. Requirement Analysis

   • Understand requirements from Jira and Figma
   • Clarify functionalities and resolve queries
   • Identify dependencies

2. Estimation

   • Discuss with backend team
   • Provide timeline to senior developer

3. Development Phase

   • Break tasks into manageable steps
   • Follow coding standards
   • Ensure proper error handling

4. Environment Setup

   • Configure correct development environment

5. Testing

   • Self-review and local testing
   • Test responsiveness, functionality, pagination, etc.

6. Code Review

   • Create PR with clear descriptions
   • Address feedback points

7. Deployment Phase

   • Verify deployment

8. Dry Run

   • Test with team members
   • Address any issues

9. Demo (Optional)

   • Present to stakeholders

Customizing Your Checklist Template

You can now customize the workflow checklist to match your team's specific development process:

Easy Steps to Create a Custom Checklist Template

1. Export the default template as a starting point:

   • Go to the JIRA Workflow view in the activity bar
   • Click on the "Export Default Checklist Template" command in the view menu
   • Save the JSON file to your preferred location

2. Edit the template to fit your workflow:

   • Modify section titles and items
   • Add new sections or remove existing ones
   • Add, remove, or modify checklist items
   • Make sure to follow the template format (see example below)

3. Import your custom template:

   • Go to the JIRA Workflow view in the activity bar
   • Click on the "Import Checklist Template" command in the view menu
   • Select your modified JSON file

4. Alternatively, edit directly in VS Code settings:

   • Go to the JIRA Workflow view in the activity bar
   • Click on the "Edit Checklist Template" command
   • Paste your template JSON into the settings field

Example Template Format

{
  "sections": [
    {
      "id": "section-1",
      "title": "Requirements",
      "items": [
        {
          "id": "item-1-1",
          "title": "Review Jira ticket details",
          "description": "Make sure you understand all requirements",
          "status": "not-started"
        },
        {
          "id": "item-1-2",
          "title": "Check Figma designs",
          "status": "not-started"
        }
      ]
    },
    {
      "id": "section-2",
      "title": "Development",
      "items": [
        {
          "id": "item-2-1",
          "title": "Set up local environment",
          "status": "not-started"
        },
        {
          "id": "item-2-2",
          "title": "Implement feature",
          "description": "Follow coding standards and best practices",
          "status": "not-started"
        },
        {
          "id": "item-2-3",
          "title": "Write tests",
          "status": "not-started"
        }
      ]
    },
    {
      "id": "section-3",
      "title": "Review & Deploy",
      "items": [
        {
          "id": "item-3-1",
          "title": "Self-review code",
          "status": "not-started"
        },
        {
          "id": "item-3-2",
          "title": "Create pull request",
          "status": "not-started"
        },
        {
          "id": "item-3-3",
          "title": "Deploy to test environment",
          "status": "not-started"
        }
      ]
    }
  ]
}

Template Structure

• sections: Array of checklist sections
  • id: Unique identifier for the section (auto-generated if omitted)
  • title: Display name for the section
  • items: Array of checklist items in the section
    • id: Unique identifier for the item (auto-generated if omitted)
    • title: Display name for the checklist item
    • description: (Optional) Longer description of the item
    • status: Must be one of "not-started", "in-progress", or "completed"

Export Options

You can export your completed checklist in two formats:

• HTML: For sharing with your team or including in documentation
• JSON: For programmatic use or integration with other tools

Release Notes

1.0.0

• Initial release with JIRA task integration
• Workflow checklist tracking
• HTML and JSON export options
• Customizable checklist templates