Hướng dẫn quy tắc viết mã (Style Guide) trong JavaScript

Javascript căn bản | 26/03/2025 by Học Javascript

Trong lập trình, viết mã rõ ràng, nhất quán và dễ bảo trì là yếu tố quan trọng giúp code trở nên dễ hiểu và giảm thiểu lỗi. JavaScript là một ngôn ngữ phổ biến nhưng lại có cú pháp linh hoạt, dẫn đến nhiều phong cách viết code khác nhau. Nếu không tuân theo một bộ quy tắc chuẩn, code có thể trở nên lộn xộn, khó đọc và khó bảo trì, đặc biệt là trong các dự án làm việc nhóm.

Chính vì vậy, các style guide ra đời để hướng dẫn lập trình viên tuân theo những quy tắc chuẩn mực trong viết mã, giúp cải thiện chất lượng code và nâng cao hiệu suất làm việc. Một số style guide phổ biến như Airbnb JavaScript Style Guide, Google JavaScript Style Guide, StandardJS đã trở thành tiêu chuẩn được nhiều dự án áp dụng.

Trong bài viết này, mình sẽ tìm hiểu các quy tắc quan trọng trong việc viết mã JavaScript, từ cách đặt tên biến, tổ chức code, đến việc sử dụng công cụ hỗ trợ như ESLint, Prettier để đảm bảo mã nguồn luôn sạch đẹp và chuyên nghiệp.

Giới thiệu về quy tắc viết mã (Style Guide) trong JavaScript

Tại sao cần tuân theo quy tắc viết mã?

Viết mã theo một bộ quy tắc chuẩn giúp lập trình viên duy trì tính nhất quán, dễ đọc và dễ bảo trì trong suốt vòng đời của dự án. Một số lý do quan trọng để tuân theo quy tắc viết mã bao gồm:

Cải thiện tính nhất quán, dễ đọc, bảo trì code: Code rõ ràng, có cấu trúc sẽ giúp lập trình viên khác dễ dàng hiểu và tiếp tục phát triển dự án. Khi quay lại chỉnh sửa sau một thời gian dài, bạn cũng có thể hiểu code nhanh hơn.
Giúp làm việc nhóm hiệu quả hơn: Trong các dự án làm việc nhóm, mỗi lập trình viên có một phong cách code khác nhau. Nếu không có quy tắc chung, code sẽ trở nên khó đọc và không đồng nhất, gây khó khăn khi review code và phát triển tiếp theo.
Giảm thiểu lỗi lập trình: Một số quy tắc như kiểm tra chặt chẽ kiểu dữ liệu, tránh sử dụng biến toàn cục, hoặc viết code rõ ràng giúp tránh được những lỗi phổ biến. Điều này giúp tiết kiệm thời gian debug và nâng cao chất lượng sản phẩm.

Các style guide phổ biến trong JavaScript

Hiện nay, có nhiều bộ quy tắc viết mã JavaScript được các tổ chức và cộng đồng lập trình viên áp dụng rộng rãi. Dưới đây là một số style guide nổi bật:

Airbnb JavaScript Style Guide

Một trong những bộ quy tắc phổ biến nhất, được sử dụng rộng rãi trong các dự án JavaScript hiện đại.
Cung cấp hướng dẫn chi tiết về cách đặt tên biến, sử dụng dấu chấm phẩy, dấu ngoặc đơn, cách viết hàm, v.v.
Được thiết kế để đảm bảo code rõ ràng, dễ đọc và an toàn.

Ví dụ: Theo Airbnb Style Guide, nên sử dụng const hoặc let thay vì var để tránh lỗi hoisting:

//  Đúng
const name = "Alice";  
let age = 25;

//  Sai
var name = "Alice";

Google JavaScript Style Guide

Được sử dụng trong nhiều dự án lớn của Google.
Có quy tắc chặt chẽ về đặt tên biến, cách sử dụng dấu ngoặc nhọn {}, và cách viết comment.

Ví dụ: Theo Google Style Guide, biến boolean nên được đặt tên theo dạng câu hỏi:

//  Đúng
let isVisible = true;
let hasData = false;

//  Sai
let visible = true;
let dataAvailable = false;

StandardJS

Một style guide đơn giản, không yêu cầu dấu chấm phẩy (;), sử dụng dấu nháy đơn (') thay vì dấu nháy kép (").
Tự động kiểm tra và format code mà không cần nhiều cấu hình.

Ví dụ: Theo StandardJS, không cần dấu chấm phẩy (;):

//  Đúng
console.log("Hello World")

//  Sai
console.log("Hello World");

Công cụ hỗ trợ kiểm tra và tự động format code

Bên cạnh việc tuân theo các style guide, lập trình viên có thể sử dụng các công cụ để tự động kiểm tra và format code, giúp đảm bảo mã nguồn luôn nhất quán:

ESLint

Một công cụ kiểm tra lỗi (linter) giúp phát hiện các lỗi cú pháp, lỗi phong cách code và những lỗi tiềm ẩn khác.
Có thể được cấu hình để tuân theo Airbnb, Google hoặc StandardJS Style Guide.

Ví dụ: Kiểm tra lỗi với ESLint

npx eslint myfile.js

Prettier

Một công cụ tự động format code, giúp đảm bảo code luôn có định dạng chuẩn mà không cần chỉnh sửa thủ công.
Có thể kết hợp với ESLint để vừa kiểm tra lỗi vừa format code.

Ví dụ: Format code với Prettier

npx prettier --write myfile.js

Quy tắc đặt tên biến, hàm và hằng số trong JavaScript

Trong lập trình JavaScript, đặt tên biến, hàm và hằng số theo một quy tắc thống nhất giúp code dễ đọc, dễ hiểu và dễ bảo trì. Dưới đây là những quy tắc chuẩn được khuyến nghị trong hầu hết các style guide như Airbnb JavaScript Style Guide, Google JavaScript Style Guide.

Quy tắc đặt tên biến (Variables)

Tên biến là một trong những phần quan trọng nhất trong lập trình. Việc đặt tên biến hợp lý giúp code dễ hiểu và tránh gây nhầm lẫn.

Các quy tắc cơ bản khi đặt tên biến:

Sử dụng camelCase (chữ cái đầu tiên viết thường, chữ cái đầu của mỗi từ tiếp theo viết hoa).
Tên biến cần rõ ràng, có ý nghĩa, mô tả đúng chức năng hoặc dữ liệu mà biến chứa.
Không đặt tên biến chung chung như data, info, temp, vì sẽ khó hiểu khi đọc code.
Hạn chế viết tắt trừ khi đó là những từ viết tắt phổ biến (ví dụ: HTML, URL, ID).
Không sử dụng tiếng Việt trong tên biến để đảm bảo tính thống nhất.
Không sử dụng ký tự đặc biệt hoặc dấu cách trong tên biến.

Ví dụ đúng:

let userName = "John"; // Đặt tên có ý nghĩa, sử dụng camelCase
let totalPrice = 500;  // Thể hiện rõ ràng đây là tổng giá
let isLoggedIn = true; // Biến boolean nên bắt đầu với "is" hoặc "has"

Ví dụ sai:

let username = "John";  // Không theo camelCase
let tp = 500;           // Viết tắt không rõ nghĩa
let Giá_Tiền = 1000;    // Không sử dụng tiếng Việt
let user-name = "Alice"; // Không được chứa dấu gạch ngang

Quy tắc đặt tên hàm (Functions)

Hàm thường thực hiện một hành động cụ thể, vì vậy tên hàm nên bắt đầu bằng động từ để thể hiện rõ chức năng của nó.

Các quy tắc khi đặt tên hàm:

Dùng động từ mô tả hành động của hàm (get, set, fetch, calculate, check, update...).
Sử dụng camelCase để đặt tên hàm.
Tên hàm phải rõ ràng, mô tả chính xác chức năng của nó.
Hạn chế sử dụng từ viết tắt hoặc tên không có ý nghĩa.

Ví dụ đúng:

function getUserData() { ... }   // Hàm lấy dữ liệu người dùng
function calculateTotal(price, tax) { ... } // Hàm tính tổng giá
function checkUserPermission(user) { ... } // Hàm kiểm tra quyền của user

Ví dụ sai:

function getuserdata() { ... }   // Không theo camelCase
function totalCalculate() { ... } // Sai cú pháp đặt động từ lên sau
function process() { ... }        // Quá chung chung, không rõ chức năng

Quy tắc đặt tên hằng số (Constants)

Hằng số (constant) là những giá trị không thay đổi trong suốt quá trình chạy chương trình. Để phân biệt với biến thông thường, hằng số nên được đặt theo kiểu UPPER_CASE với dấu gạch dưới _.

Các quy tắc khi đặt tên hằng số:

Sử dụng chữ in hoa và phân tách bằng dấu _.
Tên hằng số phải rõ ràng, mô tả chính xác ý nghĩa của giá trị.
Hằng số thường được dùng cho giá trị không thay đổi, ví dụ như URL API, số lượng tối đa, thời gian timeout...

Ví dụ đúng:

const MAX_USERS = 1000;   // Số lượng người dùng tối đa
const API_URL = "https://api.example.com"; // URL API chính
const TIMEOUT_DURATION = 5000; // Thời gian timeout (ms)

Ví dụ sai:

const MaxUsers = 1000;    // Không viết hoa toàn bộ
const ApiUrl = "https://api.example.com"; // Không tuân theo quy tắc UPPER_CASE
const timeout = 5000;     // Hằng số nhưng viết như biến thông thường

Quy tắc về cú pháp và định dạng mã trong JavaScript

Tuân thủ quy tắc về cú pháp và định dạng mã giúp code dễ đọc, dễ bảo trì và giảm lỗi. Dưới đây là những hướng dẫn quan trọng để đảm bảo mã JavaScript nhất quán và chuyên nghiệp.

Sử dụng dấu nháy đơn hoặc nháy kép

Trong JavaScript, bạn có thể sử dụng nháy đơn ' hoặc nháy kép " để bao quanh chuỗi. Tuy nhiên, cần duy trì tính nhất quán trong toàn bộ dự án, không nên trộn lẫn cả hai.

Quy tắc:
Chọn một kiểu dấu nháy duy nhất (' hoặc ") và sử dụng đồng nhất.
Khi cần nhúng dấu nháy trong chuỗi, dùng dấu nháy khác để tránh lỗi.
Có thể sử dụng template literals (dấu `) khi cần nội suy biến hoặc viết chuỗi nhiều dòng.

Ví dụ đúng:

let message = "Hello, world!"; // Sử dụng dấu nháy kép nhất quán
let greeting = 'Welcome to JavaScript!'; // Sử dụng dấu nháy đơn nhất quán
let quote = "He said, 'JavaScript is awesome!'"; // Nhúng dấu nháy đơn trong dấu nháy kép
let multiline = `This is 
a multi-line 
string.`; // Dùng template literals khi cần xuống dòng

Ví dụ sai:

let message = 'Hello, world!"; // Không đồng nhất giữa nháy đơn và nháy kép
let text = "It's a beautiful day"; // Lỗi khi dùng dấu nháy đơn trong chuỗi nháy kép mà không escape
let wrongString = "This is a 
multi-line string"; // Lỗi vì xuống dòng không đúng cách

Sử dụng dấu chấm phẩy ;

JavaScript có cơ chế Tự động chèn dấu chấm phẩy (Automatic Semicolon Insertion - ASI), nhưng trong một số trường hợp, việc bỏ dấu ; có thể gây lỗi khó đoán. Vì vậy, luôn thêm dấu ; để tránh lỗi không mong muốn.

Quy tắc:
Luôn sử dụng dấu ; ở cuối câu lệnh để đảm bảo rõ ràng và tránh lỗi.
Không dựa vào ASI vì có thể dẫn đến lỗi cú pháp khó phát hiện.

Ví dụ đúng:

let a = 5;
let b = 10;
console.log(a + b);

Ví dụ sai:

let a = 5  // Không có dấu ;, có thể gây lỗi khi biên dịch
let b = 10 // Nếu viết thêm dòng tiếp theo bắt đầu bằng dấu `(`, có thể gây lỗi
console.log(a + b)

Ví dụ lỗi khi không dùng dấu ;:

function test() {
  return  // JavaScript hiểu return kết thúc ở đây
  {
    name: "Alice"
  };
}

console.log(test()); // Kết quả: undefined (thay vì `{ name: "Alice" }`)

Quy tắc về dấu cách và thụt dòng (Indentation)

Code được viết theo quy tắc dấu cách và thụt dòng hợp lý giúp dễ đọc, dễ bảo trì và tránh lỗi.

Quy tắc:

Dùng 2 hoặc 4 dấu cách để thụt đầu dòng (thường dùng 2 dấu cách theo chuẩn hiện đại).
Không dùng tab (\t) vì có thể gây lỗi hiển thị khác nhau trên các trình soạn thảo.
Dòng quá dài (trên 80 - 100 ký tự) nên xuống dòng để code dễ đọc hơn.
Dấu { nên viết cùng dòng với câu lệnh mở đầu.

Ví dụ đúng (Dùng 2 dấu cách - chuẩn phổ biến nhất):

function sum(a, b) {
  return a + b;
}

if (isValid) {
  console.log("Valid input");
}

Ví dụ đúng (Dùng 4 dấu cách - cũng phổ biến trong một số dự án lớn):

function multiply(x, y) {
    return x * y;
}

if (user.isActive) {
    console.log("User is active");
}

Ví dụ sai (Không thụt dòng đúng chuẩn):

function sum(a,b){return a+b;}  // Code khó đọc vì viết trên cùng một dòng

if(isValid){
console.log("Valid input");   // Không thụt dòng làm giảm tính dễ đọc
}

Xuống dòng khi dòng quá dài (trên 80-100 ký tự):

Cách đúng:

let message = "This is a very long message that should be broken into multiple lines "
  + "to improve readability and maintainability of the code.";

Cách sai (viết một dòng dài, khó đọc):

let message = "This is a very long message that should be broken into multiple lines to improve readability and maintainability of the code.";

Quy tắc về cấu trúc và tổ chức mã trong JavaScript

Một mã nguồn có cấu trúc tốt giúp dễ đọc, dễ bảo trì và hiệu suất tốt hơn. Dưới đây là các quy tắc quan trọng giúp bạn tổ chức mã JavaScript một cách khoa học.

Sử dụng const và let thay vì var

Trong JavaScript, var có phạm vi (scope) toàn cục hoặc phạm vi hàm, dễ gây lỗi biến bị ghi đè hoặc truy cập ngoài ý muốn. Thay vào đó, luôn sử dụng const hoặc let để khai báo biến:

Quy tắc:

Dùng const khi giá trị không thay đổi.
Dùng let khi giá trị có thể thay đổi.
Không dùng var vì nó không có block scope và dễ gây lỗi.

Ví dụ đúng:

const PI = 3.14; // Hằng số, không thay đổi
let userAge = 25; // Biến có thể thay đổi
userAge = 26; // Hợp lệ vì dùng let

Ví dụ sai (Dùng var, dễ gây lỗi):

var PI = 3.14;
var userAge = 25;
userAge = 26; // Không có lỗi nhưng dễ gây nhầm lẫn về scope

Vấn đề với var:

if (true) {
  var message = "Hello";
}
console.log(message); // "Hello" (Không mong muốn vì biến bị rò rỉ ra ngoài khối lệnh)

if (true) {
  let anotherMessage = "Hi";
}
console.log(anotherMessage); // Lỗi: anotherMessage is not defined (Tốt hơn vì không rò rỉ)

Viết code ngắn gọn, tránh lặp lại (DRY - Don’t Repeat Yourself)

DRY (Don't Repeat Yourself) là nguyên tắc giảm thiểu việc lặp lại mã nguồn bằng cách sử dụng hàm, vòng lặp hoặc các phương pháp tái sử dụng code.

Quy tắc:

Dùng hàm hoặc vòng lặp để tránh viết lại cùng một logic.
Tách các phần code có chức năng chung vào hàm hoặc module riêng.

Ví dụ đúng (Dùng hàm để tái sử dụng code):

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("John"));
console.log(greet("Mary"));
console.log(greet("Alice"));

Ví dụ sai (Lặp lại đoạn code giống nhau):

console.log("Hello, John!");
console.log("Hello, Mary!");
console.log("Hello, Alice!");

Ví dụ khác (Dùng vòng lặp thay vì viết lại code nhiều lần):

Cách đúng:

const names = ["John", "Mary", "Alice"];
names.forEach(name => console.log(`Hello, ${name}!`));

Cách sai:

console.log("Hello, John!");
console.log("Hello, Mary!");
console.log("Hello, Alice!");

Sử dụng Object Destructuring thay vì truy cập trực tiếp

Trong JavaScript, Object Destructuring giúp truy xuất thuộc tính của đối tượng một cách ngắn gọn và dễ đọc hơn.

Quy tắc:

Dùng Destructuring để trích xuất giá trị từ object hoặc array.
Giảm lặp lại tên biến, tránh phải viết object.property nhiều lần.

Ví dụ đúng (Dùng Destructuring):

const user = { name: "Alice", age: 30 };

const { name, age } = user; // Lấy giá trị từ object

console.log(name); // "Alice"
console.log(age); // 30

Ví dụ sai (Truy xuất trực tiếp, lặp lại nhiều lần):

const user = { name: "Alice", age: 30 };

console.log(user.name);
console.log(user.age);

Destructuring trong mảng:

const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;

console.log(firstColor); // "red"
console.log(secondColor); // "green"

Destructuring tham số trong hàm:
Cách đúng:

function printUser({ name, age }) {
  console.log(`User: ${name}, Age: ${age}`);
}

const user = { name: "Bob", age: 25 };
printUser(user);

Cách sai (Truy cập trực tiếp trong hàm):

function printUser(user) {
  console.log(`User: ${user.name}, Age: ${user.age}`);
}

Quy tắc về viết điều kiện và vòng lặp trong JavaScript

Khi viết điều kiện và vòng lặp trong JavaScript, viết code ngắn gọn, dễ đọc và tối ưu hiệu suất là điều rất quan trọng. Dưới đây là các quy tắc cần tuân theo.

Viết điều kiện rõ ràng, tránh lồng nhau quá sâu

Nguyên tắc:

Hạn chế điều kiện lồng nhau quá sâu, làm cho code khó đọc.
Nếu chỉ có một dòng trong if, hãy dùng cú pháp rút gọn.
Dùng toán tử logic để đơn giản hóa biểu thức điều kiện.

Cách đúng (Rút gọn điều kiện)

if (!user) return;  
console.log("User exists");

Cách sai (Lồng quá sâu, khó đọc)

if (user) {  
  console.log("User exists");  
}

Ví dụ với toán tử && để đơn giản hóa:

user && console.log("User exists");

Hạn chế sử dụng else không cần thiết:
Cách đúng (Trả về sớm để tránh else):

function getDiscount(price) {
  if (price < 0) return "Invalid price";
  return price * 0.9;
}

Cách sai (Dùng else không cần thiết):

function getDiscount(price) {
  if (price < 0) {
    return "Invalid price";
  } else {
    return price * 0.9;
  }
}

Dùng forEach() hoặc map() thay vì for khi duyệt mảng

Nguyên tắc:

Dùng forEach() khi muốn duyệt qua mảng mà không thay đổi giá trị.
Dùng map() khi cần tạo một mảng mới từ mảng cũ.
Chỉ dùng for hoặc while nếu cần điều khiển index hoặc hiệu suất quan trọng.

Cách đúng (Dùng forEach() để duyệt mảng)

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num));

Cách đúng (Dùng map() để tạo mảng mới)

const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8]

Cách sai (Dùng for khi không cần thiết)

for (let i = 0; i < numbers.length; i++) {  
  console.log(numbers[i]);  
}

Quy tắc về xử lý lỗi và Debugging trong JavaScript

Sử dụng try...catch để bắt lỗi

Nguyên tắc:

Dùng try...catch để bắt lỗi khi làm việc với JSON, API, hoặc đoạn code dễ lỗi.
Không để lỗi không được xử lý, vì có thể làm chương trình dừng đột ngột.

Cách đúng (Dùng try...catch để xử lý lỗi JSON):

try {  
  let data = JSON.parse("{invalidJson}");  
} catch (error) {  
  console.error("Lỗi khi parse JSON:", error.message);  
}
console.log("Lỗi kết nối API"); // Không rõ ràng
console.log("Cảnh báo: Dữ liệu có thể không hợp lệ");

Cách sai (Không bắt lỗi, làm chương trình dừng đột ngột):

let data = JSON.parse("{invalidJson}"); // Lỗi, chương trình bị crash

Không lạm dụng console.log() trong production

Nguyên tắc:

Dùng console.error() cho lỗi nghiêm trọng.
Dùng console.warn() cho cảnh báo.
Dùng logging service như Sentry, LogRocket để lưu log.

Cách đúng (Dùng console.error() và console.warn())

console.error("Lỗi kết nối API");
console.warn("Dữ liệu nhập có thể không hợp lệ");

Cách sai (Lạm dụng console.log())

console.log("Lỗi kết nối API"); // Không rõ ràng
console.log("Cảnh báo: Dữ liệu có thể không hợp lệ");

Công cụ hỗ trợ kiểm tra Style Guide trong JavaScript

Dùng ESLint để kiểm tra lỗi cú pháp và style

Lợi ích của ESLint:

Tự động kiểm tra lỗi code theo quy tắc của JavaScript.
Giúp code nhất quán với team.
Phát hiện lỗi logic, biến không sử dụng, dấu chấm phẩy thiếu,...

Cài đặt ESLint:

npm install eslint --save-dev

Chạy kiểm tra lỗi:

npx eslint yourfile.js

Dùng Prettier để format code tự động

Lợi ích của Prettier:

Tự động căn chỉnh code đúng style guide.
Loại bỏ khoảng trắng dư thừa, thụt dòng sai.
Nhất quán code trong team.

Cài đặt Prettier:

npm install --save-dev --save-exact prettier

Format code tự động:

npx prettier --write yourfile.js

Kết bài

Việc tuân theo quy tắc viết mã (Style Guide) trong JavaScript không chỉ giúp code dễ đọc, dễ bảo trì mà còn nâng cao hiệu suất làm việc nhóm và giảm thiểu lỗi lập trình. Các nguyên tắc như đặt tên biến hợp lý, viết điều kiện rõ ràng, tối ưu vòng lặp, xử lý lỗi đúng cách và sử dụng công cụ hỗ trợ như ESLint và Prettier sẽ giúp code của bạn trở nên chuyên nghiệp hơn.

Dù bạn làm việc cá nhân hay trong một nhóm, việc áp dụng các quy tắc này sẽ giúp đảm bảo sự nhất quán trong codebase, tiết kiệm thời gian sửa lỗi và nâng cao chất lượng sản phẩm. Hãy rèn luyện thói quen viết code sạch, rõ ràng ngay từ bây giờ để trở thành một lập trình viên JavaScript chuyên nghiệp!