Examples

Use these examples in eslint.config.mjs with ESLint 9 or 10. See Config for all rule options and preset scopes.

JavaScriptCopy Anchor Link

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

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

TypeScriptCopy Anchor Link

Install the parser and TypeScript alongside the plugin:

pnpm add -D eslint eslint-plugin-baseline-js typescript @typescript-eslint/parser

The TypeScript preset targets ts and tsx files. Configure the parser in the same config object.

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

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

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "ESNext"],
    "jsx": "preserve",
    "strict": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Try an instance method that needs type information:

const left = new Set([1, 2]);
left.difference(new Set([2])); 

With available: 'widely', the bundled data produces this report:

The 'difference' member of Set instances does not meet your Baseline Widely available target. It is Baseline Newly available. Feature ID: set-methods.

Mixed JavaScript and TypeScriptCopy Anchor Link

Use both presets. Each applies to its own file extensions. The added JavaScript preset covers .js, .cjs, .mjs, and .jsx alongside your TypeScript block.

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

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

Year and feature filtersCopy Anchor Link

This setup reports detected features that entered Baseline after 2020. It also reports features with Limited availability.

ignoreFeatures applies to every detector. The only filter limits additional built-in checks to exact feature IDs.

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

export default [
  {
    files: ['**/*.{js,mjs,cjs}'],
    plugins: { 'baseline-js': baselineJs },
    rules: {
      'baseline-js/use-baseline': ['error', {
        available: 2020, 
        ignoreFeatures: ['nullish-coalescing', '/^optional-/'], 
        includeWebApis: { preset: 'safe' },
        includeJsBuiltins: {
          preset: 'safe',
          only: ['array-group'], 
        },
      }],
    },
  },
];

Disable checks for test filesCopy Anchor Link

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

export default [
  { plugins: { 'baseline-js': baselineJs } },
  baselineJs.configs.recommended(),
  {
    files: ['**/*.test.{js,mjs,cjs}'], 
    rules: { 'baseline-js/use-baseline': 'off' }, 
  },
];

Full (JS + CSS + HTML)Copy Anchor Link

Check JavaScript, CSS, and HTML with one ESLint config and one Baseline target. This example combines eslint-plugin-baseline-js, @eslint/css, and @html-eslint/eslint-plugin.

Install the plugins and browser globals:

pnpm add -D eslint eslint-plugin-baseline-js @eslint/css @html-eslint/eslint-plugin globals

Save this as eslint.config.mjs in your project root:

import css from "@eslint/css";
import html from "@html-eslint/eslint-plugin";
import baselineJs, { BASELINE } from "eslint-plugin-baseline-js";
import globals from "globals";

const available = BASELINE.WIDELY; 

export default [
  // JavaScript, including JSX.
  {
    ...baselineJs.configs.recommended({ available }),
    plugins: { "baseline-js": baselineJs },
    languageOptions: {
      globals: globals.browser, 
      parserOptions: { ecmaFeatures: { jsx: true } },
    },
  },

  // CSS files.
  {
    files: ["**/*.css"],
    plugins: { css },
    language: "css/css", 
    rules: {
      "css/use-baseline": ["error", { available }],
    },
  },

  // HTML files.
  {
    files: ["**/*.html"],
    plugins: { "@html-eslint": html },
    language: "@html-eslint/html", 
    rules: {
      "@html-eslint/use-baseline": ["error", { available }],
    },
  },
];

Run all three checks:

pnpm exec eslint .

This example uses HTML ESLint's language setup. It does not need a separate @html-eslint/parser import. For TypeScript, add the parser block from Mixed JavaScript and TypeScript and pass the same available value.

Each plugin has its own data version and detection coverage. The HTML and CSS blocks check standalone files. See the HTML rule and CSS rule for their options.

The same config is available in the examples directory.

Try each languageCopy Anchor Link

Save a sample file and run ESLint. Each tab shows a reported feature alongside widely available usage.

const year = new Date().getYear(); 
const fullYear = new Date().getFullYear();

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

These reports can change when a plugin updates its feature data.

Migrating from legacy configCopy Anchor Link

Use the Flat Config examples above with ESLint 9 or 10. ESLint 9's legacy .eslintrc plugin loader does not load this package's rule exports correctly. ESLint 10 removes legacy config support.

oxlintCopy Anchor Link

See oxlint for the JavaScript plugin setup and type-information limits.