Autograder.io in VSCode

Submit, read results, and jump straight to the failing line, without leaving your editor.

Built for University of Michigan CS students.
Works with any project on autograder.io.

The Autograder sidebar in VS Code: submissions with scores, a failing test's output with a bundled-JS stack frame source-mapped to web/src/App.jsx:15, that file open in the editor, and the failures listed in the Problems panel

Why

Grading feedback from autograder.io lives in a browser tab, far from your code :( This extension brings autograder.io into VS Code, so you can easily compare submissions and feedback side-by-side with your project:


Results sidebar	Every submission with its score. Each test suite and test is expandable, with output loaded on demand.
Clickable line numbers	`file.py:42`, Python tracebacks, gcc/clang errors and valgrind frames become links. Minified `bundle.js` frames are source-mapped back to your `.jsx`.
Failures in the Problems panel	One click turns every failing test's file references into red squiggles in your code.
Tarball-aware submitting	For classes that expect a tarball instead of individual files, paste the spec's `tar` command once, or pick the files to include. After that, building the submission is one click.
Git time travel	Each submission is tied to the exact code that produced it. Diff any submission against your current code, revert changes, or check it out as a branch.

[!NOTE] This is a student project not affiliated with the University of Michigan or the autograder.io team. It was built with the help of Claude, an AI assistant. See How this was built.

Features

Link results to your code

Click any file reference in test output to open that line.

Sandbox paths are mapped to your workspace. The autograder runs your code under /home/autograder/working_dir/submit/…, and those paths are mapped back to the matching files in your workspace.
Bundled JavaScript gets source-mapped. For web projects with a bundled front end (React, webpack, esbuild…), frames in the compiled bundle.js are mapped back to your source using the bundle.js.map from the tarball you actually submitted, downloaded from autograder.io. Rebuilding locally afterwards doesn't break the mapping.
Library frames stay unlinked. Frames inside React or other libraries aren't linked, so only your code is.

Show failures in Problems reads the output of every failing test you're allowed to see and adds an entry for each file reference. Each entry is labeled with the test name and the real error message.

Submit in one click

The extension asks autograder.io which files your project expects. The first time you build, it sets itself up from that:

Individual files (e.g. project.cpp, tests.cpp): the matching files in your folder are pre-selected for you to confirm.
A tarball (e.g. submit.tar.gz): you choose one of these.
- Paste the tar command from the project spec.
- Pick the files and folders to include. If you already have a tarball, its contents are pre-checked, and the extension writes the command.
- Run your own script.

First-run setup asking how submit.tar.gz should be built: paste the spec's command, choose files and folders, or build it yourself

Then pick how you submit (the autograder.submitMethod setting):

	What happens
Build & Open in Browser (default)	Builds the submission and checks it against what autograder.io expects. Then opens the project page and shows the file in Finder/Explorer so you can upload it. Nothing is uploaded from VS Code. The extension watches for your upload and shows the score when grading finishes.
Submit directly	Builds and uploads from VS Code. First, a confirmation lists the files with their sizes and modification times, how many submissions you've used today, and the honor pledge.

Every submission, tied to its code

When you build a submission, the extension saves a snapshot commit of your working tree. The snapshot includes uncommitted and untracked (non-ignored) files. Your branch, index and stash are never touched.

Direct submits are linked to their snapshot immediately.
Website uploads are linked when the uploaded file's SHA-256 matches a build. The link is exact even if you built several times before uploading.
Older submissions, made before you installed the extension, show the last commit before the submission time, marked ~approx.

From any submission you can Compare with current (a multi-file diff), Check out as branch, or Copy SHA.

Multi-file diff comparing submission [#1003](https://github.com/jasnzhng/autograder-vscode/issues/1003)'s code with the working tree, showing the fix made after that submission

Install

Install from the Visual Studio Marketplace, or search for "Autograder.io" in VS Code's Extensions view, or run:

code --install-extension jasnzhng.autograder-vscode

To install from a file instead, download the .vsix from the Releases page and use ⋯ → Install from VSIX… in the Extensions view.

Installed a .vsix before the extension was on the Marketplace? Those builds use the old ID jasnzhng.autograder-io-vscode and won't update. Uninstall it, then install from the Marketplace. Your autograder.* settings carry over; you'll need to sign in again.

Build from source instead

Requires Node 20+.

git clone https://github.com/jasnzhng/autograder-vscode.git
cd autograder-vscode
npm install
npm run package          # creates autograder-vscode-<version>.vsix
code --install-extension autograder-vscode-*.vsix

Getting started

Sign in. Run Autograder: Sign In from the Command Palette (⇧⌘P / Ctrl+Shift+P).
- It opens https://autograder.io/web/__apitoken__ in your browser. After you sign in, that page downloads a file named agtoken.
- VS Code watches your Downloads folder and picks the file up automatically. If you saved it somewhere else, choose Choose token file… instead.
- The token is stored in VS Code's SecretStorage, i.e. your OS keychain. The extension then offers to delete the downloaded file, or to move it to ~/.agtoken, where autograder.io's command-line tools look for it.
- Already have ~/.agtoken? The extension finds it and asks before using it.
- Why a token?
Open your project folder.
- The extension looks for an autograder.io/web/project/<id> link in your scripts and READMEs.
- If it doesn't find one, it asks you to choose the course and project.
Open the Autograder view. Click the Autograder icon in the activity bar or the status bar item, or run Autograder: Show Results. Need more room? The pop-out button in the view's title bar opens it as an editor tab.
Set up submitting when asked, then use Build & Open in Browser.

Commands

Command
`Autograder: Show Results`	Open the Autograder sidebar for the current project.
`Autograder: Open Results in Editor Area`	The same view as a wide editor tab.
`Autograder: Refresh`	Reload submissions and results.
`Autograder: Build Submission & Open in Browser`	Build, check, open autograder.io, reveal the file.
`Autograder: Submit Project`	Build and upload directly.
`Autograder: Configure Submission Files…`	Redo the first-run setup.
`Autograder: Select Project for This Workspace`	Choose a different course/project.
`Autograder: Open Project on autograder.io`
`Autograder: Clear Autograder Problems`	Remove the diagnostics added by "Show failures in Problems".
`Autograder: Sign In` / `Sign Out`

Settings

Setting	Default
`autograder.projectId`	auto	Project ID, the number in `autograder.io/web/project/<id>`.
`autograder.submitMethod`	`browser`	`browser`: build and open the website. `upload`: submit directly.
`autograder.buildCommand`	asked	Shell command run in the workspace root before each build, e.g. the spec's `tar -czvf submit.tar.gz …`. Empty string = no build step.
`autograder.submitFiles`	`[]`	Paths or globs to upload. When empty, files are matched against the project's expected patterns.
`autograder.snapshotCommits`	`true`	Record git snapshots at build time.
`autograder.dryRun`	`false`¹	Do everything except upload.
`autograder.baseUrl`	`https://autograder.io`	Must be `https://` (plain `http://` only on localhost).

¹ When unset, defaults to on in an Extension Development Host (F5), so trying a dev build can never use up a submission.

Privacy & safety

Your token stays on your machine. It's kept in the OS keychain and sent only to the server that issued it (autograder.io). A project whose .vscode/settings.json points autograder.baseUrl elsewhere can't redirect it: you're simply signed out there, and signing in warns you first.
For students only. The course picker lists only courses you're enrolled in, and the extension only reads your own group's submissions. It never lists courses you're on staff for, or fetches anyone else's submissions.
Signing out only forgets the token locally. autograder.io keeps one token per user, shared with your browser session. Revoking it on the website would also log you out there.
Reading is read-only. Viewing results, output and submitted files only ever uses GET requests.
Uploading takes an explicit choice. It happens only through Submit directly, after a confirmation dialog. The default flow never uploads.
Snapshots are local. They're ordinary git objects under refs/autograder/* in your repo. They aren't pushed unless you push those refs yourself.

FAQ

Is this allowed in my course?

The extension uses autograder.io's own API, with the personal token the site gives every user. That's the same mechanism the official CLI tools use. Uploading directly is equivalent to clicking Submit on the website, and the server applies the same daily limits. That said, check your course's policies. If in doubt, use the default Build & Open in Browser flow, which leaves the upload to you.

Why not just embed the autograder.io website?

autograder.io signs in with Google, and Google's login pages refuse to load inside embedded frames. So an embedded copy of the site could never be logged in. Instead, the extension renders the same data through the site's REST API. See how it works.

The jump went to the wrong line.

Line numbers come from the code you submitted. If you've edited the file since, the line may have moved. Use Compare with current on that submission to see what changed.

Does it work for C++ / Python / assembly projects?

Yes. It recognizes gcc/clang (file.cpp:12:5:), valgrind ((file.cpp:42)), pytest (file.py:23:), Python tracebacks, Node and browser stacks, and file(42)-style references.

Documentation

How it works: signing in, link resolution and source maps, snapshots, matching uploads made on the website.
autograder.io API notes: the endpoints the extension uses, verified against the server source.
Development: building, testing, and the offline demo kit used for the screenshots above.

How this was built

This extension was built with Claude Code, but all code has been reviewed and tested by myself.

The repository was squashed into a single commit before it was published, since the original working history contained material from a course project I was working on at the time, used as test data. Under U-M's honor code, course project code can't be shared publicly. The published code is the same as before the squash, minus that course material. It uses only generic examples and a fictional demo project.

If something looks off, please open an issue.

License

MIT