What is the difference between flow and eslint in react-native? Which one should I use ? Can I use both?

Question

I was asked to use static analyser in my project in react-native. As I am already using Eslint , prettier which also help to identify compile time errors and then I found flow for static analysis in react-native.

Its making me confuse as eslint does the similar work.

and I didn't find difference between flow and eslint. so my question is

1. Are eslint and flow solve the same purpose ?
2. if not then when to use eslint and when to use flow
3. Can I use flow and eslint together ?

Answer 1

1. Are eslint and flow solve the same purpose ?

Yes. I think they have same final purpose (it doesn't mean they solve same problem). Help programmers realize the bugs/risky codes that may cause bugs at the typing/coding phase by warning the ugly/wrong-syntax codes. So it will reduce runtime bugs.

2. if not then when to use eslint and when to use flow

• ESLint is a linter https://eslint.org/docs/about/

  Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

ESLint checks the rules more like convention rules.

• Flow is a static type checker https://flow.org/en/docs/getting-started/

  Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

  Flow checks your code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way.

It's a little bit same as ESLint, but focus deeply on type annotations.

• If you want to reduce typo/risky/ugly code in JS at the convention level -> ESLint is required.
• If you want to add sticky type to JS code, and other programmer won't use your code in the wrong way -> Flow

3. Can I use flow and eslint together ?

Yes. I'm using @babel/preset-flow and eslint-config-airbnb.

P/s: In my opinion, ESLint is a must have. Flow/TypeScript can be considered

Answer 2

Flow is a type checker for javascript, it ensures that you pass functions or classes the correct type of information, based on information that you provided beforehand before you even run the code.

ESLint is a linter

Lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

https://en.wikipedia.org/wiki/Lint_(software)

So ESLint has a long list of prefined rules that you can tweak to your liking that allow you to catch errors, whether it be syntax, code style or bad practices before you run it.

So to conclude each program attempts to solve two different issues, and therefore can be used independently, together, or neither of them.