Browser Compatibility Checker - VS Code Extension
A VS Code extension that highlights JavaScript, CSS, and Web API code that isn't supported in your target browser versions. Powered by MDN Browser Compat Data.
Features
- Real-time diagnostics — Underlines incompatible code as you type
- 70+ compatibility rules covering:
- JS syntax: optional chaining, nullish coalescing, private fields, etc.
- JS built-ins:
Array.flat(), replaceAll(), structuredClone(), etc.
- Web APIs:
fetch, IntersectionObserver, ResizeObserver, etc.
- CSS features: container queries,
:has(), aspect-ratio, subgrid, etc.
- Configurable browser targets — Set minimum versions for Chrome, Safari, Firefox, and Edge
- Configurable severity — Choose Error, Warning, Information, or Hint
- MDN links — Click the diagnostic code to view MDN documentation
- Status bar — Shows current target browsers at a glance
- Toggle on/off — Quickly enable/disable via command palette
Configuration
Open Settings (Cmd+, / Ctrl+,) and search for browserCompatChecker:
| Setting |
Type |
Default |
Description |
browserCompatChecker.chrome |
number |
70 |
Minimum Chrome version |
browserCompatChecker.safari |
number |
14 |
Minimum Safari version |
browserCompatChecker.firefox |
number |
100 |
Minimum Firefox version |
browserCompatChecker.edge |
number |
79 |
Minimum Edge version |
browserCompatChecker.enabled |
boolean |
true |
Enable/disable the checker |
browserCompatChecker.severityLevel |
string |
Warning |
Diagnostic severity (Error / Warning / Information / Hint) |
Example: workspace .vscode/settings.json
{
"browserCompatChecker.chrome": 80,
"browserCompatChecker.safari": 15,
"browserCompatChecker.firefox": 110,
"browserCompatChecker.edge": 90
}
Commands
| Command |
Description |
| Check Browser Compatibility |
Manually scan the active file |
| Toggle Browser Compatibility Checker |
Enable or disable the extension |
Supported Languages
- JavaScript / TypeScript (
.js, .ts, .jsx, .tsx)
- CSS / SCSS / LESS
- HTML
Installation (Development)
cd browser-compat-checker
npm install
npm run compile
Then press F5 in VS Code to launch the Extension Development Host.
How It Works
- The extension scans open files using regex patterns that match modern JS/CSS features.
- Each matched pattern is looked up against
@mdn/browser-compat-data to determine the version each browser added support.
- If the feature was added after your configured minimum browser version, a diagnostic (warning) is shown inline.
- Diagnostics update live as you type and when you change target versions in settings.
| |
