Search code examples
javascriptecmascript-5

Scan Javascript for browser compatibility

Is there a tool out there to scan my Javascript code for functions that may not be present in all browsers?

My library is completely non-UI, so I don't care about how something is "displayed". What I'm looking for is something like in the Javascript MDN from Mozilla. For example, for Array.prototype.indexOf, they warn that it's a recent ECMAScript addition that is not present in all browsers (and typically provide a stub). What I'm looking for is a tool that'd list the functions in my code that would fall into this category.

Solution

  • You can use eslint-plugin-compat, a plugin for the ESlint linting utility. You can even use Browserlist to configure the browsers you want to support.

    Nice animation about eslint-plugin-compat

    Installation is very easy. You'll have to install eslint and this plugin:

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

    or 

    yarn add --dev eslint eslint-plugin-compat

    And add a ESlint configuration file: 

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

    Add the supported browsers to your package.json file:

    // sample configuration (package.json)
{
  // ...
  "browserslist": ["last 2 Chrome versions", "IE 11"],
}

    And then run the linter:

    eslint yourfile.js

    In my case this was the output:

    92:9   error  Promise.all() is not supported in IE 11  compat/compat
94:9   error  Promise.all() is not supported in IE 11  compat/compat