Automate browser compatibility checks with TSLint

Linting on browser compatibility

• Do you have a large team working on front-end frameworks like Angular?
• Does your company have a norm to support specific browsers?
• Have you ever received a “Hotfix” due to function implementation that is not supported on browsers like IE11?

If your answer is “Yes”, then this article is for you.

Introducing “browsercompat” TSLint plugin

Yes! you hear it right. A magical rule that scans your code against a list of browsers and probably saves a future “Hotfix”.

This rule leverages the popular MDN library for checking the JS function against a list of supported browsers.

Installation

• Install the plugin with the following command: npm i browsercompat --save-dev
• Open tslint.json and add code inside rulesDirectory option, "node_modules/browsercompat/dist" For the Angular project, it should look like this: "rulesDirectory": ["codelyzer", "browsercompat/dist"]

Usage

Following is the schema needed to add inside tslint.json:

"rules": {
    "supported-browsers": {
        "options": {
            "targets": {
                "ie": 11,
                "chrome": 60,
                "safari": 10,
                "firefox": 60
            },
            "whitelist": [
                "Promise",
                "Promise.*",
                "Object.assign",
                "Array.from",
                "Array.find",
                "Set.add",
                "Set",
                "String.startsWith",
                "String.endsWith",
                "Array.fill",
                "String.repeat",
                "HTMLElement.style"
            ]
        }
    }
}

Options

• targets — It contains the minimum browser name and supported version.
• whitelist — If you’ve added polyfills for some unsupported function and you want to exclude them from the checks, you can add it inside the whitelist section.

In actions on VSCode

This is fully integrated into VSCode and shows you the error while you’re coding. Below is the screengrab of the error shown in IDE for function Object.value as it is not supported on IE11.

Screengrab of error shown in VScode for unsupported function