Codelyzer: Bộ Rule TSLint Cho Angular Static Analysis

Tìm Hiểu Codelyzer: Phân Tích Tĩnh Cho Angular

Codelyzer là một plugin TSLint bổ sung các rule phân tích tĩnh dành riêng cho Angular, kiểm tra những thứ như cách đặt tên component selector, cách dùng lifecycle interface, và các template binding. Codelyzer hoạt động trong dự án Angular CLI, NativeScript, và ứng dụng Ionic, và được nối vào qua file tslint.json extend bộ rule của nó, theo README.

Các Rule Chính Cho Chất Lượng Code Angular

• ✓component-class-suffix và directive-class-suffix kiểm tra tên class Angular phải kết thúc bằng Component hoặc Directive, hoặc một hậu tố tuỳ chỉnh bạn cấu hình.
• ✓component-selector và directive-selector áp quy ước đặt tên và tiền tố cho selector, ví dụ yêu cầu element dạng kebab-case hoặc attribute dạng camelCase.
• ✓Các rule về lifecycle — contextual-lifecycle, no-conflicting-lifecycle, use-lifecycle-interface — bắt các lifecycle hook của Angular bị dùng sai hoặc thiếu interface.
• ✓Các rule về template — template-banana-in-box, template-no-negated-async, template-use-track-by-function, template-cyclomatic-complexity — gắn cờ những lỗi template Angular thường gặp.
• ✓Các rule template liên quan đến accessibility, như template-accessibility-alt-text và template-accessibility-valid-aria, được liệt kê là Experimental trong bảng trạng thái rule của README.
• ✓no-unused-css gắn cờ các CSS selector trong stylesheet của component mà không khớp với gì trong template; rule này cũng ở trạng thái Experimental.
• ✓Cấu hình nâng cao qua file .codelyzer.js cho phép gắn thêm các hàm transform template và style tuỳ chỉnh, ví dụ biên dịch Sass trước khi phân tích, theo ví dụ trong README.

Cách Tích Hợp Codelyzer Vào Dự Án

Cách cài Codelyzer khác nhau tuỳ setup. Dự án Angular CLI có sẵn Codelyzer mà không cần làm gì thêm. README nói chạy ng lint trên một dự án tạo bằng ng new sẽ áp các rule Angular của Codelyzer ngay, vì component mặc định đã theo đúng style guide. Starter angular-seed cũng gắn sẵn Codelyzer vào script npm run lint riêng của nó, theo README. Với dự án tự cấu hình, cài Codelyzer trực tiếp bằng npm i codelyzer tslint @angular/compiler @angular/core, hoặc dùng preset tslint-angular (npm i tslint-angular) nếu bạn muốn extend một config thay vì tự liệt kê từng rule. Cách nào cũng cần một file tslint.json extend "codelyzer" hoặc "tslint-angular", và bạn có thể cài Codelyzer global bằng npm install -g codelyzer nếu không muốn gọi qua node_modules/.bin/tslint.

Cấu Hình Và Chạy Codelyzer

Cấu hình nằm trong tslint.json. Extend "codelyzer" rồi bật từng rule — component-class-suffix, component-selector, no-input-rename, template-banana-in-box, và hàng chục rule khác — sẽ cho bạn các kiểm tra hiểu Angular; ví dụ custom installation trong README liệt kê hơn 30 rule như vậy. README còn có một mục Recommended configuration riêng, dựa trên Angular Style Guide, đặt tiền tố selector và hậu tố class dưới dạng mảng để bạn khớp với quy ước đặt tên của dự án mình. Để tắt một rule trong một file thay vì toàn dự án, thêm comment tslint:disable:rule-name phía trên đoạn code liên quan. Với template hoặc style không chuẩn, kể cả Sass, README có một setup nâng cao: một file .codelyzer.js ở gốc dự án, nơi bạn định nghĩa hook transformStyle và transformTemplate, cùng ký hiệu interpolation tuỳ chỉnh và danh sách predefinedDirectives cho những tham chiếu template mà Codelyzer không tự suy ra được.

Các Lựa Chọn Thay Thế Hiện Đại Cho Angular Linting

Câu Hỏi Thường Gặp Về Codelyzer

Vấn đề Codelyzer giải quyết

Các dự án Angular lint bằng TSLint không tự động có rule hiểu Angular — một cấu hình TSLint thông thường bắt được lỗi TypeScript nhưng không biết thế nào là một component selector hợp lệ, một lifecycle hook được cài đặt đúng, hay một template binding an toàn. Codelyzer lấp khoảng trống đó bằng cách đóng gói các quy ước của Angular Style Guide — tiền tố selector, hậu tố class, cách dùng lifecycle interface, kiểm tra template — thành một bộ rule TSLint, thay vì để từng team tự viết lấy.

Trường hợp sử dụng tốt nhất

• •Team Angular vẫn dùng TSLint muốn style guide của framework — tiền tố selector, hậu tố class, lifecycle interface — được áp tự động thay vì chỉ bắt lỗi khi code review.
• •Ứng dụng NativeScript hoặc Ionic xây trên Angular, vì README liệt kê rõ cả hai được hỗ trợ bên cạnh web app thông thường.
• •Các dự án dùng starter angular-seed, vì README nói starter này đã gắn sẵn Codelyzer vào script npm run lint của nó.
• •Team cần loại trừ rule theo từng file: marker tslint:disable tắt một rule, như template-use-track-by-function, mà không tắt cả linter.

Ai nên dùng — và ai nên bỏ qua

Hãy thử Codelyzer nếu dự án Angular của bạn đang dùng TSLint và bạn muốn style guide của framework được áp tự động mà không phải tự viết rule — các kiểm tra selector, lifecycle, template cùng lối thoát tslint:disable khiến nó khá đầy đủ để dùng ngay. Bỏ qua nếu bạn bắt đầu dự án mới hoặc đang rời TSLint: chính README của Codelyzer hướng người dùng ESLint sang angular-eslint, nên một dự án mới ít lý do để chọn một bộ rule chỉ chạy trên TSLint lúc này.

Repo liên quan