React Native开发的一种代码规范：Eslint + FlowType

【这篇随笔记录的很简单，没有涉及具体的Eslint规则解释以及FlowType的类型说明和使用等，只是链接了所需的若干文档】

js开发很舒服，但是代码一多起来就参差不齐，难以阅读了。所以加上一些代码规范以及检测报错会保证项目代码的健康程度，我这里使用的是Eslint + FlowType来进行代码规范的（我还不会TypeScript，所以就没有和TS的对比了）。

达到的目标：

• Eslint
  • 对代码的缩进、格式等有规定
  • ...诸多Eslint的规定，具体参见Eslint文档。
• FlowType
  • 所有的方法参数都有明确的类型声明和返回类型声明

具体的环境配置方法：

• Eslint
  • 参考 Eslint Getting Started进行环境配置（我使用的是airbnb的，并且有所修改）。
  • 配置.eslintrc文件，指定属于你自己的规则。
  • （可选）设置git提交，在eslint检测通过后才可以。修改git的/.git/hooks/pre-commit文件（没有的话，新建一个），修改为如下所示。（这里可以用ln -s将.git/hooks链接到git仓库里的自己创建的gitHooks目录，可以使用git管理这些文件，默认的.git/目录是被git忽视的，无法直接管理。）

#! /usr/bin/env python

import sys
import os

# in "<project_dir>/gitHooks"
os.chdir(os.path.dirname(__file__))
# in "<project_dir>"
os.chdir('..')

def runCommand(command):
    return os.popen(command).read().strip('\n')

cachedFiles = runCommand('git diff --name-only --cached --diff-filter=ACMR')

if not cachedFiles:
    sys.exit(0)

files = cachedFiles.split('\n')
filePaths = ''

folderPath = os.getcwd()
for file in files:
    if file.endswith('.js'):
        filePaths += os.path.join(file) + ' '

if not filePaths.strip():
    sys.exit(0)

checkStylePath = ''
checkStyleCommand = './node_modules/.bin/eslint {files}'.format(files=filePaths)
if os.system(checkStyleCommand) == 0:
    sys.exit(0)
else:
    sys.exit(1)

• FlowType
  • 参考FlowType的eslint引导，将其中的规则copy到eslintrc文件里。可以根据自己的要求修改。
  • FlowType的具体type定义使用参考FlowType

项目报错，但是想修改这个eslint rule的步骤（针对WebStorm）

• 查看错误原因（指针指着红线就可以了），copy里面的原因，此处为"spaced-comment"
• 在node_module目录下全局搜索错误原因，从搜索结果里挨个找，可以找到air-bnb的文件，叫作eslint-config-airbnb-base...，从里面可以查看具体的规则说明，可以通过注释的链接跳转到详细的网页。
• 在网页上查看具体规则说明，并修改自己的eslintrc文件的rule。

我的.eslintrc.js

module.exports = {
    env: {
        es6: true,
        node: true,
    },
    extends: 'airbnb',
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
    },
    // let babel-eslint parse, because type definition will be error with eslint parser.
    parser: "babel-eslint",
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 2018,
        sourceType: 'module',
    },
    plugins: [
        'react',
        "flowtype",
    ],
    rules: {
        // 0 for 'off', 1 for 'warning',2 for 'error',
        // indent by 4
        "indent": ["error", 4, {
            "SwitchCase": 1,
            "FunctionDeclaration": {
                "parameters": "first"
            },
            "FunctionExpression": {
                "parameters": "first"
            }
        }],
        // Enforce JSX indentation
        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md
        'react/jsx-indent': ['error', 4],
        // Validate props indentation in JSX
        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
        'react/jsx-indent-props': ['error', 4],
        // max length of one line
        "max-len": ["error", 130],
        // should have space after "{" and before "}"
        "object-curly-spacing": ["error", "never"],
        // When there is only a single export from a module, prefer using default export over named export.
        'import/prefer-default-export': 'off',
        // http://eslint.org/docs/rules/quotes
        "quotes": ["off"],
        // https://eslint.org/docs/rules/object-curly-newline
        'object-curly-newline': ['error', {
            ObjectExpression: {minProperties: 4, multiline: true, consistent: true},
            ObjectPattern: {minProperties: 4, multiline: true, consistent: true},
            // it is not necessary to do with import and export( WebStorm does not supprt quick format to this )
            // ImportDeclaration: {minProperties: 4, multiline: true, consistent: true},
            // ExportDeclaration: {minProperties: 4, multiline: true, consistent: true},
        }],
        // http://eslint.org/docs/rules/no-underscore-dangle
        "no-underscore-dangle": [0],
        // allow
        "no-unused-expressions": 0,
        // allow use of variables before they are defined
        "no-use-before-define": 0,
        // only .js and .jsx files may have JSX,
        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
        'react/jsx-filename-extension': [
            2,
            {
                extensions: ['.js', '.jsx'],
            },
        ],
        // Validate whitespace in and around the JSX opening and closing brackets
        // https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-tag-spacing.md
        'react/jsx-tag-spacing': ['error', {
            closingSlash: 'never',
            beforeSelfClosing: 'never',
            afterOpening: 'never',
            beforeClosing: 'never',
        }],
        // do not require all requires be top-level to allow static require for <Image/>
        // https://eslint.org/docs/rules/global-require
        'global-require': 0,
        // enforces no braces where they can be omitted
        // https://eslint.org/docs/rules/arrow-body-style
        'arrow-body-style': [1, 'as-needed', {
            requireReturnForObjectLiteral: false,
        }],

        // below is flowType lint
        // https://github.com/gajus/eslint-plugin-flowtype
        "flowtype/boolean-style": [
            2,
            "boolean"
        ],
        "flowtype/define-flow-type": 1,
        "flowtype/delimiter-dangle": [
            2,
            "never"
        ],
        "flowtype/generic-spacing": [
            2,
            "never"
        ],
        "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-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
    },
};