React-Native代码规范

代码规范只是让代码更容易被理解，让多人开发时代码也能保持内部一致性。

制定代码规范的标准因团队而异，可以根据多数人的开发习惯或者是参考别人的规范

实现代码规范的方法有很多种，在React-Native中可以使用ESLint配合编译器进行代码规范审核

不必矫枉过正

编程规范

变量规范

代码中变量的命名均不能以下划线或符号开始，也不能以下划线或符号为结束

1	错误：_title / $title / title_ / title$

变量命名采用lowerCamelCase驼峰命名的方式，第一个字母必须小写

1	正确：myName / birthDay

命名严禁使用拼音或者是拼音与英文混合的方式，正确的英文拼写和语法可以让阅读者易于理解，避免歧义

1 2	错误：shengchan / fenshu / bigshan 正确：production ／ grade ／ bigMountain

常用的单词，在不引起歧义的情况下可以缩写

1	例如：userMsg 等价于 userMessaage

数组或者对象变量，需明确指出其类型

1	正确： studentList / userObject

常量的命名全部采用大写，单词与单词之间采用下划线进行分割。力求保证见文知意，不要害怕变量过长

1 2	错误：MaxValue / MAXVALUE 正确：MAX_STUDENT_GRADE

对所有的变量，对象的引用，请使用const

函数规范

方法、函数一律使用ES6中箭头函数的声明方式

1
2
3

错误：function test() {}
     test() {}
正确：test = () => {}

方法名、函数名一律采用lowerCamelCase驼峰命名的方式，第一个字母必须小写

1	正确：getAllUserInformation = () => {}

类名使用UpperCamelCase驼峰命名的方式，第一个字母必须大写

1	正确：export default class StringUtil {}

组件规范

JSX中的方法，超过一行必须写成一个新的函数

1	正确：<TouchableOpacity onPress={this.doSomething}>

组件嵌套时，子组件与父组件要有2个空格的缩进

1
2
3

<Father>
  <Children />
</Father>

组件需要设置样式的时候，如果只有一个样式可以用内联的方式写在JSX内，如果两个以上必须使用StyleSheet创建样式
当一个组件有多个属性需要配置的时候，务必多行书写

<TouchableOpacity
  onPress={() => {}}
  style={}
>
  <Children />
</TouchableOpacity>

自定义组件命名的时候，用UpperCamelCase命名。
自定义组件，要详细写出属性列表，并解释每个属性的意思。为每个属性初始化一个默认值

FlexButton.propTypes = {
  press: PropTypes.func,
  top: PropTypes.number.isRequired,
};

FlexButton.defaultProps = {
  press: () => {},
  top: 0,
};

无状态的组件，即不涉及组件内部数据、UI变化的组件。请继承自PureComponent而不是Component

格式规范

关键字左右需加空格，如if/for/else等关键字

任何运算符左右必须都有一个空格，包括赋值、逻辑运算符、加减乘除等

1 2	错误：grade=20 正确：grade = 20

大括号使用约定。如果大括号内为空，则写成{}即可，不需要换行。如果是非空代码块则左边括号空一格，右边闭括号需要换行，与方法名对其

1
2
3

例如：const getTest = () => {
    	// do something
	 }

单行字符数不超过120个（可在eslint中设置）超过的字符需要换行。单页代码不超过300行，超过的需要重构代码。
方法参数在传入的时候，多个参数逗号前必须加括号

1
2
3

onMsgCallBack = (msg, title, name) => {
    // do something
}

合理使用空格，将不同功能或者是不同业务逻辑的方法分开。

条件语句规范

简单的if/else逻辑判断，请使用三目运算符。逻辑判断请勿超过三层，如果超过了请重新思考代码逻辑。或者使用switch
在一个 switch 块内，每个case要么通过 break/return 等来终止，要么注释说明程序将继续执行到哪一个 case 为止;在一个 switch 块内，都必须包含一个default 语句并且放在最后，即使它什么代码也没有。

注释规范

变量或者是属性，可以在后面使用单行注释来说明这个变量或者属性的用途

1	const userName = 'Jace'; // 用户姓名

类、类方法的注释不得使用//单行注释，必须使用/**/的多行注释。方法中如果需要传入参数，或者是有返回值。请在注释中详细写出。

/*
 * 获取所有信息
 * param: name 获取信息人姓名
 * param: number 获取信息人编号
 * return: msg 返回用户信息
 */
const fetchAllMsg = (name, number) => {
    // doFetch
    return msg
};

逻辑代码中需要注释出逻辑流程
注释掉的代码，如果不再使用请尽快删除，以免给后续维护人员带来麻烦。如果只是暂时注释，请说明注释原因

文件规范

确定好项目的文件目录结构，要求文件层次清晰，功能划分明确

文件命名遵循lowerCamelCase方式命名。如果是某一个平台特有的文件，可以加上ios或者android的后缀作为区分

1	例如：index.ios.js / index.android.js

文件开头需写明该文件作用、作者以及创建时间

/*
 * 登录页面
 * by XXX at 2018-2-10
 */

ESLint安装指南

在项目的根目录中运行

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

之后需要安装babel-eslint，并创建.eslintrc。可以在里面写入自己的代码规则，类似于下方

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
  	// 你的规则
  },
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

所有的规则可以在ESLint规则中查看，然后根据你的要求写到rules下

1
2
3

"rules": {
	"no-bitwise": [0]
}

其中：

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)