https://github.com/benaandrew/browser-compatibility-checker

A tool for analyzing frontend code to find browser compatibility issues
https://github.com/benaandrew/browser-compatibility-checker

browser browser-compat-data browser-compatibility browserslist caniuse checker compatibility compatibility-testing developer-tools lint mdn vscode-extension

Last synced: about 1 month ago
JSON representation

A tool for analyzing frontend code to find browser compatibility issues

• Host: GitHub
• URL: https://github.com/benaandrew/browser-compatibility-checker
• Owner: BenAAndrew
• License: mit
• Created: 2024-01-30T20:21:51.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-07-22T16:40:11.000Z (5 months ago)
• Last Synced: 2024-11-15T20:57:46.646Z (about 2 months ago)
• Topics: browser, browser-compat-data, browser-compatibility, browserslist, caniuse, checker, compatibility, compatibility-testing, developer-tools, lint, mdn, vscode-extension
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/browser-compatibility-checker
• Size: 1.21 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Browser compatibility checker

A tool for analyzing frontend code to find browser compatibility issues powered by [MDN compatibility data](https://developer.mozilla.org/en-US/)

- Scans HTML, CSS & JS files for compatibility issues

- Reports both deprecated & mixed-support features

- Supports configuration of target browsers (including browserslist)

## VSCode Extension

![](preview.gif)

### Extension Settings

- `browser-compatibility-checker.enableOnChange`: Enable this extension on start and file change

- `browser-compatibility-checker.useError`: Use a severity of 'Error' for each problem (otherwise uses 'Warning')

- `browser-compatibility-checker.browserList`: Which browsers to check compatibility for (defaults to all MDN recognised browsers)

- `browser-compatibility-checker.warnForOtherBrowsers`: Show a warning for issues with browsers not in the browser list

- `browser-compatibility-checker.foldersToIgnore`: Glob paths to exclude from scanning

## CLI Tool

1. `npm i -g browser-compatibility-checker`

2. `npx browser-compatibility-checker`

### Arguments

- **-f, --folder**: Folder path to scan

- **-b, --browsers**: Comma seperated list of browsers to check (defaults to all)

- **-i, --ignore**: Comma seperated list of glob paths to ignore

## Local development

### Installation

1. `npm install`

2. `npm run watch`

3. Run:

   - **VSCode extension**: Open VSCode & press F5 to run the extension

   - **CLI tool**: `npm i -g`, then run with `browser-compatibility-checker`

## Disclaimer

This tool is not a replacement for cross-browser testing and cannot verify how elements will perform on various browsers.

Elements which are not flagged as incompatible may still have issues on some browsers.