there is no distinction between right and wrong, and there must be some imperfections, combining my daily development and experience. It allows you to write more rigorous code, and I hope it will be helpful after reading it.
1. Comments
(1) comments at the top of the file, including description, author, date
/**
* @description xxxxxx
* @author chengfeng
* @since 19/05/21
*/
(2) comments on the module
/**
* Copy Data
* @param {*} data Source data to copy
* @param {boolean} [isDeep=false] Is it a deep copy? Default is a shallow copy
* @return {*} Return copied data
*/
(3) Business code comments
/*Business Code Comment*/
(4) variable comments
interface IState {
// Name
name: string;
// Telephone
phone: number;
// Address
address: string;
}
2. Reference component order
- first reference the external component library, then the current component block level component, then the common function library in common, and finally the css style
import * as React from 'react';
import { Dropdown, Menu, Icon } from 'antd';
import Header from './Header';
import toast from 'common/toast';
import './index.less';
3. Quotation marks
- use single quotes, or backquotes of es6
4. Indent
- use two spaces
const handleCheck = () => {
onCancel && onCancel();
onClose && onClose();
};
5. Semicolon
- every expression except for a code block must be followed by a semicolon.
6. Parentheses
the following keywords must be followed by curly braces (even if the content of the code block is only one line): if, else, for, while, do, switch, try, catch, finally, with.
// not good
if (condition) doSomething();
// good
if (condition) {
doSomething();
}
7. Space
- there must be a space on both sides of the binary and ternary operators, and no space is allowed between the unary operator and the Operand.
// bad
++ x;
y ++;
z = x?1:2;
// good
++x;
y++;
z = x ? 1 : 2;
- the opening curly braces {used as the beginning of a code block must be preceded by a space.
// bad
if (condition){
}
while (condition){
}
function funcName(){
}
// good
if (condition) {
}
while (condition) {
}
function funcName() {
}
- if / else / for / while / function / switch / do / try / catch / finally keyword must be followed by a space.
// bad
if(condition) {
}
while(condition) {
}
(function() {
})();
// good
if (condition) {
}
while (condition) {
}
(function () {
})();
- when an object is created, there must be spaces after: in the property, and spaces are not allowed before:.
// bad
var obj = {
a : 1,
b:2,
c :3
};
// good
var obj = {
a: 1,
b: 2,
c: 3
};
8. Line break
- the line must be wrapped at the end of each separate statement.
- in scenarios such as function declarations, function expressions, function calls, object creation, array creation, for statements, etc., line breaks before, or; are not allowed
// bad
var obj = {
a: 1
, b: 2
, c: 3,
};
function test()
{
...
}
for (const key in object)
{
if (object.hasOwnProperty(key)) {
const element = object[key];
}
}
// good
var obj = {
a: 1,
b: 2,
c: 3,
};
function test() {
...
}
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
}
}
- after the following keywords: else, catch, finally do not need to wrap
// bad
if (condition) {
...
}
else {
...
}
try {
...
}
catch (e) {
...
}
finally {
...
}
// good
if (condition) {
...
} else {
...
}
try {
...
} catch (e) {
...
} finally {
...
}
9. Array, object
- object attribute name does not need quotation marks;
- objects are written in indentation, not on one line;
- array ends without a comma.
- object should end with a comma.
The
The
// bad
const a = {
'b': 1
};
const a = {b: 1};
const a = {
b: 1,
c: 2
};
const arr = [1, 2, 3, 4,];
// good
const a = {
b: 1,
c: 2,
};
const arr = [1, 2, 3, 4];
10. Name
-
Class name: big hump style, letters and numbers, for example: AbcTest. Chinese characters, special symbols and non-large hump style are prohibited.
-
function name: small hump style, letters and numbers, for example: abcTest. Prohibit Chinese characters, special symbols, prohibit non-small hump style, such as snake_case and so on.
-
variable name: same function name.
-
constant: all uppercase style, uppercase letters, numbers, and underscores, separated by underscores between words, for example: ABC_TEST. Chinese characters, special symbols and lowercase letters are prohibited.
-
uses the onXxx form as the property name in props for callback.
interface IProps {
onClose?: () => void;
onOk?: (item: Record<string, any>) => void;
}
The event function within the
- component uses the beginning and end of handle, handleCheckBtn.
- uses a word in the form of withXxx as the name of the high-level component.
- Interface naming is preceded by I for interface
interface IProps {}
interface IState {}