【这篇随笔记录的很简单，没有涉及具体的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
},
};