📋 ESLint Plugin

Lint your code for baseline web compatibility issues

← Back to Baseline Map

📦 Installation

Step 1: Install the Plugin

npm install --save-dev eslint-plugin-baseline-compatibility

Step 2: Configure ESLint

Add to your .eslintrc.js:

module.exports = {

plugins: ['baseline-compatibility'],

rules: {

'baseline-compatibility/no-unsupported-features': 'warn',

'baseline-compatibility/prefer-baseline-features': 'error'

}

};

Step 3: Configure Options

rules: {

'baseline-compatibility/no-unsupported-features': [

'warn', {

baselineLevel: 'high', // 'high' | 'low'

includePolyfills: true

}

]

}

✨ Features

⚠️

Unsupported Feature Detection

Warns about CSS and JS features not in Baseline

🔧

Auto-Fix Suggestions

Provides polyfill suggestions and alternative syntax

⚙️

Configurable Baseline Level

Choose between 'high' (widely available) or 'low' (newly available)

📊

Comprehensive Coverage

Scans CSS properties, selectors, and JavaScript features

📋 Available Rules

baseline-compatibility/no-unsupported-features

Warns when using CSS or JavaScript features that are not part of the specified baseline level.

❌ Incorrect

/* CSS */

.container {

container-type: inline-size; /* Not baseline */

}

// JavaScript

const name = user?.profile?.name; // Not baseline

✅ Correct

/* CSS */

.container {

display: grid; /* Baseline */

}

// JavaScript

const name = user && user.profile && user.profile.name;

baseline-compatibility/prefer-baseline-features

Suggests using baseline-compatible alternatives when available.

// Suggests using fetch() instead of XMLHttpRequest

const xhr = new XMLHttpRequest(); // ❌

const response = await fetch(url); // ✅

⚙️ Configuration Options

Option	Type	Default	Description
baselineLevel	'high' \| 'low'	'high'	Minimum baseline level to enforce
includePolyfills	boolean	true	Include polyfill suggestions in error messages
ignoreFeatures	string[]	[]	List of features to ignore

Ready to Install?

📦 Install from npm 📂 View on GitHub