Skip to content

Commit 2093a4b

Browse files
author
Anton Zdanov
authored
Add ESLint + TSLint section
1 parent 9046b48 commit 2093a4b

File tree

1 file changed

+74
-3
lines changed

1 file changed

+74
-3
lines changed

Diff for: README.md

+74-3
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
* [Component/Design System Development](#component-design-system-development)
2929
* [Building](#building)
3030
* [Prettier + TSLint](#prettier--tslint)
31+
* [ESLint + TSLint](#eslint--tslint)
3132
* [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
3233
- [Troubleshooting Handbook: Types](#troubleshooting-handbook--types)
3334
* [Union types](#union-types)
@@ -437,9 +438,7 @@ For developing with Storybook, read the docs I maintain over here: <https://stor
437438

438439
## Prettier + TSLint
439440

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.
443442

444443
Example configuration:
445444

@@ -487,6 +486,78 @@ Example configuration:
487486
</tr>
488487
</table>
489488

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+
490561
## Working with Non-Typescript Libraries (writing your own index.d.ts)
491562

492563
*Not written yet.*

0 commit comments

Comments
 (0)