Write Code Convention FE

[minhhy2801]

Please help add your code convention of FE and BE side Here is an example in FE for you to have a look:

// Bad
// Filename: userlogin.js

export const UserLoginNew = () => {}

// Good
// Filename: UserLogin.jsx
const UserLogin = () => {}

export default UserLogin;

• File- and component names need to be identical.
• Use PascalCase naming convention for filename as well as component name
• Use lint format sugestation
  • https://eslint.org/docs/latest/use/getting-started
  • Rules of Hooks: eslint-plugin-react-hooks
  • JSX accessibility: eslint-plugin-jsx-a11y
  • https://github.com/jsx-eslint/eslint-plugin-react
  • https://typescript-eslint.io/getting-started/
• Use prettier https://prettier.io/
• Use husky https://github.com/typicode/husky
• List rules of commit detail

[nnh53]

@LeHoDiep @minhhy2801 Dạ tụi em chỉ mới làm được vầy ạ, do tụi em còn đang thi và chưa có kinh nghiệm nên tụi em chưa làm hoàn chỉnh. Mong chị feedback cho chúng em ạ. Qua tuần sau thi xong tụi em sẽ làm hoàn chỉnh ngay ạ. Em cảm ơn chị ạ

FE_CODING_CONVENTION.md

• IMPORTANT: Làm sao dễ Maintain nhất

• IMPORTANT: KHÔNG VIẾT BIẾN, FILE & FOLDER CÓ 's' ở bất cứ đâu

  bads: users, products, ...
  good: user, product, ...
  or : userArray, userList, userCollection, ... (kiểu dữ liệu trả ra)

• NOTE: trong toàn bộ src không tồn tại tên biến gạch ngang exp: customer-report

• Dùng Eslint Typescript format suggestion https://typescript-eslint.io/getting-started/

• Dùng Prettier

• Dùng Husky

• Thư mục chứa Component phải có tên giống với tên Component và là phải PascalCase

  bads: header, headerComponent, header-component
  good: folder Header, file Header.tsx  

Export Component

• Bad

  // Filename: userlogin.js
  export const UserLoginNew = () => {}

Good

// Filename: UserLogin.jsx
const UserLogin = () => {}
export default UserLogin;

Tên Prop Component

• phải là camelCase

  bad: <UserLogin user_name="John Doe" />
  good: <UserLogin userName="John Doe" />

Tương tác FE và BE

• Tương tác json thì property phải viết snake_case để phân biệt với property của Class bad

  {
  entityProperty: 'value'
  }

good

{
    entity_property: 'value' 
}

exp

{
    "status": 200,
    "message": "success",
    "data": {
        "user_id": "123",   
        "user_name": "John Doe",     
    }
}

Tên Folder (entity)

• camelCase
• không dùng số ở kí tự đầu tiên
• không dùng kí tự đặc biệt

  bad: User, User-Report, User_Report, UserReport
  good: user, userReport, userReport

Tên File

• camelCase

  bad: Users, products.Controller, ...
  good: user.middleware.ts, userReport.middleware.ts, product.controller.ts

Tên Class

• PascalCase
• không dùng số
• không dùng kí tự đặc biệt

  bad: user, userReport, user_report
  good: User, UserReport

  Properties của Class

• camelCase
• không dùng số
• không dùng kí tự đặc biệt

  bad: user_id, user_name, user-name
  good: userId, userName

  Tên enum

• PascalCase

  export enum UserRole {
  Admin,
  Staff,
  Student
  }

Tên Type

• PascalCase
• N + 'Type'

  export type UserType = {
  userId: string
  userName: string
  }

Tên Interface

• 'I' + PascalCase

  export interface IUser {
  userId: string
  userName: string
  }

Tên Function

• camelCase
• không dùng số
• không dùng kí tự đặc biệt

  bad: get_user, get-user
  good: getUser

Nên sử dụng từ khóa function thay vì dùng arrow function

good

const getUser = () => {
    // logic
}

bad

function getUser() {
    // logic
}

Function Documentation

• sau mỗi lần update function phải cập nhật version

  /**
  * Kiểm tra xem một số có phải là số nguyên tố hay không.
  * @param {number} num - Số cần kiểm tra.
  * @returns {boolean} - True nếu số nguyên tố, false nếu không phải.
  * @example isPrime(5)
  * @description
  * Hàm này kiểm tra xem số được cung cấp có phải là số nguyên tố hay không.
  * Số nguyên tố là số chỉ chia hết cho 1 và chính nó.
  * @author [Tên tác giả]
  * @version 0.0.1
  */
  function isPrime(num) {
  // Logic kiểm tra số nguyên tố ở đây
  // ...
  }

Route

• phải

  /*
  desc: add new course
  method: POST
  path: /course/add-new-course
  headers: {
      params: ... (có hoặc không)
      query: ... (có hoặc không)
      Authorization: Bearer <access_token>
  }
  body: AddNewCourseReqBodyType (syntax feature+ReqBodyType)
  */
  courseRouter.post(
  '/add-new-course',
  accessTokenValidator,
  checkRole([UserRole.Admin]),
  addNewCourseMiddleware,
  addNewCourseController
  )
  export default courseRouter

ngoại lệ

[nnh53]

QUY_TẮC_COMMIT.md

Tài liệu hướng dẫn commit

Các bước commit

• Không commit thẳng lên main
• Không commit thẳng lên develop

1. Tạo branch mới từ develop
2. Commit code lên branch mới
3. Tạo pull request từ branch mới lên develop

Các bước commit chi tiết

1. Tạo branch mới từ develop

• Tạo branch mới từ develop

• Tên branch phải có dạng: <category>/?<reference>/<description-in-kebab-case>

  • Trong đó:
  • category: feature, bugfix, hotfix, refactor, style, test, doc
  • reference: issue/ticket, pr, no-ref
  • description-in-kebab-case: mô tả ngắn gọn về nội dung thay đổi, viết thường, cách nhau bởi dấu -

• vd: git branch feature/issue-42/create-new-button-component

• vd: git branch bugfix/issue-342/button-overlap-form-on-mobile

• vd: git branch bugfix/pr-42/fix-button-component

2. Commit code lên branch mới

• Commit code lên branch mới

• Tên commit phải có dạng: <category: do something; do some other things>

  • Trong đó:
  • category: feat, fix, refactor, chore

• feat is for adding a new feature

• fix is for fixing a bug

• refactor is for changing code for performance or convenience purpose (e.g. readability)

• chore is for everything else (writing documentation, formatting, adding tests, cleaning useless code etc.)

• vd: git commit -m "feat: add new button component; add new button components to templates"

• vd: git commit -m 'fix: add the stop directive to button component to prevent propagation'

• vd: git commit -m 'refactor: rewrite button component in TypeScript'

• vd: git commit -m 'chore: write button documentation'

3. Tạo pull request từ branch mới lên develop

[nnh53]

• Reason for the estimated point:
  • Never done Nextjs