工具

EditorConfig
ESLint
Jenkins

EditorConfig

在编辑时约束代码风格，在IDE中如：WebStorm格式化时(command+shift+f)将按照配置中的规则进行格式化。官方文档:https://editorconfig.org/，一份规则示例：

# top-most EditorConfig file
root = true
[*]
Unix-style newlines with a newline ending every file
end_of_line = lf
[*.{js,py}]
# 字符编码集
charset = utf-8
# 缩进使用 tab 或者 space
indent_style = space
# 缩进为space时缩进字符数
indent_size = 2
# 是否将尾行空格自动删除
trim_trailing_whitespace = true
# 是否使文件以一个空白行结尾
insert_final_newline = true
# 编码区字符数(宽度)限定 结合eslint max-len WebStorm支持 VSCode不支持
max_line_length = 100
# 引号样式 single double auto
quote_type = single
# 花括号是否另起一行
#curly_bracket_next_line = true
# 操作符两边是否有空格 true false hybrid
spaces_around_operators = true
# 括号两边是否有空格 none inside outside both
#spaces_around_brackets = both

WebStorm默认支持EditorConfig，其它IDE可能需要下载插件支持，WebStorm下导出.editorconfig，Perferences->CodeStyle->EditorConfig如下：

editorconfig.png

ESLint

插件化的javascript代码检测工具。官方文档：https://cn.eslint.org/

安装ESLint

npm install -g eslint

初始化

eslint -- init
这里我们选择问答方式生成初始化的eslint配置文件

React编码规范及持续集成实践（EditorConfig+ESLint+Jenkins）_第2张图片

image.png

选择完成后ESLint会根据选择的配置下载相关的插件，如我们选择使用了React
在 package.json中就有 eslint-plugin-react包，相关依赖下载完成后在项目根目录下会生成 .eslintrc.json(或 .eslintrc.js根据你选择的配置)文件

React编码规范及持续集成实践（EditorConfig+ESLint+Jenkins）_第3张图片

image.png

.eslintrc.json文件

{
    "env": {
        "node": true,
        "browser": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "plugins": [
        "react"
    ],
    "extends": "standard",
    "rules": {
      "react/jsx-uses-vars": 2,
      "camelcase":0
    }
}

文档配置详情说明 https://cn.eslint.org/docs/user-guide/configuring

parser

"parser": "babel-eslint"

解析器可能的配置有Esprima Babel-ESLint typescript-eslint-parser

extends

"extends": "standard"

extends决定了ESLint使用何种配置插件进行代码检查，如：

"extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
"plugins": [
        "react"
    ]

就是启用ESLint推荐规则和React推荐规则，插件eslint-plugin-react及其规则说明,extends其它值可以有：airbnb,eslint:recommended,eslint:all

"extends": "airbnb", // airbnb eslint:recommended standard  eslint:all

airbnb相关说明
英文-https://github.com/airbnb/javascript
中文-https://github.com/yuche/javascript
airbnb的rule相比较于eslint:recommended启用了eslint标记为不推荐的规则，因此，编码规范要求就要更高一些。

npm -i eslint-config-airbnb --save-dev

同时会下载相关依赖插件eslint-plugin-import, eslint-plugin-jsx-a11y,eslint-plugin-react,启用对React和jsx的一些规则检查
插件eslint-plugin-import及其规则说明
插件eslint-plugin-react及其规则说明
插件eslint-plugin-jsx-a11y及其规则说明

rules
ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
如下一个简单示例：

"rules": {
      "quotes": [
            "error",
            "single"
        ], //强制单引号
      "camelcase":2 //强制驼峰
    }

命令行执行检查扫描

由于ESLint我是本地安装的(--save-dev)需要切换到node_modules目录下执行，目录结构（React-Native项目）

React编码规范及持续集成实践（EditorConfig+ESLint+Jenkins）_第4张图片

image.png

node_modules/.bin/eslint src index.js

扫描src目录以及根目录下的index.js文件，扫描结算后我们在命令行会看到如下结果：

image.png

Jenkins

在命令行中生成的结果，不方便定位与查看，这里通过Jekins做持续集成对项目进行规范化管理。

package.json
编辑package.json增加lint命令支持

"scripts": {
    "lint": "node_modules/.bin/eslint --ext .js src index.js -c .eslintrc.json -f checkstyle > eslint.xml",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }

--ext .js src index.js 表示扫描/src目录下扩展名为.js的文件以及根目录下的index.js文件
-c .eslintrc.json 表示选择根目录下的.eslintrc.json文件作为扫描的配置文件
-f checkstyle >eslint.xml将扫描结果以checkstyle方式输出报告，输出到根目录下的eslint.xml
eslint命令详情-官方文档

配置工程与选择分支

image.png
配置submodule
由于node_modules以sub-modules添加到了工程源码库管理，需要拉取子module

image.png
添加构建脚本

image.png

切换到library（node_modules）目录拉取目标分支最新代码，再切换回根目录执行lint命令。
添加构建后步骤
将构建结果以Checkstyle results的形式输出，选择CheckStyle需要Jenkins插件支持。

image.png
查看结果

image.png

查看整个项目的扫描结果，根据需要浏览具体代码，选择或者禁用某些规则，然后重新编辑.eslintrc.json文件生成一份适用于自己团队的规则文件。

eslint配置示例（基于airbnb规范）

array-bracket-spacing 强制数组方括号中使用一致的空格 2
array-callback-return 强制数组方法的回调函数中有 return 语句 0
arrow-body-style 要求箭头函数体使用大括号 1
arrow-parens 要求箭头函数的参数使用圆括号 0
brace-style 强制在代码块中使用一致的大括号风格 2
camelcase 强制使用骆驼拼写法命名约定 2
class-methods-use-this 强制类方法使用 this 1
comma-dangle 要求或禁止末尾逗号

"comma-dangle": [1, {
            "objects": "always",
            "imports": "never",
            "arrays": "never",
            "exports": "never",
            "functions": "never"
    }]

consistent-return要求 return 语句要么总是指定返回的值，要么不指定 2
default-case要求 switch 语句中有 default 分支 0
dot-notation 强制尽可能地使用点号 2
eol-last 要求或禁止文件末尾存在空行 2
eqeqeq 要求使用 === 和 !== 2
func-names 要求或禁止使用命名的 function 表达式 2
function-paren-newline 强制在函数括号内使用一致的换行 2
global-require 要求 require() 出现在顶层模块作用域中 0
guard-for-in 要求 for-in 循环中有一个 if 语句 1
import/first 将全部import写在模块开始的位置 0
import/newline-after-import improt结束后应有空行 2
import/no-duplicates 禁止重复导入相同文件 2
import/no-extraneous-dependencies 禁止导入未在包中声明的外部模块 2
import/no-mutable-exports 可导出对象禁止用let或者var修饰 ->const 2
import/no-unresolved 确保导入的模块可以被解析为本地文件系统上的模块 0
import/prefer-default-export 当从模块中只导出单个出口时使用默认导出 1
indent 缩进风格

"indent": [
            "error",
            2,
            {"SwitchCase": 1} // set 1 -> 2 spaces; set 2 -> 4 spaces
    ]

jsx-quotes 强制在 JSX 属性中一致地使用双引号或单引号 2 prefer-single
linebreak-style 强制使用一致的换行风格 2 lf

"linebreak-style": [
            "error",
            "unix"
    ]

max-len 强制一行的最大长度 100 1

"max-len": [
            "warn",
            100
    ]

newline-per-chained-call 要求方法链中每个调用都有一个换行符 2
no-bitwise 禁用按位运算符 1
no-case-declarations 不允许在 case 子句中使用词法声明 2
no-confusing-arrow 禁止在可能与比较操作符相混淆的地方使用箭头函数 2
no-continue 禁用 continue 语句 1
no-else-return 禁止 if 语句中 return 语句之后有 else 块 2
no-empty 禁止出现空语句块 2
no-extend-native 禁止扩展原生类型 2 exceptions Date

"no-extend-native": [
            "error",
            {"exceptions": ["Date"]}
    ]

no-extra-semi 禁止不必要的分号 2
no-lonely-if 禁止 if 作为唯一的语句出现在 else 语句中 2
no-loop-func 禁止在循环中出现 function 声明和表达式 1
no-mixed-operators 禁止混合使用不同的操作符 0
no-mixed-spaces-and-tabs 禁止空格和 tab 的混合缩进 2
no-multi-assign 禁止连续赋值 2
no-nested-ternary 禁用嵌套的三元表达式 2
no-param-reassign 禁止对 function 的参数进行重新赋值 2
no-plusplus 禁用一元操作符 ++ 和 -- 0
no-prototype-builtins 禁止直接调用 Object.prototypes 的内置属性 2
no-restricted-globals 禁用特定的全局变量 2
no-restricted-properties 禁止使用对象的某些属性 1
no-restricted-syntax 禁用特定的语法使用for-each map for-i 2
no-shadow 禁止变量声明与外层作用域的变量同名 2
no-tabs 禁用 tab 2
no-trailing-spaces 禁用行尾空格 2
no-undef 禁用未声明的变量，除非它们在 /*global */ 注释中被提到 2
no-underscore-dangle 禁止标识符中有悬空下划线 0
no-unreachable 禁止在return、throw、continue 和 break 语句之后出现不可达代码 2
no-unused-expressions 禁止出现未使用过的表达式 2 allowShortCircuit true

"no-unused-expressions": ["error", {"allowShortCircuit": true}]

no-unused-vars 禁止出现未使用过的变量 2
no-use-before-define 禁止在变量定义之前使用它们 2
no-useless-concat 禁止不必要的字符串字面量或模板字面量的连接 0
no-useless-constructor 禁用不必要的构造函数 2
no-useless-escape 禁用不必要的转义字符 0
no-var 要求使用 let 或 const 而不是 var 2
object-curly-newline 强制大括号内换行符的一致性 2
object-curly-spacing 强制在大括号中使用一致的空格 2
object-shorthand 要求或禁止对象字面量中方法和属性使用简写语法 2
one-var 强制函数中的变量要么一起声明要么分开声明 0
one-var-declaration-per-line 要求或禁止在变量声明周围换行 0
operator-assignment 要求或禁止在可能的情况下使用简化的赋值操作符 1
padded-blocks 要求或禁止块内填充 2 class always

"padded-blocks": [
            "error", {"classes": "always"}
    ]

prefer-arrow-callback 要求回调函数使用箭头函数 2
prefer-const 要求使用 const 声明那些声明后不再被修改的变量 2
prefer-destructuring 优先使用数组和对象解构 2 object

"prefer-destructuring": [
            "error", {"array": false, "object": true}
    ]

prefer-rest-params 要求使用剩余参数而不是 arguments 2
prefer-spread 要求使用扩展运算符而非 .apply() 2
prefer-template 要求使用模板字面量而非字符串连接 2
quote-props 要求对象字面量属性名称用引号括起来 2
quotes 强制使用一致的反勾号、双引号或单引号 2

"quotes": [
            "error",
            "single"
    ]

radix 强制在parseInt()使用基数参数 0
react/forbid-prop-types 禁止某些propTypes 1
react/jsx-boolean-value 在JSX中强制布尔属性符号 2
react/jsx-closing-bracket-location 在JSX中验证右括号位置 1
react/jsx-closing-tag-location 在JSX中验证右标签位置 2
react/jsx-curly-brace-presence 在JSX中启用或者禁用不必要的大括号 props always children never

"react/jsx-curly-brace-presence": [
            "error",
            {"props": "always", "children": "never"}
    ]

react/jsx-curly-spacing 在JSX属性和表达式中加强或禁止大括号内的空格禁止 2
react/jsx-equals-spacing 在JSX属性中强制或禁止等号周围的空格禁止 2
react/jsx-filename-extension 限制包含JSX的文件扩展名 0
react/jsx-first-prop-new-line 属性强制换行 2
react/jsx-indent jsx中缩进检查 2
react/jsx-indent-props jsx中属性缩进检查 2
react/jsx-max-props-per-line 限制JSX中单行上的props的最大数量 2
react/jsx-no-bind JSX中不允许使用箭头函数和bind 2
react/jsx-no-duplicate-props 防止在JSX中重复的props 2
react/jsx-tag-spacing JSX中开起标签开始和结束空格检查 2
react/jsx-wrap-multilines 多行JSX中避免丢失括号 2
react/no-array-index-key 防止在数组中遍历中使用数组key做索引 2
react/no-did-mount-set-state 防止在componentDidMount中使用setState 2
react/no-multi-comp 防止每个文件有多个组件定义 2
react/no-unescaped-entities 防止无效字符出现在标记中 1
react/no-unused-prop-types 避免定义未使用的PropType, defined but never used 1
react/no-unused-state 避免定义未使用的state 2
react/prefer-stateless-function 无状态管理(stateless)的React组件应该继承PureComponent 1
react/prop-types 防止在React组件定义中丢失props验证(类型验证) 1
react/require-default-props 非require的props需在defaultProps中申明 1
react/self-closing-comp 防止没有children的组件的额外结束标签 2
react/sort-comp强制组件方法顺序2

① static methods and proper

② lifecycle methods

③ custom methods

④ render method
semi 要求或禁止使用分号 2 禁止分号

"semi": [
            "error", "never"
    ]

space-before-function-paren 强制在 function的左括号之前使用一致的空格 2
spaced-comment 强制在注释中 // 或 /\ 使用一致的空格 2
switch-colon-spacing 强制在 switch 的冒号左右有空格 2
vars-on-top 要求所有的 var 声明出现在它们所在的作用域顶部 2
no-console: 禁止使用console 0

React编码规范及持续集成实践（EditorConfig+ESLint+Jenkins）

工具

EditorConfig

ESLint

安装ESLint

初始化

命令行执行检查扫描

Jenkins

eslint配置示例（基于airbnb规范）

你可能感兴趣的:(React编码规范及持续集成实践（EditorConfig+ESLint+Jenkins）)