How to enable flow checking on vscode for react-native?

Question

Goal

Be able to create a new project for react-native (using react-native init), and enabling flow checks on Visual Studio Code.

What I Did

I just created a new react-native project

react-native init iaptris

then opened Visual Studio code

cd iaptris
code .

I saw this errors

Whis these error descriptions (in italian, sorry)

Googling I concluded I must install Flow Extension for VsCode and I did.

I then disabled native checking for current workspace, setup file association and path to flow command

{
  "javascript.validate.enable": false,
  "files.associations": {
    "*.json": "json",
    "*.js": "javascriptreact"
  },
  "flow.pathToFlow": "C:\\Users\\mirko\\.vscode\\extensions\\flowtype.flow-for-vscode-1.0.1\\node_modules\\.bin\\flow.cmd"
}

Closed and restarted vscode on same workspace

The problem

At this point, errors disappeared, but also, removing a curly brace to throw a new syntax error, I do not see any errors. No errors.

Question

What else must I do now?

Answer 1

Actual solution, please post your answer if this is not the better method. And I think it's not the better method.

1. react-native init <project name>

2. open VsCode

3. disable Javascript -> Validate for the current workspace only (sorry if next image is in italian, but it's enough as reference)

4. install a plugin

   yarn add eslint babel-eslint eslint-plugin-flowtype --dev
   
   or
   
   npm install eslint babel-eslint eslint-plugin-flowtype --save-dev
   

5. create a .eslintrc with following content

   {
     "parser": "babel-eslint",
     "plugins": [
       "flowtype"
     ],
     "extends": [
       "plugin:flowtype/recommended"
     ]
   }
   

6. close and reopen vscode and the workspace