$ npm install eslint-plugin-compat
Lint the browser compatibility of your code
See the Road Map for the details.
npm install --save-dev eslint-plugin-compat
Add "compat"
to .eslintrc.*
"plugins"
section, add "browser": true
to "env"
, then configure the "compat/compat"
rule:
// .eslintrc.json
{
// ...
"env": {
"browser": true
},
"plugins": ["compat"],
"rules": {
// ...
"compat/compat": "error"
}
}
Alternatively, you can use the recommended
configuration which will do this for you, with the "compat/compat"
rule reporting errors (as in the snippet above).
// .eslintrc.json
{
"extends": ["plugin:compat/recommended"]
}
eslint-plugin-compat
uses the browserslist configuration in package.json
or the rule configuration in .eslintrc.*
. If no configuration is found, browserslist defaults to > 0.5%, last 2 versions, Firefox ESR, not dead
.
See browserslist/browserslist for configuration. Here's some examples:
Simple configuration in package.json
{
// ...
"browserslist": ["last 1 versions", "not ie <= 8"],
}
Rule configuration in .eslintrc.json
{
// ...
"rules": [
"compat/compat": ["error", "defaults, not ie < 9"],
]
}
Use development and production configurations in package.json
{
// ...
"browserslist": {
"development": ["last 2 versions"],
"production": ["last 4 versions"]
}
}
:bulb: You can also define browsers in a separate browserslist file
Add polyfills to the settings section of your eslint config. Append the name of the object and the property if one exists. Here are some examples:
{
// ...
"settings": {
"polyfills": [
// Example of marking entire API and all methods and properties as polyfilled
"Promise",
// Example of marking specific method of an API as polyfilled
"WebAssembly.compile",
// Example of API with no property (i.e. a function)
"fetch",
// Example of instance method, must add `.prototype.`
"Array.prototype.push"
]
}
}
For a minimal demo, see amilajack/eslint-plugin-compat-demo
If this project is saving you (or your team) time, please consider supporting it on Patreon 👍 thank you!
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.
© 2010 - cnpmjs.org x YWFE | Home | YWFE