{"id":10834,"library":"eslint-plugin-typescript-compat","title":"ESLint Plugin for TypeScript Browser Compatibility","description":"`eslint-plugin-typescript-compat` is an ESLint plugin designed to ensure browser compatibility for TypeScript code by identifying the usage of ECMAScript APIs that are not supported by your configured target browsers. Currently at version 1.0.2, the plugin integrates with `mdn-browser-compat-data`, the TypeScript Compiler API, and `browserslist` to perform static analysis. Unlike `eslint-plugin-compat`, which focuses on JavaScript, this plugin specifically leverages TypeScript's type information to provide more accurate linting for TypeScript projects. It differentiates itself from `eslint-plugin-es` and `eslint-plugin-es-x` by supporting the detection of prototype and static methods (e.g., `Array.prototype.find`, `Array.from`), not just language syntax features. The plugin primarily supports JavaScript Built-in Objects and their methods, with future plans to expand to DOM API compatibility. Its release cadence appears to be driven by feature additions and bug fixes, with a focus on stability for its current scope. Users must configure `parserOptions.project` and `tsconfig.json` `lib` settings for proper functionality.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","eslint","eslintplugin","eslint-plugin","typescript"],"install":[{"cmd":"npm install eslint-plugin-typescript-compat","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-typescript-compat","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-typescript-compat","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for TypeScript parsing and type information, which the plugin leverages.","package":"typescript","optional":false},{"reason":"ESLint parser for TypeScript that provides the necessary type information for the plugin's analysis.","package":"@typescript-eslint/parser","optional":false}],"imports":[{"note":"This is the primary method to enable the plugin's core rules and recommended settings within your `.eslintrc.json` file.","wrong":"import 'eslint-plugin-typescript-compat';","symbol":"plugin:typescript-compat/recommended","correct":"{ \"extends\": [\"plugin:typescript-compat/recommended\"] }"},{"note":"For fine-grained control or overriding specific rule settings, prefix the rule name with `typescript-compat/` in your `rules` configuration.","wrong":"{ \"rules\": { \"no-unsupported-features\": \"error\" } }","symbol":"typescript-compat/rule-name","correct":"{ \"rules\": { \"typescript-compat/no-unsupported-features\": \"error\" } }"},{"note":"To inform the plugin about features that are polyfilled in your project, preventing false positives, define them in the `settings.polyfills` array in your `.eslintrc.json`.","wrong":"{ \"rules\": { \"typescript-compat/no-unsupported-features\": [\"error\", { \"polyfills\": [...] }] } }","symbol":"settings.polyfills","correct":"{ \"settings\": { \"polyfills\": [\"Array.prototype.find\", \"Promise\"] } }"}],"quickstart":{"code":"/*\n1. Install dependencies:\n   npm install eslint-plugin-typescript-compat typescript @typescript-eslint/parser --save-dev\n\n2. Configure your .eslintrc.json:\n*/\n// .eslintrc.json\n/*\n{\n  \"extends\": [\"plugin:typescript-compat/recommended\"],\n  \"env\": {\n    \"browser\": true\n  },\n  \"parserOptions\": {\n    \"project\": \"./tsconfig.json\"\n  }\n}\n*/\n\n/*\n3. Configure your tsconfig.json to include a suitable 'lib' array:\n*/\n// tsconfig.json\n/*\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\", // Or your desired target\n    \"lib\": [\"ESNext\", \"DOM\"], // Must include ESNext to recognize modern features for linting\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src/**/*.ts\"]\n}\n*/\n\n/*\n4. Configure your target browsers using browserslist in package.json:\n*/\n// package.json\n/*\n{\n  \"name\": \"my-project\",\n  \"version\": \"1.0.0\",\n  \"browserslist\": [\n    \"ie 11\",\n    \"last 2 versions\",\n    \"> 0.2%\"\n  ]\n}\n*/\n\n/*\n5. Create an example TypeScript file (e.g., src/index.ts):\n   Running ESLint on this file with the above config will flag features unsupported in IE 11.\n*/\n\nconst items: number[] = [1, 2, 3];\n\n// Array.prototype.includes is not supported in IE 11. Will trigger a warning.\nitems.includes(2);\n\n// Array.prototype.find is also not supported in IE 11. Will trigger a warning.\nconst found = items.find((item) => item === 2);\n\n// Math.sign is not supported in IE 11. Will trigger a warning.\nconst s = Math.sign(-5);\n\nconsole.log(items, found, s);\n","lang":"typescript","description":"Demonstrates the installation and configuration of `eslint-plugin-typescript-compat` across `package.json`, `.eslintrc.json`, and `tsconfig.json`, then provides TypeScript code that will trigger browser compatibility warnings for features unsupported in Internet Explorer 11, based on the `browserslist` configuration."},"warnings":[{"fix":"Ensure your `.eslintrc.json` includes `\"parserOptions\": { \"project\": \"./tsconfig.json\" }` pointing to your project's `tsconfig.json`.","message":"The plugin requires `parserOptions.project` to be configured in your ESLint setup. Without it, the plugin cannot access TypeScript's type information, leading to errors or incomplete analysis.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update your `tsconfig.json` to include `\"lib\": [\"ESNext\", \"DOM\"]` (or similar for your target environment) to ensure TypeScript recognizes the APIs you intend to use.","message":"To correctly detect modern ECMAScript features (e.g., ES2016+), your `tsconfig.json`'s `compilerOptions.lib` array must include `ESNext` or specific ES versions that define these features. The default `lib` settings for `target: ES5` or `ES6` will not recognize newer APIs.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a `browserslist` entry to your `package.json` (e.g., `\"browserslist\": [\"ie 11\", \"last 2 versions\"]`) or provide configuration via a dedicated `.browserslistrc` file.","message":"Browser targets must be configured using `browserslist` (e.g., in `package.json`). If `browserslist` is missing or misconfigured, the plugin cannot determine which APIs are incompatible with your target environments, potentially leading to no warnings.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware that DOM API usage (e.g., `fetch`, `localStorage`) will not be linted for browser compatibility by this plugin at this time. Consider other tools for DOM API checks if needed.","message":"Currently, `eslint-plugin-typescript-compat` focuses solely on JavaScript Built-in Objects and their methods. It does not yet support checking for DOM API compatibility.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a `\"settings\": { \"polyfills\": [\"Array.prototype.find\", \"Promise\"] }` block to your `.eslintrc.json` to list all polyfilled APIs.","message":"If your project uses polyfills for certain ECMAScript features, you must declare them in the `settings.polyfills` array in your ESLint configuration. Otherwise, the plugin will incorrectly flag these polyfilled features as incompatible.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `\"parserOptions\": { \"project\": \"./tsconfig.json\" }` (or the correct path to your `tsconfig.json`) to your ESLint configuration.","cause":"The `parserOptions.project` setting is missing or incorrectly configured in your `.eslintrc.json`, preventing the `@typescript-eslint/parser` from providing type information.","error":"You have used a rule which requires parserServices to be generated. You must therefore provide a value for the \"parserOptions.project\" property for @typescript-eslint/parser."},{"fix":"Update your `tsconfig.json` `compilerOptions.lib` to include `ESNext` or the specific ES version that defines the feature, e.g., `\"lib\": [\"ESNext\", \"DOM\"]`.","cause":"This is a TypeScript compiler error, often seen when using modern ECMAScript features (like `Array.prototype.includes`) while your `tsconfig.json`'s `lib` option doesn't include the necessary ES version (e.g., `ES2016` or `ESNext`).","error":"Property 'includes' does not exist on type 'number[]'."},{"fix":"Ensure you have a valid `browserslist` configuration in your `package.json` (e.g., `\"browserslist\": [\"ie 11\"]`) or an `.browserslistrc` file at your project root.","cause":"The `browserslist` configuration is either missing from `package.json` or a dedicated file, or it's incorrectly configured, leading the plugin to not know which browsers to target for compatibility checks.","error":"ESLint does not report compatibility issues despite using modern features (e.g., `Array.prototype.find`) with a target browser (e.g., `ie 11`) that doesn't support them."}],"ecosystem":"npm"}