1 | eslint-plugin-compat
|
2 | =====================
|
3 | [![Build Status](https://travis-ci.org/amilajack/eslint-plugin-compat.svg?branch=master)](https://travis-ci.org/amilajack/eslint-plugin-compat)
|
4 | [![Build status](https://ci.appveyor.com/api/projects/status/at71r1stbghsgcja/branch/master?svg=true)](https://ci.appveyor.com/project/amilajack/eslint-plugin-compat/branch/master)
|
5 | [![NPM version](https://badge.fury.io/js/eslint-plugin-compat.svg)](http://badge.fury.io/js/eslint-plugin-compat)
|
6 | [![Dependency Status](https://img.shields.io/david/amilajack/eslint-plugin-compat.svg)](https://david-dm.org/amilajack/eslint-plugin-compat)
|
7 | [![npm](https://img.shields.io/npm/dm/eslint-plugin-compat.svg)](https://npm-stat.com/charts.html?package=eslint-plugin-compat)
|
8 |
|
9 | ![demo of plugin usage](https://raw.githubusercontent.com/amilajack/eslint-plugin-compat/master/img/eslint-plugin-compat-demo.gif)
|
10 |
|
11 | ## Road Map
|
12 |
|
13 | See the [Road Map](https://github.com/amilajack/eslint-plugin-compat/wiki) for the details.
|
14 |
|
15 | ## Installation
|
16 | ```bash
|
17 | npm install --save-dev eslint-plugin-compat
|
18 | ```
|
19 |
|
20 | Add `"compat"` to `.eslintrc` `"plugins"` section, add `"browser": true` to `"env"`, then configure the `"compat/compat"` rule.
|
21 |
|
22 | If you use **typescript**, see [typescript-eslint-parser](https://github.com/eslint/typescript-eslint-parser).
|
23 | ```js
|
24 | // .eslintrc
|
25 | {
|
26 | // ...
|
27 | "env": {
|
28 | "browser": true
|
29 | },
|
30 | "plugins": ["compat"],
|
31 | "rules": {
|
32 | // ...
|
33 | "compat/compat": "error"
|
34 | }
|
35 | }
|
36 | ```
|
37 |
|
38 | 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).
|
39 | ```js
|
40 | // .eslintrc
|
41 | {
|
42 | "extends": ["plugin:compat/recommended"]
|
43 | }
|
44 | ```
|
45 |
|
46 | ## Idea
|
47 |
|
48 | **Default**
|
49 | ```
|
50 | 22: navigator.serviceWorker
|
51 | ^^^^^^^^^^^^^ `ServiceWorker` is not supported in IE 11, Edge 15
|
52 | and Safari 8 😢
|
53 | ```
|
54 |
|
55 | ## Targeting Browsers
|
56 | `eslint-plugin-compat` uses the browserslist configuration in `package.json`
|
57 |
|
58 | See [ai/browserslist](https://github.com/ai/browserslist) for configuration. Here's some examples:
|
59 |
|
60 | ```js
|
61 | // Simple configuration (package.json)
|
62 | {
|
63 | // ...
|
64 | "browserslist": ["last 1 versions", "not ie <= 8"],
|
65 | }
|
66 | ```
|
67 |
|
68 | ```js
|
69 | // Use development and production configurations (package.json)
|
70 | {
|
71 | // ...
|
72 | "browserslist": {
|
73 | "development": ["last 2 versions"],
|
74 | "production": ["last 4 versions"]
|
75 | }
|
76 | }
|
77 | ```
|
78 |
|
79 | :bulb: You can also define browsers in a [separate browserslist file](https://github.com/ai/browserslist#config-file)
|
80 |
|
81 | ## Adding Polyfills
|
82 | [See wiki polyfills section](https://github.com/amilajack/eslint-plugin-compat/wiki/Adding-polyfills)
|
83 |
|
84 | ## Inspiration
|
85 | 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.
|
86 |
|
87 | 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.
|
88 |
|
89 | ## Demo
|
90 | For a minimal demo, see [amilajack/eslint-plugin-compat-demo](https://github.com/amilajack/eslint-plugin-compat-demo)
|