flowtype入門1

React + Redux + es2015 + Flow + eslint

主に使うコマンドは以下

$ npm run build
$ npm run start 
$ npm lint               # flowの結果も含むのでflowコマンドは別に知らなくてもいいかも
$ flow

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "browserify -o bundle.js -t babelify ./scripts/index.js",
    "start": "watchify -o bundle.js -t babelify ./scripts/index.js",
    "lint": "eslint scripts"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "engines": {
     "node": ">=6.x",
     "npm": ">=3.x"
  },
  "devDependencies": {
    "flow-bin": "^0.38.0",
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-flow-strip-types": "^6.21.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "watchify": "^3.8.0",
    "eslint": "^3.13.1",
    "babel-eslint": "^7.1.1",
    "eslint-plugin-react": "^6.9.0",
    "eslint-plugin-flowtype": "^2.30.0",
    "eslint-plugin-flowtype-errors": "^2.0.3"
  },
  "dependencies": {
    "flux": "^3.1.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

.flowconfig

[ignore]
.*/node_modules/flux/lib/*
.*/node_modules/fbjs/lib/*

[include]

[libs]
decls


[options]

decls/lib.js.flow

declare module 'flux/utils' {
  declare class ReduceStore<T> {
    getState(): T;
    getDispatchToken(): string;
  }
  declare class Container {
    static create(): any;
  }
}

.eslintrc.json

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "flowtype",
        "flowtype-errors"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "flowtype/define-flow-type": 1,
        "flowtype/use-flow-type": 1,
        "flowtype-errors/show-errors": 1,
        "flowtype/require-valid-file-annotation": [
          1,
          "always"
        ]
    }
}
  • flowtype/require-valid-file-annotation: jsファイル先頭に@flowアノテーションのコメントが存在しない場合に警告
  • react/jsx-uses-react: Reactをimportした際にno useと言われなくなる（これが無いと警告をくらう)

.babelrc

{
  presets: ['es2015', 'react'],
  plugins: ["transform-flow-strip-types"]
}