Visual Studio Code is a code editor optimized for building and debugging web and cloud based applications.

Within Visual Studio Code, you can interact with tasks from your projects directly from the app via the Teamwork extension.

With the VSCode Editor extension, you can view and add comments to tasks as well as quickly create new tasks from lines of code in the editor.

Note: If you are working in a Github repository, the newly-created task will have a direct link to the exact line in Github.

Once you have the Teamwork extension installed in VSCode and logged in to your relevant Teamwork account, you can start using the integration.

VSCode will pull in a list of your projects from your Teamwork site. Click the Select Project from Repository option to choose a project.

Note: You will need to have at least one folder/file created in VSCode in order to access your Teamwork projects via the Select Project from Repository option. Otherwise it will return an error when clicked.

Image Placeholder



Clicking the Select Project for Repository option will bring up a dropdown list of your projects. Using the checkboxes to the left of each project, select the ones you want to list in the extension pane for quick access.

Once you click OK (or press Enter on your keyboard), the selected projects will appear in the list on the left.

Image Placeholder


You can click a project to expand it to display any active task lists. Select a task list to view any open tasks.

Image Placeholder


Viewing an existing Teamwork task

When you select an individual task, it will open a task details view in the editor. The task pane will display the relevant task details with whichever properties that have been set.

You can click the project or task list name to be directed to that area in your Teamwork site.

Image Placeholder



Creating a task from a line of code

You can quickly create Teamwork tasks directly from lines of code within the editor. Highlight the relevant text, then right click and choose Create Task.

A modal will open at the top of the editor where you can select one of the synced projects and a corresponding task list. Once selected, you can enter in the task title. Press Enter on your keyboard to create the task.

Image Placeholder

A comment will also be added to your code file detailing the task created.

Image Placeholder


Once the task has been created, it will be accessible in the relevant task list in the Teamwork extension panel.

Note: You may need to use the refresh arrow at the top of the Teamwork extension panel to see the newly created task.

Clicking the task will open the task details on the right side of VSCode.

Image Placeholder



In Teamwork, you will see the task has been created in the chosen task list. The task description will include the details from VSCode.

Image Placeholder



Adding a comment to an existing task

To add a comment to the task, click Add Comment at the bottom of the pane to open the comment box. Click Submit to add the comment to the task in Teamwork.

Image Placeholder


When viewing the task in Teamwork, you will see the comment has been added to the task.

Image Placeholder