Add eslint with react-hooks plugin

[steida]

react-hooks plugin with the exhaustive check is the must.

Just check how many weird things and errors the code base contains: #370

Try VSCode cmd . to show available fixes. There are some cases where the rule must be ignored, for passed deps for example.

[wardoost]

Great 👏 We should probably remove tslint at the same time?

[steida]

@wardoost Yes, it should be removed. The teams behind tslint and eslint for TypeScript are collaborating.

[streamich]

Some thoughts on linter situation (in general, not related to this PR):

• Remove TSLint.
• Enable ESLint with similar rules to TSLint, but more relaxed (as current TSLint rules seem too strict).
• Enable React hook rules in ESLint.
• Remove Prettier rules from TSLint/ESLint.
• Run Prettier separately prettier ... on pre-commit hook. (Or probably run pretty-quick instead.)

[steida]

Check https://github.com/este/este/blob/master/.eslintrc.js for inspiration.

[wardoost]

@streamich Wouldn't it be better to integrate Prettier in ESLint to avoid conflicting rules/autofixes? Are there any specific TSLint rules that you think of now that are too strict?

[streamich]

@wardoost

... any specific TSLint rules that you think of now that are too strict?

There is one or more rules that require you to sort stuff in alphabetical order, don't remember if it was object keys or imports. Also, there was something else [don't remember now] ...

Why I would like to see Prettier outside of ESLint is so that commit or push never fails because of some code style problem. Prettier can be run any time on the whole project to fix all style "errors", I don't see necessity to fail a commit because of it, or for syntax highlighter to highlight all Prettier things as "errors".

Wouldn't it be better to integrate Prettier in ESLint to avoid conflicting rules/autofixes?

• Prettier can be run any time, to re-format the whole project.
• Also it can be run automatically run on every commit, so you don't need to ever reformat the whole project.
• For TSLint there is tslint-config-prettier plugin that disables all stylistic rules so that TSLint does not conflict with Prettier, ESLint should have something similar.

[wardoost]

Sounds perf 👌I also like the suggested config from @steida as a starting point, minus prettier and relay plugins

[ayush987goyal]

Hi @streamich ,

I have done some local eslint configuration with the default eslint-config-react-app plugin and I am seeing these many errors/warnings:

✖ 96 problems (18 errors, 78 warnings)
  0 errors and 52 warnings potentially fixable with the `--fix` option.

I was thinking of adding eslint-disable to all the affected file and merging that change. Then we have to fix the files one by one and create respective CRs.
I am down to do that but would require contributions along the way.
This would be a major version change since this might potentially break existing functionalities.
So, how should we go about this change?

[streamich]

@ayush987goyal I think eslint-config-react-app is a good option, unless there are other propositions.

I was thinking of adding eslint-disable to all the affected file and merging that change. Then we have to fix the files one by one and create respective CRs.

Sounds good to me.

[ayush987goyal]

@streamich Here is #948 to start this.