Định dạng & cấu trúc

Định dạng dọc: trước và sau

// TRUOC: lon xon - ham chi tiet tren, ham goi no o duoi
function formatName(first: string, last: string): string {
  return first.trim() + ' ' + last.trim();
}

const MAX_RETRIES = 3;

function processUser(user: User): string {
  // ... goi formatName, validateEmail, buildGreeting
  return buildGreeting(validateEmail(user.email), formatName(user.first, user.last));
}

function validateEmail(email: string): boolean {
  return email.includes('@');
}

function buildGreeting(valid: boolean, name: string): string {
  return valid ? 'Chao ' + name : 'Email khong hop le';
}

// ---

// SAU: tong quat tren, chi tiet duoi
// Nguoi doc thay processUser truoc (buc tranh lon), roi di xuong neu can
const MAX_RETRIES = 3;

function processUser(user: User): string {
  return buildGreeting(validateEmail(user.email), formatName(user.first, user.last));
}

function validateEmail(email: string): boolean {
  return email.includes('@');
}

function buildGreeting(valid: boolean, name: string): string {
  return valid ? 'Chao ' + name : 'Email khong hop le';
}

function formatName(first: string, last: string): string {
  return first.trim() + ' ' + last.trim();
}

Khoảng trắng ngang - dày đặc vs. có hơi thở

// DAY DAC - kho doc
const result=a+b*c;
if(x>0&&y<10){doSomething(x,y,z);}
const obj={name:'meo',age:2,active:true};

// CO HOI THO - mat di theo cau truc
const result = a + b * c;
if (x > 0 && y < 10) {
  doSomething(x, y, z);
}
const obj = { name: 'meo', age: 2, active: true };

Thụt lề thể hiện cấu trúc - không dùng thụt lề để 'căn chỉnh đẹp'

// TRANH: can chinh theo chieu ngang (fragile - doi ten bien la vo)
const firstName  = user.firstName;
const lastName   = user.lastName;
const emailAddr  = user.email;

// NEN: thut deu, de doc, Prettier tu lo
const firstName = user.firstName;
const lastName = user.lastName;
const emailAddr = user.email;

.prettierrc - cấu hình đơn giản cho dự án TypeScript

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5",
  "arrowParens": "always"
}

.editorconfig - áp dụng cho mọi ngôn ngữ trong repo

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Tích hợp vào package.json - format-on-save và pre-commit

// package.json (phan scripts va lint-staged)
{
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .ts,.tsx",
    "check": "tsc --noEmit"
  },
  "lint-staged": {
    "*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
    "*.{json,md,yml}": ["prettier --write"]
  }
}