Quick Start

Catch JavaScript features that exceed your browser support policy while you write code. eslint-plugin-baseline-js checks supported syntax, built-ins, and Web APIs with one rule.

Quick StartCopy Anchor Link

pnpm add -D eslint eslint-plugin-baseline-js

import baselineJs from 'eslint-plugin-baseline-js'; 

export default [
  { plugins: { 'baseline-js': baselineJs } }, 
  baselineJs.configs.recommended({ available: 'widely', level: 'warn' }), 
];

const date = new Date();
const year = date.getYear(); 

pnpm exec eslint example.js

You’re all setCopy Anchor Link

You should see a warning on getYear(). The preview shows the code and a shortened message together. Switch to Use instead to see the change:

const date = new Date();
const year = date.getYear();
             ^^^^^^^^^^^^^^^
'Date.prototype.getYear' does not meet your Baseline Widely available target. 

'Date.prototype.getYear' does not meet your Baseline Widely available target. It has Limited availability. Feature ID: date-get-year-set-year.

Add TypeScriptCopy Anchor Link

Type information lets the rule recognize supported instance members, such as Set.prototype.difference(). Install the parser and TypeScript:

pnpm add -D @typescript-eslint/parser typescript

Add the TypeScript block alongside the JavaScript preset. The green lines mark the parser and type-aware settings:

import tsParser from '@typescript-eslint/parser'; 
import baselineJs from 'eslint-plugin-baseline-js';

export default [
  { plugins: { 'baseline-js': baselineJs } },
  baselineJs.configs.recommended({ available: 'widely', level: 'warn' }),
  {
    ...baselineJs.configs['recommended-ts']({ available: 'widely', level: 'warn' }), 
    languageOptions: {
      parser: tsParser, 
      parserOptions: {
        project: './tsconfig.json', 
        tsconfigRootDir: import.meta.dirname, 
      },
    },
  },
];

Use mapped rules without extra API checksCopy Anchor Link

Use baseline if you want the mapped checks for syntax and some built-ins without enabling the extra API detectors. Spread the helper's array into your config:

import baselineJs from 'eslint-plugin-baseline-js';

export default [
  { plugins: { 'baseline-js': baselineJs } }, 
  ...baselineJs.configs.baseline({ available: 'widely', level: 'warn' }), 
];

Next stepsCopy Anchor Link

Further readingCopy Anchor Link

• What is Baseline? from the W3C WebDX Community Group.
• Bringing Baseline into Product Development — and Keeping It Safe in Practice: a case study from this project's author.