Changed Log Cleaner

Extension VS Code hỗ trợ kiểm tra code trước khi commit: quét lỗi ESLint trong toàn repo, phát hiện text chưa i18n trong các file Git đã thay đổi, chèn console.log chi tiết để debug và xóa an toàn các lệnh console độc lập.

Tính năng

• Quét đúng các file đang thay đổi trong Git, kể cả tên file có khoảng trắng.
• Chạy ESLint của chính repo và đưa error/warning vào VS Code Problems theo file.
• Hỗ trợ JavaScript, TypeScript, JSX, TSX, MJS, CJS, MTS và CTS.
• Xóa được console.log nhiều dòng và lời gọi optional chaining.
• Bỏ qua chuỗi, comment, template literal và regular expression.
• Chỉ xóa call độc lập; giữ nguyên call đang được dùng như một giá trị để tránh làm hỏng cú pháp.
• Hiển thị xác nhận trước khi sửa file.
• Thay đổi được áp dụng qua VS Code WorkspaceEdit nên có thể Undo.
• Cảnh báo khi file đã stage cần được stage lại.
• Check i18n trong các file đã thay đổi và log ra file còn text chưa i18n.
• Thêm console.log chi tiết cho selection hoặc biến dưới cursor, tương tự Turbo Console Log.

Quét lỗi ESLint toàn repo

Command ESLint Error Scanner: Quét lỗi ESLint trong repo chạy ESLint được cài trong workspace với config và ignore rule của chính repo. Mặc định command quét .; những file có lỗi hoặc warning sẽ xuất hiện trong bảng Problems, có thể click từng lỗi để mở đúng file và dòng code.

Phím tắt mặc định: Cmd+Option+Shift+E trên macOS hoặc Ctrl+K, Ctrl+Alt+E trên Windows/Linux.

Repo cần có ESLint cục bộ, ví dụ:

npm install --save-dev eslint

Nếu repo dùng command hoặc đường dẫn khác, có thể cấu hình:

{
  "eslintErrorScanner.arguments": ["src", "tests", "--no-cache"],
  "eslintErrorScanner.executablePath": "tools/eslint.js",
  "eslintErrorScanner.includeWarnings": true
}

Xóa log trong file đã thay đổi

Command Changed Log Cleaner: Xóa log trong các file đã thay đổi quét các file Git modified, staged và untracked, sau đó xóa những lệnh console.log(...) độc lập. Log nằm trong biểu thức hoặc được dùng làm giá trị sẽ được giữ lại để tránh làm hỏng code.

Phím tắt mặc định: Cmd+Option+Shift+C trên macOS hoặc Ctrl+K, Ctrl+Alt+C trên Windows/Linux.

Ví dụ trước khi chạy:

export function getUser(id: string) {
  console.log("loading user", id);

  return userRepository.findById(id);
}

Sau khi chạy:

export function getUser(id: string) {
  return userRepository.findById(id);
}

Extension cố ý không xóa trường hợp sau vì call đang được dùng như một giá trị:

const result = console.log("value");
const callback = () => console.log("clicked");

Chạy extension khi phát triển

1. Mở folder này bằng VS Code.
2. Nhấn F5.
3. Trong cửa sổ Extension Development Host, mở một Git repository có file thay đổi.
4. Nhấn Cmd/Ctrl + Shift + P.
5. Chạy Changed Log Cleaner: Xóa log trong các file đã thay đổi, Changed Log Cleaner: Check i18n trong các file đã thay đổi hoặc Changed Log Cleaner: Thêm log chi tiết. Để quét ESLint, chạy ESLint Error Scanner: Quét lỗi ESLint trong repo.

Command cũng xuất hiện ở thanh tiêu đề của Source Control.

Phím tắt

Extension dùng chord hai bước để hạn chế trùng với shortcut phổ biến. Nhấn tổ hợp đầu tiên, thả ra, rồi nhấn tổ hợp thứ hai:

Keybinding do người dùng khai báo trong VS Code luôn được ưu tiên hơn keybinding mặc định của extension. Có thể đổi hoặc bỏ shortcut tại Preferences: Open Keyboard Shortcuts bằng cách tìm Changed Log Cleaner.

Thêm log chi tiết

Command Changed Log Cleaner: Thêm log chi tiết chạy trong editor hiện tại. Bôi đen một biến/expression hoặc đặt cursor lên biến, sau đó chạy command từ Command Palette, editor title hoặc menu chuột phải.

Phím tắt mặc định: Cmd+Option+Shift+L trên macOS hoặc Ctrl+K, Ctrl+Alt+L trên Windows/Linux.

Ví dụ khi chọn user.name ở dòng 12 trong src/user.ts, extension sẽ chèn dòng bên dưới:

console.log("[src/user.ts:12] user.name:", user.name);

Command hỗ trợ nhiều cursor/selection và sẽ giữ indentation của dòng hiện tại.

Check i18n

Command Changed Log Cleaner: Check i18n trong các file đã thay đổi chỉ đọc file và log kết quả ra Output Channel Changed Log Cleaner. File nào còn text có khả năng hiển thị cho user nhưng chưa nằm trong t(...), i18n.t(...) hoặc translate(...) sẽ được liệt kê kèm dòng và preview ngắn.

Phím tắt mặc định: Cmd+Option+Shift+I trên macOS hoặc Ctrl+K, Ctrl+Alt+I trên Windows/Linux.

Ví dụ sẽ bị log:

const title = "Save changes";
return <button>Submit form</button>;

Ví dụ được xem là đã i18n:

const title = t("settings.saveChanges");
return <button>{i18n.t("settings.submitForm")}</button>;

Cấu hình

Ví dụ xóa cả console.debug và console.info:

{
  "changedLogCleaner.consoleMethods": ["log", "debug", "info"]
}

Test

Project không có runtime dependency. Test chạy trực tiếp bằng Node.js:

npm test
npm run check

Test bao gồm scanner và một Git repository tạm với file modified, staged, untracked, ignored và deleted.

Đóng gói VSIX

Tạo extension mới

Đặt icon theo slug của extension, ví dụ media/check-i18n.png, rồi chạy:

npm run extension:new -- --name check-i18n

Script tự tạo profile extension-profiles/check-i18n.json, đặt displayName là Check i18n, dùng icon media/check-i18n.png và đặt version ban đầu 0.1.0. Profile mới tự xuất hiện trong menu chọn khi build hoặc release. Có thể ghi đè giá trị được suy ra:

npm run extension:new -- \
  --name check-i18n \
  --display-name "Check i18n" \
  --icon media/custom-icon.png \
  --description "Check missing i18n in Git-changed files."

name là định danh trên Marketplace. Khi chỉ thêm tính năng vào extension đang có, không chạy extension:new và không đổi name.

Build thử

Xem các extension đã khai báo:

npm run extension:list

Build VSIX mà không đổi version:

npm install
npm run package:vsix

Terminal sẽ hiển thị danh sách profile. Nhập số hoặc name của extension cần build. Script chỉ đồng bộ profile đã chọn vào package.json, chạy test rồi tạo VSIX.

Trong CI hoặc khi không muốn hiện menu, truyền profile trực tiếp:

npm run package:vsix -- --extension log-turbo

Để build extension ESLint Error Scanner mới:

npm run package:vsix -- --extension eslint-error-scanner

File <name>-<version>.vsix sẽ được tạo ở thư mục gốc, ví dụ log-turbo-0.1.0.vsix.

Cài thử:

code --install-extension log-turbo-0.1.0.vsix

Tăng version và build

Các command sau cũng hiển thị menu chọn extension. Sau khi chọn, script chạy test, tăng version riêng trong profile đó, đồng bộ package.json và package-lock.json, sau đó tạo VSIX:

npm run release:patch  # 0.1.0 -> 0.1.1
npm run release:minor  # 0.1.1 -> 0.2.0
npm run release:major  # 0.2.0 -> 1.0.0

Có thể chọn thẳng profile khi release:

npm run release:patch -- --extension log-turbo

Nếu test hoặc đóng gói thất bại, version và manifest sẽ được khôi phục.

Publish Marketplace

vsce login <publisher-id>
vsce publish

Mỗi lần cập nhật:

vsce publish patch

Lưu ý về file staged

Nếu extension sửa một file đã được stage, Git index vẫn đang giữ nội dung cũ. Hãy kiểm tra Source Control và chạy git add lại file trước khi commit.

Giới hạn an toàn

Extension chỉ xử lý dạng truy cập trực tiếp:

console.log("message");
console?.log?.("message");

Các dạng window.console.log(...), console["log"](https://github.com/DiepHoang19/vscode-extensions/blob/HEAD/...) hoặc call nằm trong biểu thức được giữ nguyên để tránh sửa code quá mức.

License

MIT