eslint-plugin-baseline

ESLint plugin for Baseline web feature compatibility checking.

Installation

npm install --save-dev eslint-plugin-baseline
# or
pnpm add -D eslint-plugin-baseline

Usage

Add baseline to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["baseline"]
}

Then configure the rules you want to use:

{
  "rules": {
    "baseline/no-limited-features": ["error", { "year": 2023 }],
    "baseline/enforce-baseline-year": ["error", { "year": 2023 }],
    "baseline/require-noopener": "error"
  }
}

Using Preset Configurations

This plugin provides three preset configurations:

Recommended (Default)

{
  "extends": ["plugin:baseline/recommended"]
}

• Disallows features with limited support
• Requires noopener on window.open
• Allows newly available features by default

Strict

{
  "extends": ["plugin:baseline/strict"]
}

• Enforces 2022 baseline
• No newly available features
• Strict security rules

Relaxed

{
  "extends": ["plugin:baseline/relaxed"]
}

• Allows newly available features
• 2024 baseline
• Warnings instead of errors

Rules

baseline/no-limited-features

Disallow Web APIs with limited browser support.

// ❌ Bad (if navigator.share is not widely available)
await navigator.share({ title: 'Hello' });

// ✅ Good
if (navigator.share) {
  await navigator.share({ title: 'Hello' });
}

Options:

{
  "year": 2023,           // Target year for baseline
  "allowNewly": false,    // Allow newly available features
  "allowLimited": false,  // Allow limited support features
  "exceptions": []        // Feature IDs to exclude from checks
}

baseline/enforce-baseline-year

Enforce that only features available by a specific year are used.

// With { "year": 2020 }

// ❌ Bad (if feature was added after 2020)
const observer = new IntersectionObserver(callback);

// ✅ Good (fetch available before 2020)
await fetch('/api/data');

Options:

{
  "year": 2023,       // Required: Target year
  "exceptions": []    // Feature IDs to exclude
}

baseline/require-noopener

Require rel="noopener" or rel="noreferrer" when using window.open() for security.

// ❌ Bad
window.open('https://example.com');

// ✅ Good
window.open('https://example.com', '_blank', 'noopener');

// ✅ Also good
window.open('https://example.com', '_blank', 'noreferrer');

This rule has auto-fix capability.

Configuration Examples

Target Modern Browsers (2023+)

{
  "extends": ["plugin:baseline/recommended"],
  "rules": {
    "baseline/no-limited-features": ["error", { 
      "year": 2023,
      "allowNewly": true
    }]
  }
}

Legacy Browser Support (2020)

{
  "extends": ["plugin:baseline/strict"],
  "rules": {
    "baseline/enforce-baseline-year": ["error", { "year": 2020 }]
  }
}

Allow Specific Features

{
  "rules": {
    "baseline/no-limited-features": [
      "error",
      {
        "year": 2023,
        "exceptions": ["web-share", "view-transitions"]
      }
    ]
  }
}

Detected Web APIs

The plugin currently detects:

Browser APIs

• navigator.share
• navigator.geolocation
• navigator.clipboard
• navigator.serviceWorker
• navigator.mediaDevices

Storage APIs

• localStorage
• sessionStorage
• indexedDB

Network APIs

• fetch
• WebSocket
• EventSource

Observers

• IntersectionObserver
• ResizeObserver
• MutationObserver
• PerformanceObserver

Communication

• BroadcastChannel

Utilities

• requestAnimationFrame
• requestIdleCallback
• queueMicrotask

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Test
pnpm test

# Watch mode
pnpm dev

License

MIT