@hint/hint-typescript-config
Version:
hint that that checks if the TypeScript configuration is valid.
134 lines (100 loc) • 2.94 kB
Markdown
# 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