代码规范只是让代码更容易被理解，让多人开发时代码也能保持内部一致性。
制定代码规范的标准因团队而异，可以根据多数人的开发习惯或者是参考别人的规范
实现代码规范的方法有很多种，在React-Native中可以使用ESLint配合编译器进行代码规范审核
不必矫枉过正
编程规范
变量规范
- 代码中变量的命名均不能以下划线或符号开始，也不能以下划线或符号为结束
错误：_title / $title / title_ / title$
- 变量命名采用lowerCamelCase驼峰命名的方式，第一个字母必须小写
正确：myName / birthDay
- 命名严禁使用拼音或者是拼音与英文混合的方式，正确的英文拼写和语法可以让阅读者易于理解，避免歧义
错误：shengchan / fenshu / bigshan
正确：production ／ grade ／ bigMountain
- 常用的单词，在不引起歧义的情况下可以缩写
例如：userMsg 等价于 userMessaage
- 数组或者对象变量，需明确指出其类型
正确： studentList / userObject
- 常量的命名全部采用大写，单词与单词之间采用下划线进行分割。力求保证见文知意，不要害怕变量过长
错误：MaxValue / MAXVALUE
正确：MAX_STUDENT_GRADE
- 对所有的变量，对象的引用，请使用const
函数规范
- 方法、函数一律使用ES6中箭头函数的声明方式
错误：function test() {}
test() {}
正确：test = () => {}
- 方法名、函数名一律采用lowerCamelCase驼峰命名的方式，第一个字母必须小写
正确：getAllUserInformation = () => {}
- 类名使用UpperCamelCase驼峰命名的方式，第一个字母必须大写
正确：export default class StringUtil {}
组件规范
- JSX中的方法，超过一行必须写成一个新的函数
正确：<TouchableOpacity onPress={this.doSomething}>
- 组件嵌套时，子组件与父组件要有2个空格的缩进
<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等关键字
- 任何运算符左右必须都有一个空格，包括赋值、逻辑运算符、加减乘除等
错误：grade=20
正确：grade = 20
- 大括号使用约定。如果大括号内为空，则写成{}即可，不需要换行。如果是非空代码块则左边括号空一格，右边闭括号需要换行，与方法名对其
例如：const getTest = () => {
// do something
}
- 单行字符数不超过120个（可在eslint中设置）超过的字符需要换行。单页代码不超过300行，超过的需要重构代码。
- 方法参数在传入的时候，多个参数逗号前必须加括号
onMsgCallBack = (msg, title, name) => {
// do something
}
- 合理使用空格，将不同功能或者是不同业务逻辑的方法分开。
条件语句规范
- 简单的if/else逻辑判断，请使用三目运算符。逻辑判断请勿超过三层，如果超过了请重新思考代码逻辑。或者使用switch
- 在一个 switch 块内，每个case要么通过 break/return 等来终止，要么注释说明程序将继续执行到哪一个 case 为止;在一个 switch 块内，都必须包含一个default 语句并且 放在最后，即使它什么代码也没有。
注释规范
- 变量或者是属性，可以在后面使用单行注释来说明这个变量或者属性的用途
const userName = 'Jace'; // 用户姓名
- 类、类方法的注释不得使用//单行注释，必须使用/**/的多行注释。方法中如果需要传入参数，或者是有返回值。请在注释中详细写出。
/*
* 获取所有信息
* param: name 获取信息人姓名
* param: number 获取信息人编号
* return: msg 返回用户信息
*/
const fetchAllMsg = (name, number) => {
// doFetch
return msg
};
- 逻辑代码中需要注释出逻辑流程
- 注释掉的代码，如果不再使用请尽快删除，以免给后续维护人员带来麻烦。如果只是暂时注释，请说明注释原因
文件规范
- 确定好项目的文件目录结构，要求文件层次清晰，功能划分明确
- 文件命名遵循lowerCamelCase方式命名。如果是某一个平台特有的文件，可以加上ios或者android的后缀作为区分
例如：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下
"rules": {
"no-bitwise": [0]
}
其中：
-
"off"或0- 关闭规则 -
"warn"或1- 开启规则，使用警告级别的错误：warn(不会导致程序退出) -
"error"或2- 开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)
网友评论