eslint-plugin-compat

Goals

• Allow configuration of target browser/s
• Use caniuse and @kangax's compat table for determining coverage
• Enable config using .eslintrc
• Babel integration (using babel-preset-env config)

See the Road Map for more details

Installation

npm install --save-dev eslint-plugin-compat

Add "compat" to .eslintrc "plugins" section, add "browser": true to "env"

If you use typescript, see typescript-eslint-parser.

// .eslintrc
{
  // ...
  "env": {
    "browser": true
  },
  "plugins": ["compat"],
  "rules": {
    // ...
    "compat/compat": 2
  }
}

Idea

Default

 22:  navigator.serviceWorker
                ^^^^^^^^^^^^^ `ServiceWorker` is not supported in IE 11, Edge 15
                               and Safari 8 😢

Targeting Browsers

// .eslintrc
{
  // ...
  settings: {
    targets: ['chrome >= 50', 'firefox', 'edge', 'safari >= 9'], // Determine target env's
    polyfills: ['simd', 'fetch'], // Indicate features to be ignored
    coverage: false, // Show the global coverage of the feature
    compiler: 'babel' // Warn against usage of API's unsupported by compiler
  }
}

Adding Polyfills

See wiki

Explicit Error Messages

 91:  const some = () => true
                   ^^^^^^^^^^ Arrow Functions are not supported by your babel preset
                              (using .babelrc)

Inspiration

Toolchains for native platforms, like iOS and Android, have had API linting from the start. It's about time that the web had similar tooling.

This project was inspired by a two hour conversation I had with someone on the experience of web development and if it is terrible or not. The premise they argued was that x browser doesn't support y feature while z browser does. Eventually, I agreed with him on this and checked made this plugin to save web developers from having to memorize browser compatibility of specs.