React编码规范及持续集成实践（EditorConfig+ES

2018-08-27  本文已影响0人  Bin_008

工具

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配置文件

image.png
选择完成后ESLint会根据选择的配置下载相关的插件，如我们选择使用了React
在package.json中就有eslint-plugin-react包，相关依赖下载完成后在项目根目录下会生成.eslintrc.json(或.eslintrc.js根据你选择的配置)文件
image.png 
{
    "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": "babel-eslint"

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

"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

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": {
      "quotes": [
            "error",
            "single"
        ], //强制单引号
      "camelcase":2 //强制驼峰
    }

命令行执行检查扫描

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

image.png 
node_modules/.bin/eslint src index.js

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

image.png

Jenkins

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

"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命令详情-官方文档

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

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

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

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

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

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

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

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

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

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

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

"semi": [
            "error", "never"
    ]
上一篇 下一篇

猜你喜欢

热点阅读