Code Style Guideline

• Code Style Guideline
  • Front end
    • Get started
      • For VSCode CLI
      • How to make VSCode format changed files on save
      • The configuration templates
    • Naming
    • Project structure
    • Component
      • Ordering (Top - Bottom)
      • Exporting
    • Storage management
  • Commenting
    • TODO
    • Refactoring
    • Styling
  • Testing
  • Standpoint
    • Do not repeat yourself (DRY)
    • Do not use Magic Numbers

Front end

Get started

Always use Typescript feature to prevent hidden bugs from Javascript.

If you are VSCode use, We suggest installing these following extensions and make the editor auto format after you saved

For VSCode CLI

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension styled-components.vscode-styled-components

How to make VSCode format changed files on save

1. Type shortcut ⌘ + shift + P
2. Choose *Preferences: Open Settings (UI)
3. Search by Editor: Format On Save
4. Check the checkbox

Finally, please make sure the VSCode configuration file (JSON) have configurations as below:

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

The configuration templates

Please follow the configuration below for consistency and control

• ESlint
• Prettier

Naming

Constant variables: camelCase

For Boolean variables should start with is, has, and should

For Array should use the plural noun

consttmnId='tmn.1234566789'letcount=0constisModalVisible=falseconsthasValue=trueconstshouldUpdate=falseconstusers=['Dang','Dum']constuserDetail={name: 'Tester',occupations: ['farmer','investor']}

For function please use camelCase, start with Verb, and only use Arrow function

For handler function should start with on

constcalculateNumber=(firstInput: number,secondInput: number)=>firstInput+secondInputconstonClose=()=>({})constonSubmitComplete=()=>({})

For Enumerate please use PascalCase

enumActionType={Create=1,Update=2}

For Type and Interface use PascalCase start with I

typeIOccupation='business'|'farmer'|'other'interfaceIComponentProps{title: stringonClick: ()=>voidonChange: (input: number)=>void}

For Component and Styled-Component please use PascalCase

constFundCard=({ title, description }: IFundCard)=>(<Container>
...
</Container>)constContainer=styled.div` border: 1px solid red;`

For Page please add a Page suffix to our page component.

constPurchasePage=()=>{return(...)}exportdefaultPurchasePage

Project structure

The structure is based on Next.js framework.

/public
favicon.ico
/src
/components
/common
/button
/__tests__
Button.spec.tsx
Button.tsx
/auth
/__tests__
AuthForm.test.tsx
AuthForm.tsx
/[Name]
[Name].tsx
[Name].test.ts
/hooks
/types
/utils
/api
/__tests__
[HTTP_METHOD][Name]Api.spec.ts
[HTTP_METHOD][Name]Api.ts
/test
/api
authApi.spec.ts
/pages
index.test.tsx
/pages
/api
/auth
authApi.ts
_app.tsx
_document.tsx
index.tsx

Component

Use only Functional components with Hooks

Ordering (Top - Bottom)

1. Dependencies importing part
2. Styled part
3. Interface and Type part
4. Component part
5. Exporting part

// /src/components/counter/Counter.tsximport{useState}from'react'importstyledfrom'styled-components'constCounterLabel=styled.span` font-size: 18px; font-weight: bold;`constContainer=styled.div` display: flex; align-items: center; justify-content: center; flex-direction: column;`constSubContainer=styled.div` display: flex; align-items: center; justify-content: center; flex-direction: row;`interfaceICounterProps{title: string}constCounter=({ title }: ICounterProps)=>{const[count,setCount]=useState(0)return(<Container><h3>{title}</h3><CounterLabel>{count}</CounterLabel><SubContainer><buttononClick={()=>setCount(count+1)}>Increase</button><buttononClick={()=>setCount(count-1)}>Decrease</button></SubContainer></Container>)}exportdefaultCounter

Exporting

If we want to export a single thing, use export default first. For many things use both export and export default.

exportinterfaceIExportingDetail{title: stringindex: number}constexportingDetail: IExportingDetail={title: 'Hello',index: 0}exportdefaultexportingDetail

Storage management

Please read the Redux style guide

Commenting

TODO

If something needs to be changed or refactored later, add a // TODO: comment to indicate what the issue is.

Refactoring

If you refactor code that has comments, please check afterward if the comments still make sense or need to be updated.

Styling

No !important postfix, for more information

No need to create new classname, please use styled-components instead. Except the tailwindcss

Testing

Paste every test file into __tests__ folder at the sibling layer of the code.

/src
/components
/button
/__tests__
Button.spec.tsx
Button.tsx
/apis
/__tests__
getUserStatus.spec.ts
getUserStatus.ts

The testing structure and lifecycle must align with Jest guideline.

Naming of test cases should start with should because Jest implements it function to make everyone read easier. We read a test case below as it clicking the purchase button normally.

describe('purchase page',()=>{beforeAll(()=>{
...})afterEach(()=>{
...
})it('should clicking the purchase button normally',()=>{
...
});});

Standpoint

Always separate Logic From Configuration Write code that is reusable, scalable, and testable.

Do not repeat yourself (DRY)

• Do not copy code to another place.
• Avoid using the same string twice in a project.
• Move shared logic to a shared place.
• Make sure you do not have to adapt changes in multiple places.

Do not use Magic Numbers

See Magic number programming