Table of Contents
📖 About
GitHub Contributions Calendar brings your GitHub profile's contribution
heatmap directly into VS Code. Sign in once with your GitHub account, and the
Activity Bar shows a live, scalable SVG heatmap of your last 12 months of
contributions — styled to match your current VS Code theme, light or dark.
Under the hood it uses VS Code's built-in GitHub authentication provider (so
there's no personal access token to create, copy, or manage) and queries
GitHub's own GraphQL contribution API, the same data source that powers the
heatmap on github.com.
✨ Features
- 📅 Full contribution heatmap (last 12 months), scaled to fit your sidebar — no horizontal scrolling
- 🔐 Uses VS Code's built-in GitHub sign-in — no personal access token to create or paste
- 🌗 Matches your VS Code theme (light/dark), and updates live if you switch themes
- 🔄 One-click refresh, right in the view's title bar
🔧 Contributing
Contributions are what make the open source community such an amazing place
to learn, inspire, and create. Any contributions you make are greatly
appreciated.
- Fork the repo
- Create a new branch (
git checkout -b improve-feature)
- Make your changes
- Commit your changes (
git commit -am 'Improve feature')
- Push to the branch (
git push origin improve-feature)
- Open a Pull Request
Please open an issue first to discuss what you'd like to change.
How It Works
- Authentication uses
vscode.authentication.getSession('github', ...) —
VS Code's own GitHub sign-in flow. Your credentials never touch this
extension directly; VS Code manages the session for you.
- Contribution data comes from GitHub's GraphQL API
(
contributionsCollection.contributionCalendar), the same data source
that powers the heatmap on your GitHub profile.
- The heatmap is rendered as a single scalable SVG (with month labels),
so it resizes cleanly with the sidebar instead of scrolling.
- Colors are theme-aware: a light and dark palette are picked based on
your current VS Code color theme.
Development
Want to modify or build this extension locally?
npm install
npm run build
Then press F5 in VS Code (with this folder open as the workspace root)
to launch an "Extension Development Host" window with your changes loaded.
| Method |
Description |
Action |
| 🔧 Manual Build |
Bundle the extension into out/extension.js |
npm run build |
| 📦 Package |
Produce an installable .vsix file |
vsce package |
npm install -g @vscode/vsce # if not already installed
npm run build
vsce package
Install the resulting .vsix locally via Extensions: Install from
VSIX... in the Command Palette, or publish it with vsce publish.
🗺️ Roadmap
- Cache the last fetched data (
context.globalState) so the view isn't blank
while refetching
- Add a status bar item showing today's contribution count
- Let the user view another GitHub username's calendar, not just their own
📡 Follow Me
⭐ Give A Star
If you found this project useful, give it a star to help more people discover it!
📄 License
MIT License — see LICENSE for details.
