VS Code plugin

Install (.vsix)

The plugin is installed by hand from the packaged .vsix file in the repo. From a checkout of the source:

# clone the Paradise repo
git clone https://github.com/bobdodd/paradise
cd paradise/app/vscode-extension

# install the packaged extension into VS Code
code --install-extension paradise-a11y.vsix

Or via the VS Code UI: Extensions panel → … menu → Install from VSIX….

What you see

• Squiggliesin the editor on lines where Paradise has reported an issue. Severity colour follows VS Code’s standard error/warning/information conventions.
• Hover popupswith the analyser’s reasoning, the WCAG criterion it’s engaged, the engine’s confidence level and percentage for this finding, and a link into the matching /paradise/analysers page. The confidence reason — why the engine is more or less sure — is part of the popup, so the signal is visible at the point of reading the issue.
• Quick Fixes(the standard VS Code Code Actions / lightbulb affordance) for any issue that carries a fix payload. Activate the lightbulb, preview the suggested change, accept or dismiss. Fixes are best-effort: Paradise emits the corrective code and the file it belongs in, but the placement within the file is the surface’s responsibility, so review the result before committing. See Architecture for the framing.
• Problems panel entries for every issue, with file and line jump-targets — works the same way the TypeScript and ESLint extensions do. The panel is sortable by confidence as well as severity, so a triage pass over HIGH-confidence findings only is one click away.
• Status bar indicatorshowing the current document’s issue count and a quick toggle to enable / disable analysis.

Configuration

Settings live under paradise.* in VS Code settings:

// .vscode/settings.json
{
  "paradise.scope": "project",
  "paradise.frameworks": ["react", "vue"],
  "paradise.severity": {
    "missing-aria-connection": "error",
    "mouse-only-click":        "warning",
    "focus-order-conflict":    "information"
  }
}

• paradise.scope — file analyses each file independently; project resolves cross-file references across the workspace (the multi-model mode that catches handler/element/style splits).
• paradise.frameworks — which framework-specific analysers to enable. Auto-detected from the workspace by default.
• paradise.severity — map analyser categories to VS Code severities.

CI use

The same analyser engine is consumable from CI without VS Code. Install the npm package and call the engine directly:

// scripts/check-a11y.mjs
import { analyzeProject } from "paradise-accessibility";

const results = await analyzeProject({
  html:       ["src/**/*.html"],
  javascript: ["src/**/*.{js,ts,jsx,tsx}"],
  css:        ["src/**/*.css"],
  scope:      "project",
});

if (results.issues.some((i) => i.severity === "error")) {
  process.exit(1);
}

The CI surface is what the Paradise team uses for the evidence corpus on Evidence.

The planned browser plugin

A browser-extension version of Paradise is planned but not yet built. The intended surface is a DevTools panel (Chrome / Edge / Firefox) running the same analyser engine as the VS Code plugin and the Node API — same diagnostics, but rooted in the page the developer is currently inspecting.

The browser plugin is the third release vehicle for Paradise (alongside the VS Code plugin and the Node library). It exists on this page only to mark the gap; there’s no shipping artefact yet.

Limitations and known issues

• Cross-file analysis can be slow on very large workspaces. The DocumentModel build is proportional to the size of the integrated source set. The plugin works incrementally, but the first full-project pass on a 500K-line codebase takes a noticeable few seconds.
• Framework-specific analysers run with the framework’s minimum supported version. React 18+, Vue 3+, Svelte 4+, Angular 16+. Older versions have partial coverage.
• Distributed as a signed .vsix from the source repo, not via a marketplace. The choice is deliberate — see the colophon for the rationale.

Reading on

• Analysers — what each warning the plugin shows actually means.
• Architecture — what the plugin’s engine is doing under the hood.
• Playground — the in-browser sibling surface; same engine, pasted code instead of an editor session.
• Back to Paradise.