Khuôn khổ trình bày mã lệnh JavaScript

Khuôn khổ trình bày mã lệnh JavaScript (code formatting) rất quan trọng để mã của bạn dễ đọc, bảo trì và hợp tác hơn với các lập trình viên khác. Dưới đây là các quy tắc và hướng dẫn phổ biến để trình bày mã lệnh JavaScript một cách hiệu quả:

1. Tuân Theo Quy Tắc Indentation (Thụt Lề)#

• Sử Dụng Space hoặc Tab: Lựa chọn giữa sử dụng khoảng trắng (spaces) hoặc tab để thụt lề và giữ sự nhất quán trong toàn bộ dự án. Nhiều dự án sử dụng 2 hoặc 4 khoảng trắng.

• Thụt Lề: Đảm bảo rằng mã được thụt lề một cách nhất quán để dễ đọc.

// 2 spaces indentation function greet(name) { if (name) { console.log(Hello, ${name}); } }

2. Dấu Chấm Phẩy#

• Thêm Dấu Chấm Phẩy: Mặc dù JavaScript tự động thêm dấu chấm phẩy (ASI - Automatic Semicolon Insertion), việc thêm dấu chấm phẩy là một thực hành tốt để tránh lỗi không mong muốn.

const a = 1; const b = 2; const sum = a + b;

3. Tên Biến và Hàm#

• Camel Case: Sử dụng camelCase cho tên biến và hàm (bắt đầu bằng chữ thường và các từ sau viết hoa).

let userName = 'Alice'; function calculateTotal(price, tax) { return price + tax; }

• Pascal Case: Sử dụng PascalCase cho tên lớp và constructor functions (mỗi từ bắt đầu bằng chữ hoa).

class UserProfile { constructor(name) { this.name = name; } }

4. Khoảng Trắng và Dấu Cách#

• Trước và Sau Toán Tử: Thêm một khoảng trắng trước và sau toán tử để cải thiện độ đọc.

let x = 10; let y = 5; let sum = x + y;

• Trước Dấu Mở Dấu Ngoặc: Không thêm khoảng trắng trước dấu mở dấu ngoặc.

function greet(name) { console.log(Hello, ${name}); }

• Cuối Dòng: Đảm bảo có một dòng trống ở cuối tệp để tuân theo quy chuẩn của hầu hết các công cụ và hệ thống điều khiển phiên bản.

5. Định Dạng Đối Tượng và Mảng#

• Đối Tượng: Đặt mỗi thuộc tính trên một dòng mới để dễ đọc hơn.

const person = { firstName: 'John', lastName: 'Doe', age: 30, };

• Mảng: Đặt mỗi phần tử của mảng trên một dòng mới nếu mảng dài hoặc phức tạp.

const numbers = [ 1, 2, 3, 4, 5, ];

6. Ký Tự và Câu Lệnh#

• Câu Lệnh Nếu Đơn: Có thể không cần dấu ngoặc nhọn nếu chỉ có một câu lệnh, nhưng để dễ đọc, nên sử dụng dấu ngoặc nhọn ngay cả khi chỉ có một câu lệnh.

if (x > 10) { console.log('x is greater than 10'); }

• Câu Lệnh Lặp: Đặt dấu ngoặc nhọn và câu lệnh trong vòng lặp ở cùng một dòng nếu có thể.

for (let i = 0; i < 5; i++) { console.log(i); }

7. Sử Dụng Công Cụ Định Dạng Tự Động#

Sử dụng các công cụ định dạng mã tự động như:

• Prettier: Công cụ định dạng mã phổ biến hỗ trợ nhiều ngôn ngữ và cấu hình tùy chỉnh.

• ESLint: Công cụ phân tích mã tĩnh có thể tích hợp với Prettier để kiểm tra và định dạng mã.

Ví Dụ Cấu Hình Prettier

// .prettierrc { "tabWidth": 2, "singleQuote": true, "trailingComma": "all", "printWidth": 80 }

8. Tài Liệu và Chú Giải#

• Chú Giải: Sử dụng chú giải để giải thích các phần quan trọng của mã, nhưng tránh viết chú giải quá nhiều khi mã đã rõ ràng.

// Tính tổng của hai số function add(a, b) { return a + b; }

Tóm Tắt#

• Thụt Lề: Sử dụng khoảng trắng hoặc tab nhất quán.

• Dấu Chấm Phẩy: Luôn thêm dấu chấm phẩy.

• Tên Biến và Hàm: Sử dụng camelCase cho biến và hàm; PascalCase cho lớp.

• Khoảng Trắng: Thêm khoảng trắng quanh toán tử và không trước dấu mở dấu ngoặc.

• Đối Tượng và Mảng: Đặt thuộc tính và phần tử trên các dòng mới nếu cần.

• Ký Tự và Câu Lệnh: Sử dụng dấu ngoặc nhọn nhất quán.

• Công Cụ Định Dạng: Sử dụng công cụ như Prettier và ESLint.

• Tài Liệu: Sử dụng chú giải hợp lý.

Việc tuân theo các quy tắc này giúp mã JavaScript của bạn trở nên rõ ràng, dễ đọc và dễ bảo trì hơn.