guanyu react 的 练习

<a name="eslint-plugin-flowtype"></a> # eslint-plugin-flowtype [](https://www.npmjs.org/package/eslint-plugin-flowtype) [](https://travis-ci.com/github/gajus/eslint-plugin-flowtype) [](https://github.com/gajus/canonical) [Flow type](http://flowtype.org/) linting rules for ESLint. * [eslint-plugin-flowtype](#eslint-plugin-flowtype) * [Installation](#eslint-plugin-flowtype-installation) * [Configuration](#eslint-plugin-flowtype-configuration) * [Shareable configurations](#eslint-plugin-flowtype-configuration-shareable-configurations) * [Community maintained configurations](#eslint-plugin-flowtype-configuration-community-maintained-configurations) * [Settings](#eslint-plugin-flowtype-settings) * [`onlyFilesWithFlowAnnotation`](#eslint-plugin-flowtype-settings-onlyfileswithflowannotation) * [Rules](#eslint-plugin-flowtype-rules) * [`array-style-complex-type`](#eslint-plugin-flowtype-rules-array-style-complex-type) * [`array-style-simple-type`](#eslint-plugin-flowtype-rules-array-style-simple-type) * [`arrow-parens`](#eslint-plugin-flowtype-rules-arrow-parens) * [`boolean-style`](#eslint-plugin-flowtype-rules-boolean-style) * [`define-flow-type`](#eslint-plugin-flowtype-rules-define-flow-type) * [`delimiter-dangle`](#eslint-plugin-flowtype-rules-delimiter-dangle) * [`enforce-line-break`](#eslint-plugin-flowtype-rules-enforce-line-break) * [`generic-spacing`](#eslint-plugin-flowtype-rules-generic-spacing) * [`interface-id-match`](#eslint-plugin-flowtype-rules-interface-id-match) * [`newline-after-flow-annotation`](#eslint-plugin-flowtype-rules-newline-after-flow-annotation) * [`no-dupe-keys`](#eslint-plugin-flowtype-rules-no-dupe-keys) * [`no-duplicate-type-union-intersection-members`](#eslint-plugin-flowtype-rules-no-duplicate-type-union-intersection-members) * [`no-existential-type`](#eslint-plugin-flowtype-rules-no-existential-type) * [`no-flow-fix-me-comments`](#eslint-plugin-flowtype-rules-no-flow-fix-me-comments) * [`no-internal-flow-type`](#eslint-plugin-flowtype-rules-no-internal-flow-type) * [`no-mixed`](#eslint-plugin-flowtype-rules-no-mixed) * [`no-mutable-array`](#eslint-plugin-flowtype-rules-no-mutable-array) * [`no-primitive-constructor-types`](#eslint-plugin-flowtype-rules-no-primitive-constructor-types) * [`no-types-missing-file-annotation`](#eslint-plugin-flowtype-rules-no-types-missing-file-annotation) * [`no-unused-expressions`](#eslint-plugin-flowtype-rules-no-unused-expressions) * [`no-weak-types`](#eslint-plugin-flowtype-rules-no-weak-types) * [`object-type-curly-spacing`](#eslint-plugin-flowtype-rules-object-type-curly-spacing) * [`object-type-delimiter`](#eslint-plugin-flowtype-rules-object-type-delimiter) * [`quotes`](#eslint-plugin-flowtype-rules-quotes) * [`require-compound-type-alias`](#eslint-plugin-flowtype-rules-require-compound-type-alias) * [`require-exact-type`](#eslint-plugin-flowtype-rules-require-exact-type) * [`require-indexer-name`](#eslint-plugin-flowtype-rules-require-indexer-name) * [`require-inexact-type`](#eslint-plugin-flowtype-rules-require-inexact-type) * [`require-parameter-type`](#eslint-plugin-flowtype-rules-require-parameter-type) * [`require-readonly-react-props`](#eslint-plugin-flowtype-rules-require-readonly-react-props) * [`require-return-type`](#eslint-plugin-flowtype-rules-require-return-type) * [`require-types-at-top`](#eslint-plugin-flowtype-rules-require-types-at-top) * [`require-valid-file-annotation`](#eslint-plugin-flowtype-rules-require-valid-file-annotation) * [`require-variable-type`](#eslint-plugin-flowtype-rules-require-variable-type) * [`semi`](#eslint-plugin-flowtype-rules-semi) * [`sort-keys`](#eslint-plugin-flowtype-rules-sort-keys) * [`sort-type-union-intersection-members`](#eslint-plugin-flowtype-rules-sort-type-union-intersection-members) * [`space-after-type-colon`](#eslint-plugin-flowtype-rules-space-after-type-colon) * [`space-before-generic-bracket`](#eslint-plugin-flowtype-rules-space-before-generic-bracket) * [`space-before-type-colon`](#eslint-plugin-flowtype-rules-space-before-type-colon) * [`spread-exact-type`](#eslint-plugin-flowtype-rules-spread-exact-type) * [`type-id-match`](#eslint-plugin-flowtype-rules-type-id-match) * [`type-import-style`](#eslint-plugin-flowtype-rules-type-import-style) * [`union-intersection-spacing`](#eslint-plugin-flowtype-rules-union-intersection-spacing) * [`use-flow-type`](#eslint-plugin-flowtype-rules-use-flow-type) * [`use-read-only-spread`](#eslint-plugin-flowtype-rules-use-read-only-spread) * [`valid-syntax`](#eslint-plugin-flowtype-rules-valid-syntax) <a name="eslint-plugin-flowtype-installation"></a> ## Installation ```bash npm install eslint --save-dev npm install @babel/eslint-parser --save-dev npm install eslint-plugin-flowtype --save-dev ``` <a name="eslint-plugin-flowtype-configuration"></a> ## Configuration 1. Set `parser` property to `@babel/eslint-parser`. 1. Add `plugins` section and specify `eslint-plugin-flowtype` as a plugin. 1. Enable rules. <!-- --> ```json { "parser": "@babel/eslint-parser", "plugins": [ "flowtype" ], "rules": { "flowtype/boolean-style": [ 2, "boolean" ], "flowtype/define-flow-type": 1, "flowtype/delimiter-dangle": [ 2, "never" ], "flowtype/generic-spacing": [ 2, "never" ], "flowtype/interface-id-match": [ 2, "^([A-Z][a-z0-9]+)+Type$" ], "flowtype/no-mixed": 2, "flowtype/no-primitive-constructor-types": 2, "flowtype/no-types-missing-file-annotation": 2, "flowtype/no-weak-types": 2, "flowtype/object-type-delimiter": [ 2, "comma" ], "flowtype/require-parameter-type": 2, "flowtype/require-readonly-react-props": 0, "flowtype/require-return-type": [ 2, "always", { "annotateUndefined": "never" } ], "flowtype/require-valid-file-annotation": 2, "flowtype/semi": [ 2, "always" ], "flowtype/space-after-type-colon": [ 2, "always" ], "flowtype/space-before-generic-bracket": [ 2, "never" ], "flowtype/space-before-type-colon": [ 2, "never" ], "flowtype/type-id-match": [ 2, "^([A-Z][a-z0-9]+)+Type$" ], "flowtype/union-intersection-spacing": [ 2, "always" ], "flowtype/use-flow-type": 1, "flowtype/valid-syntax": 1 }, "settings": { "flowtype": { "onlyFilesWithFlowAnnotation": false } } } ``` <a name="eslint-plugin-flowtype-configuration-shareable-configurations"></a> ### Shareable configurations <a name="eslint-plugin-flowtype-configuration-shareable-configurations-recommended"></a> #### Recommended This plugin exports a [recommended configuration](./src/configs/recommended.json) that enforces Flow type good practices. To enable this configuration use the extends property in your `.eslintrc` config file: ```json { "extends": [ "plugin:flowtype/recommended" ], "plugins": [ "flowtype" ] } ``` See [ESLint documentation](http://eslint.org/docs/user-guide/configuring#extending-configuration-files) for more information about extending configuration files. <a name="eslint-plugin-flowtype-configuration-community-maintained-configurations"></a> ### Community maintained conf