How to target the browsers we want to support

When developing a public facing web application we will usually want to try to be compatible with as large an audience and hence as large a selection of browsers (and their versions) as possible. Even within a private/intranet web site we’ll want to set some compatibility level to work with.

To that end, a useful addition to eslint is the eslint-plugin-compat plugin eslint-plugin-compat plugin.

yarn add eslint-plugin-compat -D

As per the documentation we should add the following to the .eslintrc.json file

{
  "extends": ["plugin:compat/recommended"],
  "env": {
    "browser": true
  },
  // ...
}

and within the package.json file we add the browserslist array, the following is an example of a possible setup

{
  "browserslist": [
    "> 0.2%", 
     "not dead",
    "not ie <= 11",
    "not op_mini all"  
  ]
}

The values within browserslist allow us to create a query that can reduce/increase the number and types or browsers supported as we wish.

For example the above suggests we want to support all browsers with more than 0.2% global usage statistics, where the data for this is taken from browserl.ist. This site also allows us to type these browserslist values into the edit box (removing quotes and new lines), i.e.

> 0.2%, last 2 versions, not dead, not op_mini all

Clicking Show Browsers will list the browsers that fall within the query range.

We can also execute the following command from our shell/terminal

npx browserslist "> 0.2%, last 2 versions, not dead, not op_mini all"

and this will also show you the browser that match that query also.