Tối ưu hóa Code với 10 Linting Tool cho CSS và JavaScript

Linting tool có thể giúp developer tối ưu hóa code và viết code chất lượng cao. Linting là một quy trình kiểm tra code tìm lỗi trong code nguồn, và đánh dấu các bug tiềm năng. Đa số công cụ linting (linter) sử dụng kỹ thuật phân tích code tĩnh. Nói cách khác, code được kiểm tra mà không cần phải chạy.

Các bạn có thể lint vào nhiều dịp khác nhau, như ngay trong lúc bạn viết code, hoặc khi bạn save file, khi bạn ủy thác các thay đổi, hoặc ngay trước khi đưa code vào production. Dù bạn đi theo workflow nào, bạn cần phải lint thường xuyên để tránh nhiều tình huống dở khóc dở cười trong tương lai.

Linter không đơn thuần chỉ là công cụ ngăn ngừa lỗi, chúng còn có thể tìm được các lỗi khó nhận biết, giúp ích rất nhiều cho việc debug. Trong bài viết này, chúng tôi se điểm qua 10 công cụ linting mà bạn có thể dùng trong CSS và JavaScript.

1. CSSLint

CSSLint có thể khiến bạn “đau cả đầu”, nhưng thay vào đó “code của bạn sẽ tốt hơn nhiều”. CSSLint hiện đang đi đầu thị trường CSS linting. Công cụ được viết trên Java Script, mã nguồn mở, và đi kèm với vô vàn lựa chọn tùy chỉnh.

CSSLint cho phép bạn lựa chọn test loại lỗi và cảnh báo nào (tương thích, hiệu suất, trùng lặp,…) và hiệu lực hóa cú pháp pháp CSS dựa theo quy tắc mà bạn đã chọn.

Không chỉ hỗ trợ trình duyệt, công cụ còn có giao diện dòng lệnh, và bạn có thể tích hợp vào hệ thống tự build nữa.

2. SublimeLinter CSSLint

CSSLint là một CSS linter ít có đối thủ. Đó cũng là lý do SublimeLinter linting framework xây dựng CSS linting plugin trên đó. SublimeLinter là một SublimeText plugin cung cấp cho người dùng một công cụ lint code (CSS, PHP, Python, Java, Ruby,…) ngay trong SublimeText editor.

Trước khi bạn cài đặt SublimeLinter CSSLint plugin, bạn cần phải cài đặt CSSLint dưới dạng Node.js module. Điều tuyệt vời về công cụ tuyệt vời này là bạn chỉ cần phải thiết lập tùy chỉnh một lần. Hoặc nếu bạn đã thấy mặc định dùng tốt rồi thì việc này cũng không cần thiết. Đồng thời, bạn luôn có thể đưa các cảnh báo và thông báo liên quan vào Sublime Text editor.

3. StyleLint

StyleLint giúp developer tránh lỗi trong CSS, SCSS, hoặc bất cứ cú pháp nào mà PostCSS phân tích được. StyleLint kiểm tra hơn một trăm quy tắc, và bạn có thể lựa chọn chuyển qua cái bạn muốn (xem một config ví dụ).

Nếu bạn không muốn tạo cài đặt riêng, các bạn cũng có thể sử dụng config chuẩn viết sẵn chứa 60 quy tắc StyleLint. StyleLint là một công cụ khá linh hoạt, có thể mở rộng bằng plugins, và được dùng theo 3 hình thức: command line tool, Node.js module, hoặc PostCSS plugin.

4. W3C CSS Validator

Mặc dù CSS Validator của W3C thường không được biết đến như công cụ linting, nhưng nó vẫn cho phép người lập trình kiểm tra mã nguồn CSS với chuẩn chính thức của W3C. W3C xây dựng validator với mục đích cung cấp một công cụ tương tự với Lint program checker cho hệ ngôn ngữ C.

Đầu tiên, họ xây dưng HTML markup validator mà sau này là đến CSS validator. CSS validator của W3C không có nhiều tùy chỉnh như CSSLint, nhưng lại trả kết quả chi tiết hơn, kèm theo lời nhắn và thông báo lỗi dễ hiểu.

Một tính năng nữa, bạn cũng có tể kiển tra code theo chuẩn mobile web gần đây của W3C. Trong thời đại bùng nổ mobile web này, đây là một tính năng khá tiện dụng.

5. Dirty Markup

Dirty Markup dọn dẹp, định dạng, và phê kiểm code HTML, CSS, và JavaScript. Đây là một công cụ khá hay nếu bạn thích giải pháp nhanh và thiết kế đơn giản. Dirty Markup hiện tin nhắn và thông báo lỗi theo thời gian thực ngay trong lúc bạn viết hoặc đều chỉnh code trong editor.

Khi bạn nhấn nút “Clean”, công cụ sẽ đồng loạt sửa lỗi cú pháp, tinh chỉnh định dạng, nhưng sẽ giữ nguyên các cảnh báo cho phép bạn giải quyết tùy ý. Khi kiểm tra, bạn không thể chọn quy tắc, nhưng cả ba loại file đều có tùy chỉnh cho phép bạn quyết định định dạng của kết quả đã clean.

6. JSLint

JSLint được Douglas Crockford ra mắt lần đầu năm 2002, và đến giờ nó vẫn chưa mất đi vị thế của mình. Vì thế, bạn có thể tin tưởng đây là một công cụ linting trên JavaScript ổn định và đáng tin cậy.

JSLint có thể xử lý mã nguồn JavaScript và JSON text, công cụ đi kèm với một tùy chỉnh có sẵn đi theo chuẩn JS của Crockford trong cuốn sách của ông JavaScript: The Good Parts.

JSLint có một vài tùy chỉnh để bạn chọn lựa, nhưng bạn không thể thêm quy tắc tùy chỉnh riêng. JSLint đã bắt đầu thêm chuẩn ECMAScript mới nhất. Bạn có thể kiểm tra tiến độ thực thi ES6 hiện nay tại đây.

7. JSHint

JSHint là một fork rất phổ biến của JSLint, và được sử dungj bởi nhiều công ty công nghệ mới như Facebook, Twitter, và Medium.

JSHint là một dự án của cộng đồng bắt đầu từ nỗ lực tạo ra một phiên bản JSLint nhiều tùy chỉnh hơn. JSHint cho phép lập trình viên tùy chỉnh mọi tùy chỉnh linting, và đặt các tùy chỉnh đã cá nhân hóa vào một file riêng, điều này giúp công cụ dễ sử dụng lại, và phù hợp cho các dự án lớn.

JSHint không những lint được vanilla JavaScript, mà còn có các hỗ trợ mới lạ cho nhiều thư viện JS phổ biến, như jQuery, Mootools, Mocha, và Node.js.

8. ESLint

ESLint là công cụ mới nhất trên bản đồ JavaScript. Tính chất linh hoạt cao của công cụ đã làm nên danh tiếng của công cụ. Ngoài khả năng tùy chỉnh vô vàn quy tắc linting phức tạp, công cụ còn có thể tích hợp vào tất cả code editor lớn, nhưng bạn cũng có thể dễ dàng mở rộng tính năng bằng cách thêm plugin.

Với việc chỉ rõ tùy chọn phân tích, bạn cũng có thể lựa chọn chuẩn ngôn ngữ JS nào được hỗ trợ trong quá trình linting. Nói cách khác, bạn có thể kiểm tra script theo cấu trúc ECMAScript 5 mặc định, ECMAScript 6, ECMAScript 7, và JSX.

9. JSCS

JSCS, JavaScript Code Style, là một pluggable code linter cho JavaScript kiểm tra quy tắc định dạng code.

Mục tiêu của JSCS là cung cấp một công cụ ép buộc (có hệ thống) theo một hướng coding style nhất định. Mặc dù JSCS không kểm tra lỗi, công cụ vẫn được nhiều ông lớn trong nhành tin dùng như Google, AirBnB, và AndularJS, và nó giúp deverloper giữ mã nguồn nhất quán, dễ đọc.

JSCS tự động sửa lỗi định dạng, bạn không cần phải lần lượt kiểm tra từng cái một, giúp tiếm kiệm rất nhiều thời gian. Công cụ có nhiều preset của nhiều dự án lớn, như preset về cidung style của Google, Grunt, hoặc Wikimedia, mà bạn có thể áp dụng dễ dàng vào dự án của mình, bạn cũng có thể tạo tùy chỉnh riêng.

10. StandardJS

StandardJS, JavaScript Standard Style, là một code style linter tương tự JSCS, nhưng đơn giản và dễ dùng hơn. StandardJS là một lựa chọn hoàn hảo cho những bạn muốn một công cụ hiệu quả chạy ngay, mà không muốn phí thời gian cho tinh chỉnh.

StandardJS đi theo các quy tắc định dạng viết sẵn, giá trị cốt lõi của công cụ là giữ cho coding workflow không đi trật hướng (vì thế bạn không thể thay đổi quy tắc mà bạn không thích. Chỉ nên chọn StandardJS khi bạn không muốn tùy chỉnh, và muốn quy định một code style cố định cho toàn bộ JavaScript file.

Techtalk via hongkiat