|
28 | 28 | * [Component/Design System Development](#component-design-system-development)
|
29 | 29 | * [Building](#building)
|
30 | 30 | * [Prettier + TSLint](#prettier--tslint)
|
| 31 | + * [ESLint + TSLint](#eslint--tslint) |
31 | 32 | * [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
|
32 | 33 | - [Troubleshooting Handbook: Types](#troubleshooting-handbook--types)
|
33 | 34 | * [Union types](#union-types)
|
@@ -437,9 +438,7 @@ For developing with Storybook, read the docs I maintain over here: <https://stor
|
437 | 438 |
|
438 | 439 | ## Prettier + TSLint
|
439 | 440 |
|
440 |
| -We have an active discussion on Linting [here](https://github.com/sw-yx/react-typescript-cheatsheet/issues/7). |
441 |
| - |
442 |
| -To user prettier with TSLint you will need [`tslint-config-prettier`](https://github.com/alexjoverm/tslint-config-prettier) which disables all conflicting rules and optionally [`tslint-plugin-prettier`](https://github.com/ikatyang/tslint-plugin-prettier) which will highlight differences as TSLint issues. |
| 441 | +To use prettier with TSLint you will need [`tslint-config-prettier`](https://github.com/alexjoverm/tslint-config-prettier) which disables all the conflicting rules and optionally [`tslint-plugin-prettier`](https://github.com/ikatyang/tslint-plugin-prettier) which will highlight differences as TSLint issues. |
443 | 442 |
|
444 | 443 | Example configuration:
|
445 | 444 |
|
@@ -487,6 +486,78 @@ Example configuration:
|
487 | 486 | </tr>
|
488 | 487 | </table>
|
489 | 488 |
|
| 489 | +## ESLint + TSLint |
| 490 | + |
| 491 | +Why? ESLint ecosystem is rich, with lots of different plugins and config files, whereas TSLint tend to lag behind in some areas. |
| 492 | + |
| 493 | +To remedy this nuisance there is an [eslint-typescript-parser](https://github.com/eslint/typescript-eslint-parser) which tries to bridge the differences between javascript and typescript. It still has some rough corners, but can provide consistent assistance with certain plugins. |
| 494 | + |
| 495 | +<table> |
| 496 | + <tr> |
| 497 | + <td> |
| 498 | + Usage |
| 499 | + </td> |
| 500 | + <td> |
| 501 | + .eslintrc |
| 502 | + </td> |
| 503 | + </tr> |
| 504 | + <tr> |
| 505 | + <td> |
| 506 | + <pre> |
| 507 | +// Install: |
| 508 | + |
| 509 | +npm i -D typescript-eslint-parser |
| 510 | + |
| 511 | +// And in your ESLint configuration file: |
| 512 | + |
| 513 | +"parser": "typescript-eslint-parser" |
| 514 | + </pre> |
| 515 | + </td> |
| 516 | + <td> |
| 517 | + <pre> |
| 518 | +{ |
| 519 | + "extends": [ |
| 520 | + "airbnb", |
| 521 | + "prettier", |
| 522 | + "prettier/react", |
| 523 | + "plugin:prettier/recommended", |
| 524 | + "plugin:jest/recommended", |
| 525 | + "plugin:unicorn/recommended" |
| 526 | + ], |
| 527 | + "plugins": ["prettier", "jest", "unicorn"], |
| 528 | + "parserOptions": { |
| 529 | + "sourceType": "module", |
| 530 | + "ecmaFeatures": { |
| 531 | + "jsx": true |
| 532 | + } |
| 533 | + }, |
| 534 | + "env": { |
| 535 | + "es6": true, |
| 536 | + "browser": true, |
| 537 | + "jest": true |
| 538 | + }, |
| 539 | + "settings": { |
| 540 | + "import/resolver": { |
| 541 | + "node": { |
| 542 | + "extensions": [".js", ".jsx", ".ts", ".tsx"] |
| 543 | + } |
| 544 | + } |
| 545 | + }, |
| 546 | + "overrides": [ |
| 547 | + { |
| 548 | + "files": ["**/*.ts", "**/*.tsx"], |
| 549 | + "parser": "typescript-eslint-parser", |
| 550 | + "rules": { |
| 551 | + "no-undef": "off" |
| 552 | + } |
| 553 | + } |
| 554 | + ] |
| 555 | +} |
| 556 | + </pre> |
| 557 | + </td> |
| 558 | + </tr> |
| 559 | +</table> |
| 560 | + |
490 | 561 | ## Working with Non-Typescript Libraries (writing your own index.d.ts)
|
491 | 562 |
|
492 | 563 | *Not written yet.*
|
|
0 commit comments