VSCode GitHub Projects- 2 mins
Table of Contents:
- Video Demonstration (YouTube)
- What are GitHub Projects?
- What does the extension do?
- How is it built?
- Project Links
This project was completed as a part of Sprint 0 Hackathon conducted during the MLH-Fellowship (Spring 2021).
There are several utilities from GitHub that makes collaboration easy, GitHub Projects is one of them.
Currently, there is no UI-based extension that integrates GitHub Projects in VSCode. Hence, our team (Me, Dean Gladish, Samuel Yuan and Shrill Shrestha) decided to make one.
A quick spoiler: we won!
Video Demonstration (YouTube)
What are GitHub Projects?
GitHub Projects are divided into 3 scopes:
- User Scope
- Repository Scope
- Organisation Scope
One can create Kanban boards with any of these scopes to track the progress of a project. A typical card maintained on a project board can contain anything from a simple note to linked Issues and Pull Requests.
What does the extension do?
The extension we built communicates with GitHub’s backend using GraphQL API - Queries and Mutations, to render a WebView built by Svelte on VSCode with it’s native UI.
The result is an integration of realtime communication between VSCode native UI and GitHub Projects. It allows a user to:
- View the Projects (with filtered scopes)
- View the Project Boards
- Add a Project Card
- Delete a Project Card
- Archive a Project Card
- Move a Project Card to a different Column
- Edit a Project Card (Only if it is a Note)
- Convert a Project Card ** into an Issue**
- Visit the web version of the linked Issues/Pull Requests
How is it built?
- WebViews built with Svelte
- Queries/Mutations with GitHub using GraphQL (Apollo client)
- Session-based GitHub OAuth
- Communication with native VSCode APIs with TypeScript
|Extension||Visual Studio Marketplace||Pod212.vscode-github-projects/|
The repository is open sourced at MLH-Fellowship’s GitHub.