UNPKG

@hint/hint-typescript-config

Version:

hint that that checks if the TypeScript configuration is valid.

134 lines (100 loc) 2.94 kB
# TypeScript target (`target`) `typescript-config/target` takes into account your `webhint`'s `browserslist` configuration and warns you if your `target` (`es3`, `es2015`, etc.) is appropriate. ## Why is this important? Not having the right `ES` target can increase the size of your bundle. At the same time, having an `ES` target that not all the browsers you care support can create issues with your users. ## What does the hint check? This hint checks if the `compilerOptions` property `target` is the appropriate based on your `browserslist` configuration. The matrix is as follows: | Target | Chrome | Edge | Firefox | Internet<br>Explorer | Safari | | ------ | ------ | ---- | ------- | -- | ------ | | ES3 | ✔ | ✔ | ✔ | ✔ | ✔ | | ES5 | 5 | ✔ | 4 | 9 | 5 | | ES2015 | 49 | 13 | 37 | ❌ | 10 | | ES2016 | 57 | 14 | 52 | ❌ | 10.1 | | ES2017 | 58 | 16 | 53 | ❌ | 10.1 | | ESNext | | | | | | Browsers not in this list will be ignored if they are in your browserslist. Keep in mind that this is an approximative list. I.E.: There are still features of `ES2015` that haven't been implemented in all browsers, but the numbers above should give you good support for the most common ones. The following sites were used to create this table: <!-- markdownlint-disable MD034--> * http://kangax.github.io/compat-table/es5/ * http://kangax.github.io/compat-table/es6/ * http://kangax.github.io/compat-table/es2016plus/ * https://www.chromestatus.com/features#ES6 * http://2ality.com/2011/02/es5-shim-use-ecmascript-5-in-older.html * https://www.chromestatus.com/features#ES6https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla <!-- markdownlint-enable MD034--> ### Examples that **trigger** the hint Having a `target` not supported by all your targeted browsers: `tsconfig.json`: ```json { ... "compilerOptions": { "target": "es5", ... }, ... } ``` `.hintrc`: ```json { ... "browserslist": ["IE 8"] ... } ``` Having a `target` that is lower than what all your browsers support: `tsconfig.json`: ```json { ... "compilerOptions": { "target": "es3", ... }, ... } ``` `.hintrc`: ```json { ... "browserslist": ["Chrome 64", "Edge 16", "Firefox 60"] ... } ``` ### Examples that **pass** the hint The right `target` for the right browsers: `tsconfig.json`: ```json { ... "compilerOptions": { "target": "es3", ... }, ... } ``` `.hintrc`: ```json { ... "browserslist": ["IE 8"] ... } ``` ## Further Reading * [TypeScript Documentation][typescript docs] * [Browserslist][browserslist] [typescript docs]: https://www.typescriptlang.org/docs/home.html [browserslist]: https://github.com/ai/browserslist