Create React App - flow / eslint / prettier / babel

.babelrc

{
    "presets": [
        "react",
        "flow"
    ],
    "retainLines": true
}

.eslintrc

{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "plugins": ["react", "jsx-a11y",
        "import"
    ],
    "env": {
        "browser": true,
        "jest": true
    },
    "rules": {
        "react/jsx-filename-extension": "off"
    }
}

.gitignore

# See https://help.github.com/ignore-files/ for more about ignoring files.

# development
src/**/*.css

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

.prettierrc

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false
}

README.md

Setup

VS Code

Workspace settings

// 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

Plugins

• ESLint
• Prettier JavaScript Formatter
• Flow Language Support
• Babel ES6/ES7

Flow

Start:

npx flow start

Stop:

npx flow stop

Guide

https://medium.com/@sgroff04/configure-eslint-prettier-and-flow-in-vs-code-for-react-development-c9d95db07213

Create React App

This project was bootstrapped with Create React App.

Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide here.

package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "flow-bin": "^0.75.0",
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "flow": "flow",
    "start": "npm-run-all -p watch-css start-js",
    "start-js": "react-scripts start",
    "build-js": "react-scripts build",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.5",
    "babel-preset-flow": "^6.23.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.1",
    "prettier-eslint": "^8.8.2"
  }
}