Develop habits!

Use single quotes ' in strings, double quotes " in JSX
Indent with two spaces
The method body control is displayed in one screen (120 lines)
Use this directly instead of that/self/me
The console.log statement prohibits submission
Chinese copywriting is not allowed in the code and needs to be internationalized
TS types are perfect, try not to use any
Do not use abbreviations for variable naming, semantic naming, you can know the meaning when you see the variable name
Do not use so many .../.../ when importing modules, use src/xx/x to refer directly
Don't keep useless code or comments, just delete them
Callbacks are not allowed to exceed two layers in principle, and three layers must be handled with promises. It is recommended to use async await
The naming method of component is a big hump, and the directory is lowercase with a horizontal bar (? The hump currently used by dataphin)
Use === and !== to replace == and !=, except when judging undefined and null, use undefOrNull == null
Comments distinguish between /** ... */ (methods, properties, class definitions) and // ... (in method bodies).
Do not use export *, and do not use export default (unless you are exporting a single component), try to use named export
The author information needs to be added to the header of the file to facilitate quick contact. The author can be one or more, and the format is as follows:
17. Use deconstruction
18. The introduction of new third-party dependencies requires review

React Component Specification

When writing documents for public components, props and state must add Chinese descriptions
When creating React components with pure functions, don't use arrow functions (because it can't get displayName)
Prohibition of warning, must be resolved
Disable the default jump behavior should be used, do not use href='#'
Do not use it when doing Form because it is a traditional page refresh submission. The correct way is to bind onClick on the submit button for manual processing
Unless it is a public component, the use of internal state is prohibited, and the data is uniformly placed in redux management
The render function is placed at the end, the order is propTypes, props and state initialization, component initialization, other methods
Callback methods usually start with on-, before-, after-, and add a noun, such as onSwitched, events in the component, usually start with handle-, and add a noun
Boolean class variable naming, there are only three types at the beginning, is-, has-, can-
Define the name of ref, the camel case that starts with ref; such as: refGraphToolsCont

TS usage specification

The type is perfect, function parameters and return values need to define types, try not to use any
The attribute type must be written in full

// bad:
favoriteListStore = [];

// good:
favoriteListStore = [] as Store[];

Global types added to d.ts

// bad:
locaz: Locaz = (<any>window).locaz;

// good：
locaz = window.locaz;

The basic type is lowercase, and the type is omitted when it can be automatically deduced

// bad:
sthA: Boolean;
sthB: String;
sthC: Number;
strD: boolean = false;

// good:
sthA: boolean;
sthB: string;
sthC: number;
strD = false;

5. Combination of OOP and FP

(1) Change the instance method in the class to a static method
(2) Change the instance method this in the class to the first parameter.
(3) Change the method to a pure function

class A {
    
    
  static fun1(a: A, arg1: Arg1) {
    
    
    // pure function
  }

  static fun2(a: A, arg1: Arg1) {
    
    
    // pure function
  }
}

class B {
    
    
  static fun1(b: B, arg1: Arg1, a: A) {
    
    
    // pure function
    return B.fun(b, A.fun1(a, arg1));
  }

  static fun(b: B, arg1: Arg1) {
    
    
    // pure function
  }
}

Reasons:
● Use OOP-style class, combined with initial value and type definition, perfectly combined with Typescript type. You can also use mature design patterns in the OOP style.
● Use static method (pure function) to replace the instance method in the class to solve the following problems:
○ The original non-OOP style data processing method is scattered;
○ The original instance method (mutable method) has a large influence range and is not cohesive enough. Unable to take advantage of FP, and does not match the team's data processing method;
○ OOP in BI products requires continuous construction and serialization. The static method (pure function) approach does not involve any instance method references.
6. Name the export, which is more friendly to the type.

Git Commit specification
type Optional values:

● feat: new functions
● fix: fix problems
● docs: document modification
● format: modify the code format without affecting the code logic
● clean: clean up the code, remove outdated code
● refactor: refactor the code, not add new functions, not fix Vulnerabilities
● perf: performance improvement
● test: add tests
● chore: modify tool related (not limited to documentation, code generation, Makefile modification)
● deps: dependency update

Guess you like