Linting JavaScript với JSHint

Xơ trong lập trình máy tính là quá trình mã phân tích tĩnh để tìm các vấn đề như cú pháp sai và sử dụng mã iffy. Công cụ được sử dụng để nhuộm màu được gọi là xơ vải hoặc là kẻ nói dối. Một trong những yếu tố có sẵn cho JavaScript hiện nay là JSHint.

JSHint có sẵn cho nhiều nền tảng. Công cụ web trực tuyến mà hầu hết chúng ta đều quen thuộc là tại jshint.com. Ngoài ra còn có công cụ dòng lệnh thông qua Node.js, một API JavaScript, nhiều trình soạn thảo văn bản và các plugin IDE cho JSHint. Bạn có thể xem danh sách đầy đủ các công cụ JSHint có sẵn cho các môi trường khác nhau trong trang tải xuống và cài đặt của trang web JSHint.

Theo trang web của mình, hai cách phổ biến nhất mà công cụ JSHint được sử dụng là công cụ dòng lệnh và API. Chúng ta hãy xem làm thế nào bạn có thể tải xuống sử dụng cả hai, cùng với các lựa chọn tối ưu khác mà các công cụ cung cấp.

Thông qua công cụ dòng lệnh

(1) Nếu bạn chưa cài đặt Node.js trong máy tính của mình, thì bạn sẽ phải truy cập trang web của nó và tải xuống và cài đặt nó trước. Để kiểm tra xem Node.js đã được cài đặt thành công chưa, bạn có thể chạy lệnh chuyển đổi chiều trong giao diện dòng lệnh (CLI) và nó sẽ hiển thị cho bạn phiên bản của Node.js trong máy tính của bạn (hoặc bạn chỉ có thể chạy lệnh chiều và hãy xem chuyện gì xảy ra).

(2) Để cài đặt công cụ JSHint, hãy chạy lệnh npm cài đặt jshint trong CLI. Nếu bạn muốn kiểm tra xem JSHint đã được cài đặt thành công chưa, hãy chạy lệnh jshint -version để xem phiên bản của nó. Khi bước này kết thúc, quá trình cài đặt hoàn tất.

(3) Để chạy công cụ, hãy chuyển đến thư mục trong CLI nơi tệp JavaScript của bạn (giả sử test.js) là và chạy lệnh jshint test.js. Kết quả phân tích của công cụ về mã JavaScript của bạn sẽ xuất hiện (đại loại như thế này):

Thông qua API JavaScript

(1) Tải xuống tệp nén từ liên kết GitHub này và giải nén nó. bên trong xa thư mục bạn sẽ tìm thấy jshint Tệp JS (thư viện API).

(2) Để sử dụng API, hãy thêm jshint Tập tin JS cho dự án của bạn và liên kết nó với trang của bạn. API có thể được truy cập trong mã JavaScript bằng cách sử dụng hàm / đối tượng được gọi là NHIỆM VỤ. Dưới đây là mã HTML mẫu nơi API JavaScript của JSHint được sử dụng để phân tích mã JavaScript có trong nguồn mảng và hiển thị kết quả phân tích trên trang.

(3) Chúng tôi đã vượt qua nguồn mảng chứa mã nguồn JavaScript cần phân tích và tùy chọn đối tượng chứa các tùy chọn linting (chúng ta sẽ đi vào tùy chọn trong thời gian ngắn) làm tham số cho NHIỆM VỤ chức năng. Kết quả phân tích (một đối tượng JSON) được tìm nạp từ NHIỆM VỤthuộc tính chức năng được gọi là dữ liệu.

(4) JSON.opesify được sử dụng để chỉ hiển thị ở đây, để hiển thị kết quả được trả về từ dữ liệu chức năng ở định dạng chuỗi trên trang. Các làm đẹp Chuỗi JSON trông như thế này. Các phần được tô sáng là các lỗi được tìm thấy bởi JSHint trong các câu đơn giản.

Tùy chọn linting

Tùy chọn linting cho phép chúng tôi cấu hình quá trình linting. Chúng tôi có thể chỉ định loại lỗi hoặc suy yếu cần phải được xử lý và loại nào không. Trong ví dụ trước, hai tùy chọn linting đã được sử dụng là hoàn tác và không sử dụng.

hoàn tác cờ tùy chọn không được khai báo các biến và không sử dụng sẽ gắn cờ các biến đã được khai báo nhưng không bao giờ được sử dụng. Giống như những điều này có nhiều tùy chọn khác mà bạn có thể thấy danh sách trong trang này, nếu bạn muốn tìm kiếm một tùy chọn, có một thanh tìm kiếm được cung cấp ở góc trên cùng bên phải.

Nếu bạn đang sử dụng công cụ CLI qua Node.js, bạn có thể viết các tùy chọn linting bên trong một pack.json tập tin thuộc tài sản jshintConfig trong cùng một thư mục. Bạn cũng có thể thêm các tùy chọn làm chỉ thị trong mã JavaScript.

 // - test.js - / * jshint undef: true, chưa sử dụng: true * / foo (); a = 7;

Có nhiều cách hơn để định cấu hình các tùy chọn linting trong dự án của bạn dựa trên công cụ bạn đang sử dụng. Kiểm tra các cách khác nhau cho cấu hình đây.