Installation

Original guide, that is unfortunately outdated: https://medium.com/@sgroff04/configure-eslint-prettier-and-flow-in-vs-code-for-react-development-c9d95db07213

Step 1: Install the extensions

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode
• https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

Step 2: ESLint

npm install babel-eslint --save-dev

.eslintrc should be with the following settings:

{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "plugins":[
        "react",
        "jsx-a11y",
        "import"
    ]
}

Step 3: Prettier

npm install prettier-eslint --save-dev

Step 4: Flow

Following this article it looks like all we need to do is install the right version.

React Native makes a file .flowconfig. Open it - you should see the version of Flow on the bottom. Use that version to install Flow:

npm i -D [email protected] (and replace 0.122.0 with your version)

Old instructions

npm install [email protected] @babel/preset-flow --save-dev

open the file .babel.config.js add @babel/preset-flow and below presets add retainLines: true, like that:

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-flow'],
  retainLines: true,
};

Note: module:metro-react-native-babel-preset is for react native

Step 5: VSCode Settings

CMD+, then Workspace Settings then {} sign to open the json and paste:

{
    // Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
    "editor.formatOnSave": true,
    // Support using flow through your node_modules folder, WARNING: Checking this box is a security risk. When you open a project we will immediately run code contained within it.
    "flow.useNPMPackagedFlow": true,
    // Enable/disable JavaScript validation. (For Flow)
    "javascript.validate.enable": false,
    // Enable/disable default JavaScript formatter (For Prettier)
    "javascript.format.enable": false,
    // Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
    "prettier.eslintIntegration": true,
    "eslint.autoFixOnSave": true
}