Không chờ một linter hoàn hảo: Hành trình migrate lên ESLint V9 và áp dụng mô hình hybrid với Biome

Chia sẻ trải nghiệm của chapter frontend tại Lemonbase khi migrate lên V9 để ứng phó với việc ESLint V8 kết thúc hỗ trợ, đồng thời giải quyết vấn đề hiệu năng bằng cách áp dụng mô hình hybrid với Biome.

Bối cảnh áp dụng

• Thông báo kết thúc hỗ trợ ESLint V8 vào tháng 9/2024 khiến việc migrate lên V9 trở thành điều bắt buộc nếu muốn tiếp tục nhận bản vá bảo mật và sửa lỗi
• Từ V9, cấu hình dựa trên .eslintrc.js bị deprecated và Flat Config trở thành mặc định
• Cần kiểm tra khoảng 400 rule, cấu trúc file cấu hình tách đôi và khả năng tương thích của nhiều plugin

Quá trình migrate

• Công cụ migrate chính thức của ESLint chỉ ở mức bọc bằng @eslint/compat, nên chưa đáp ứng kỳ vọng
• Đã dùng công cụ AI để tạo bản nháp, nhưng phát sinh nhiều rule bị thiếu và vấn đề tương thích
• Cuối cùng phải dùng bảng tính để đối chiếu từng dòng giữa rule của V8 và V9 rồi rà soát toàn bộ

Vấn đề hiệu năng sau khi migrate

• Sau khi nâng lên V9, thời gian lại chậm hơn thêm 30 giây, từ 154 giây → 184 giây
• Rule import/no-cycle chậm hơn 10 lần so với V8 và chiếm 45,8% toàn bộ thời gian
• Rule prettier/prettier cũng chiếm 10,2%, với overhead do parse kép trở thành điểm nghẽn

Áp dụng mô hình hybrid với Biome

• Thay vì thay thế hoàn toàn, nhóm chuyển sang cách tiếp cận “dùng cùng nhau để tập trung vào phần mang lại lợi ích”
• Thay Prettier bằng Biome Formatter, rút thời gian formatting từ 14 giây xuống 2 giây
• ESLint chỉ còn đảm nhiệm các rule tùy biến của dự án

Kết quả cuối cùng

• ESLint V8: 154 giây → ESLint V9: 184 giây
• Chỉ dùng ESLint → hybrid Biome + ESLint: ~20 giây

Điều rút ra

• Khi giao việc migrate cho AI, nên yêu cầu nó lập kế hoạch trước rồi để con người rà soát, đồng thời định nghĩa rõ tiêu chí thành công (ví dụ: kết quả phải khớp với V8)
• Đôi khi con đường nhanh hơn không phải là chờ một công cụ hoàn hảo, mà là kết hợp khéo léo những công cụ có thể dùng ngay lúc này

Điểm cần lưu ý

• Khi dùng đồng thời hai công cụ, cần quản lý cả eslint.config.mjs và biome.json, đồng thời có khả năng phát sinh xung đột giữa các rule
• Cần xác định rõ rule nào do công cụ nào phụ trách, và khi onboarding thành viên mới thì phải giải thích cách phân chia vai trò

[selene]

Có vẻ đây là một bài viết có thể mang lại góc nhìn hữu ích cho những ai vẫn đang gặp vấn đề về hiệu năng linting.

Bên mình cũng có kinh nghiệm giảm thời gian linting từ hơn 200 giây xuống dưới 15 giây khi cải tiến để dùng hybrid giữa oxc(oxlint) và ESLint vào năm ngoái.

Lúc đầu tôi cũng thử migration một cách khá thô bằng AI, nhưng vì cứ liên tục phát sinh các rule bị thiếu hoặc bị biến dạng nên đã cân nhắc việc rà soát từng cái một. Sau đó, tôi dùng AI để viết một script trích xuất các rule được oxc hỗ trợ, rồi cải tiến để chỉ kích hoạt trong ESLint những rule mà oxc không hỗ trợ; nhờ vậy giờ đây việc cập nhật định kỳ các rule mới được hỗ trợ cũng trở nên dễ dàng hơn...

Ban đầu quy trình trên là bán tự động, nhưng giờ đã được định nghĩa thành Skill nên chỉ cần chạy bằng Claude Code là xong, vì thế gánh nặng cũng giảm đi đáng kể nên thấy rất ổn.

[chamchi]

Bạn có nghĩ đến việc thử dùng oxlint và oxfmt thay cho eslint và prettier không?
Trong khi vẫn ánh xạ cấu hình 1:1, tốc độ sẽ nhanh hơn ít nhất hàng chục lần.