Phone:

+84 344184570

Email:

nguyentamhoang12a@gmail.com

© 2025 Hoang Nguyen.

Posted by:

Hoang Nguyen

Category:

Study

Posted on:

24 June 2025

🧙‍♂️ [Case Study] Tự Động Kiểm Tra Lỗi Chính Tả Trong File i18n Với CSpell + Glob

🧙‍♂️ [Case Study] Tự Động Kiểm Tra Lỗi Chính Tả Trong File i18n Với CSpell + Glob

🧩 Vấn Đề: Dịch Sai Trong i18n

1export default {
2  ja: {
3    heading: 'X | Your Time, Our Priority',
4    catchCopy0: 'Until 17:00',
5    catchCopy1: 'Shortest on order',
6    ...
7  }
8} as const;

Trong dự án sử dụng i18n riêng (không dùng thư viện ngoài), mỗi component đều có file .i18n.ts với cấu trúc tương tự:

Tuy nhiên, team gặp vấn đề:

  • Số lượng file .i18n.ts lớn, mỗi file có nhiều key-value.

  • Dễ dịch sai chính tả hoặc thiếu dấu câu.

  • Không thể kiểm tra thủ công từng key.

🚀 Giải Pháp: Viết Script Tự Động Kiểm Tra Với cspell

Chúng tôi đã viết một script Node.js để tự động:

  • 1.Tìm tất cả file .i18n.ts bằng glob.

  • 2.Parse nội dung phần ja.

  • 3.Flatten toàn bộ object thành dạng path.key: value.

  • 4.Dùng cspell để kiểm tra chính tả từng value.

  • 5.Ghi log chi tiết vào file.


🛠️ Bước 1: Dò Tất Cả File .i18n.ts

1const { glob } = require("glob");
2
3const files = glob.sync("../account-web-us/src/**/*.i18n.ts");

Kết quả: Tìm thấy toàn bộ file i18n trong source code.


🧱 Bước 2: Parse Object ja và Flatten

1function extractJaAllKeys(filePath) {
2  const content = readFileSync(filePath, "utf-8");
3
4  const cleaned = content
5    .replace(/^export default\s*/, "")
6    .replace(/as const;?\s*$/, "");
7
8  const obj = eval("(" + cleaned + ")");
9  const ja = obj.ja;
10
11  const results = [];
12  flattenObject(ja, ["ja"], results, filePath);
13
14  return results;
15}
16
17

Ý tưởng: Dùng eval cẩn thận để parse object tĩnh, rồi flatten để có mảng { key, value }.


🔍 Bước 3: Kiểm Tra Chính Tả Với cspell

1function checkSpell(text) {
2  const result = execSync(`echo "${text}" | npx cspell stdin`, {
3    encoding: "utf8",
4    stdio: ["pipe", "pipe", "pipe"],
5  });
6}

Gợi ý: cspell sẽ trả về các dòng lỗi dạng:

1text:1:5 - Unknown word (shippng)

Parse các dòng lỗi này để lấy từ sai.


✨ Output: Ghi Log Chi Tiết

Chúng tôi ghi 2 loại log:

  • spell-invalid.txt: Những dòng có từ sai chính tả.

  • error.txt: Những file bị lỗi parse hoặc không có object ja.

Mỗi log đều ghi đầy đủ:

1❌ File: /path/to/file.i18n.ts
2🔸 Key: ja.catchCopy1
3🔸 Text: "Shippng now"
4🔻 Misspelled: shippng

📦 Full Script: Tích Hợp Hoàn Chỉnh

Toàn bộ logic được đóng gói vào 1 script duy nhất chạy qua lệnh node spellcheck.js.

✅ Có xử lý lỗi

✅ Ghi log rõ ràng

✅ Ignore từ được whitelisted (ví dụ "ABC")


📊 Kết Quả

  • Chạy qua hơn 500 file .i18n.ts

  • Phát hiện hàng trăm lỗi chính tả nhỏ: thiếu s, viết sai shipment, viết nhầm productt, v.v.

  • Giảm được đáng kể lỗi dịch không chính xác gây ảnh hưởng UX


🤝 Tổng Kết

Tự viết một hệ thống kiểm tra i18n như trên:

  • Hiệu quả nhanh gọn

  • Không phụ thuộc framework

  • Có thể extend dễ dàng cho zh, en, vi,...

Bạn hoàn toàn có thể áp dụng vào bất kỳ dự án nào có quản lý localization riêng, giúp bảo vệ chất lượng nội dung trên giao diện người dùng.