Andrey Sitnik

eslint-plugin-escompat

Report errors for code which wont work in browsers without transpiling

0
1
0
public
Forked
View on GitHub

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

Inspiration

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

v0.3.3[beta]