Hướng dẫn áp dụng chuẩn mã nguồn JavaScript của Google trong phát triển phần mềm

Trong quy trình phát triển phần mềm chuyên nghiệp, việc duy trì một bộ quy chuẩn mã nguồn (style guide) đồng nhất là yếu tố then chốt để đảm bảo tính dễ đọc và khả năng bảo trì hệ thống. Google JavaScript Style Guide là một trong những bộ quy chuẩn phổ biến nhất thế giới, được đúc kết từ kinh nghiệm vận hành các dự án mã nguồn mở khổng lồ. Việc tuân thủ các quy tắc này không chỉ giúp mã nguồn sạch hơn mà còn giảm thiểu sai sót logic trong quá trình làm việc nhóm.

Quy định về tệp tin và định dạng cơ bản

Trước khi viết những dòng mã đầu tiên, lập trình viên cần tuân thủ các quy tắc về cấu trúc tệp tin:

  • Tên tệp: Phải viết thường hoàn toàn, sử dụng dấu gạch nối (-) hoặc dấu gạch dưới (_) để phân tách các từ. Ví dụ: auth-service.js thay vì AuthService.js.
  • Mã hóa: Luôn sử dụng chuẩn UTF-8.
  • Khoảng trắng: Chỉ sử dụng ký tự khoảng trắng ASCII (0x20). Tuyệt đối không sử dụng phím Tab để thụt đầu dòng. Mỗi cấp độ thụt đầu dòng tương ứng với đúng 2 khoảng trắng.
// Cách đặt tên tệp đúng:
// api-connector.js hoặc data_parser.js

// Cách đặt tên tệp sai:
// ApiConnector.js
// dataParser.js

Quy tắc đặt tên biến và hàm

Google quy định rất chặt chẽ về cách đặt tên (naming conventions) cho từng loại định danh khác nhau để người đọc có thể nhận diện ngay vai trò của chúng:

  • Biến và hàm: Sử dụng kiểu lowerCamelCase.
  • Hằng số: Sử dụng kiểu UPPER_SNAKE_CASE (viết hoa toàn bộ, phân cách bằng dấu gạch dưới).
  • Lớp (Class) và Constructor: Sử dụng kiểu UpperCamelCase (PascalCase).
// Định nghĩa hằng số toàn cục
const DEFAULT_TIMEOUT_MS = 5000;

// Định nghĩa lớp
class AccountManager {
  constructor(accountName) {
    this.accountName = accountName; // Biến thành viên dùng lowerCamelCase
  }

  // Phương thức dùng lowerCamelCase
  validateAccess() {
    return this.accountName !== '';
  }
}

// Biến thông thường
let currentSessionId = 'abc-123';

Cấu trúc khối mã và dấu ngoặc

Quy chuẩn của Google tuân theo phong cách "Egyptian Brackets" (dấu ngoặc kiểu Ai Cập), yêu cầu tính nhất quán cao trong việc ngắt dòng:

  • Không xuống dòng trước dấu mở ngoặc nhọn {.
  • Xuống dòng ngay sau dấu mở ngoặc nhọn {.
  • Xuống dòng trước dấu đóng ngoặc nhọn }.
  • Dấu đóng ngoặc nhọn } chỉ đứng cùng dòng với các từ khóa như else, catch, hoặc while.
function processOrder(items) {
  if (items.length > 0) {
    console.log('Đang xử lý đơn hàng...');
    // Logic xử lý
  } else {
    console.warn('Giỏ hàng trống');
  }
}

Dấu chấm phẩy và giới hạn độ dài dòng

Một điểm khác biệt quan trọng là Google yêu cầu **bắt buộc sử dụng dấu chấm phẩy** (semicolon). Việc dựa vào cơ chế tự động chèn dấu chấm phẩy (ASI) của JavaScript được coi là rủi ro và không được chấp nhận.

Về độ dài dòng, mã nguồn không nên vượt quá 80 ký tự trên một dòng. Quy tắc này giúp lập trình viên có thể mở nhiều cửa sổ mã nguồn cạnh nhau trên màn hình mà không cần cuộn ngang. Các trường hợp ngoại lệ bao gồm các câu lệnh import dài hoặc các URL/đường dẫn tệp tin không thể ngắt quãng.

Sử dụng ES Modules và JSDoc

Trong các dự án hiện đại, Google khuyến khích sử dụng hệ thống Module của ES6 (import/export). Việc sử dụng JSDoc cũng là bắt buộc để cung cấp thông tin về kiểu dữ liệu và mô tả chức năng của mã nguồn.

/**
 * Đại diện cho một sản phẩm trong hệ thống.
 */
export class Product {
  /**
   * @param {string} id Mã định danh sản phẩm.
   * @param {number} price Giá bán hiện tại.
   */
  constructor(id, price) {
    /** @private {string} */
    this.id_ = id;
    /** @private {number} */
    this.price_ = price;
  }

  /**
   * Tính toán giá sau thuế.
   * @param {number} taxRate Thuế suất (ví dụ: 0.1 cho 10%).
   * @return {number} Tổng giá trị.
   */
  calculateFinalPrice(taxRate) {
    return this.price_ * (1 + taxRate);
  }
}

Xử lý lỗi (Error Handling)

Việc bỏ qua lỗi hoặc để các khối catch trống là vi phạm nghiêm trọng quy chuẩn. Mọi lỗi phát sinh cần được xử lý hoặc ghi lại nhật ký (log) một cách tường minh.

try {
  const data = JSON.parse(rawInput);
  updateUI(data);
} catch (err) {
  // Ghi log lỗi rõ ràng thay vì bỏ trống
  console.error('Không thể phân tích dữ liệu JSON:', err);
  showErrorMessage('Đã xảy ra lỗi khi tải dữ liệu.');
}

Tự động hóa quy trình kiểm tra với ESLint

Thay vì kiểm tra thủ công, bạn có thể tích hợp bộ luật của Google vào trình soạn thảo mã nguồn thông qua ESLint. Điều này giúp phát hiện và sửa lỗi định dạng ngay trong lúc gõ code.

1. Cài đặt cấu hình Google:

npm install eslint eslint-config-google --save-dev

2. Cấu hình tệp .eslintrc.json:

{
  "extends": "google",
  "env": {
    "es6": true,
    "node": true
  }
}

Việc áp dụng các quy tắc trên sẽ giúp dự án JavaScript của bạn đạt được tiêu chuẩn chất lượng cao, đồng bộ với cộng đồng lập trình viên quốc tế và dễ dàng mở rộng trong tương lai.

Thẻ: JavaScript Google Style Guide ESLint Coding Standards JSDoc

Đăng vào ngày 17 tháng 6 lúc 18:10