eslint-plugin-escompat

eslint-plugin-escompat

This plugin will report eslint errors for code which - if left untranspiled - will not work in some browsers.

This is useful if you intend to ship code without first using a transpiler, such as Babel.

This won't lint for features that can be polyfilled. For that you can use eslint-plugin-compat.

Installation

npm install --save-dev eslint-plugin-escompat

Usage for Flat Configs (eslint.config.js) - ESLint >= 8

// eslint.config.js

import globals from 'globals';
import escompat from 'eslint-plugin-escompat';

export default [
    {
        plugins: {
            escompat
        },
        languageOptions: {
            globals: globals.browser
        },
        rules: {
            // Configure the individual `"escompat/*"` rules, e.g.:
            'escompat/no-async-generator': ['error'],
            'escompat/no-numeric-separators': ['error']
        }
    }
];

Alternatively, you can use the recommended configuration which will do the plugins for you, with all recommended "escompat/*" rules reporting errors.

import globals from 'globals';
import escompat from 'eslint-plugin-escompat';

export default [
    {
        languageOptions: {
            globals: globals.browser
        }
    },
    escompat.configs['flat/recommended']
];

Usage for .eslintrc configs - ESLint < 9

Add "escompat" to .eslintrc "plugins" section, add "browser": true to "env", then configure the individual "escompat/*" rules.

Alternatively, you can use the recommended configuration which will do this for you, with the "escompat/*" rules reporting errors (as in the snippet above).

// .eslintrc
{
  "extends": ["plugin:escompat/recommended"]
}

TypeScript Users

Aside from the recommended config, there are also multiple typescript configs which can be used if you're using TypeScript. The TypeScript configs only enable some of the rules, avoiding enabling rules for which typescript safely transpiles down to a more compatible syntax. Extend the typescript config that matches your tsconfig.json target value.

For flat configs:

import globals from 'globals';
import escompat from 'eslint-plugin-escompat';

export default [
    {
        languageOptions: {
            globals: globals.browser
        }
    },

    // The TypeScript configs are in array form, so we need to
    //   spread them out here
    ...escompat.configs['flat/typescript-2016']
];

or for .eslintrc:

{
  "extends": ["plugin:escompat/typescript-2016"]
}

Targeting Browsers

eslint-plugin-escompat uses the browserslist configuration in package.json

If you have a browserslist, it is safe to enable all of these rules - as any that do not coincide with your chosen browsers will be turned off automatically.

See browserslist/browserslist for configuration. Here's some examples:

// Simple configuration (package.json)
{
  // ...
  "browserslist": ["last 1 versions", "not ie <= 8"],
}

// Use development and production configurations (package.json)
{
  // ...
  "browserslist": {
    "development": ["last 2 versions"],
    "production": ["last 4 versions"]
  }
}

:bulb: You can also define browsers in a separate browserslist file

Rules

• no-async-generator
• no-async-iteration
• no-bigint
• no-bind-operator
• no-class-static-blocks
• no-computed-public-class-fields
• no-do-expression
• no-dynamic-imports
• no-edge-destructure-bug
• no-exponentiation-operator
• no-hashbang-comment
• no-logical-assignment-operator
• no-nullish-coalescing
• no-numeric-separators
• no-object-rest-spread
• no-optional-catch
• no-optional-chaining
• no-pipeline-operator
• no-private-class-fields
• no-public-instance-class-fields
• no-public-static-class-fields
• no-regexp-duplicate-named-groups
• no-regexp-lookbehind
• no-regexp-named-group
• no-regexp-s-flag
• no-regexp-v-flag
• no-top-level-await

Inspiration

This project was largely inspired by the great eslint-plugin-compat library.