Cài đặt và Sử dụng Linter cho JavaScript

Linter for Javascript

1. Linter là gì? Có ăn được không?

Linter là từ chỉ chung một nhóm phần mềm có nhiệm vụ đọc code của bạn và cho bạn biết đoạn code đó có lỗi gì về cú pháp hoặc “phong cách” (code style) hay không. Một số linter cho JavaScript tiêu biểu có thể kể đến là JSLint, JSHint, và ESLint. Về bản chất thì 3 thằng này giống nhau. Trong bài viết này tôi chỉ sẽ tập trung vào ESLint.

Ta hãy cùng xem qua một ví dụ dùng ESLint. Giả sử ta có một file bad.js với nội dung:

Giả sử bạn đã cài đặt NodeJS và ESLint, chạy eslint --init để thiết lập một số tính năng cơ bản, sau đó chạy eslint bad.js để kiểm định chất lượng code ta vừa viết ở trên:

ESLint error

Có thể thấy ngay rằng ngoài việc bắt lỗi code style vô thưởng vô phạt (thiếu dấu chấm phẩy – Missing semicolon), linter còn giúp ta phát hiện được lỗi code thừa ("two" is defined but never used), thiếu từ khóa var khi khai báo biến (“one” is not defined), và lỗi chính tả khi ta muốn gọi biến one (“onee” is not defined).

Thế nhưng sức mạnh thật sự của một linter là khả năng tích hợp vào text editor:

ESLint text editor integration

Hình trên là ESLint đã được tích hợp vào vim thông qua plugin Syntastic. Ngay khi save file, ta sẽ thấy ngay code có lỗi gì và biết chính xác chúng ở hàng nào, cột nào.

Đây chỉ là ví dụ đơn giản nhất. ESLint có khả năng mở rộng (extensibility) rất cao, và hiện tại JSX lẫn ES6 đều đã được hỗ trợ rất tốt.

2. Tại sao tôi phải quan tâm?

Thứ nhất, linter cho JavaScript giúp ta tiết kiệm (rất nhiều) thời gian. Thay vì phải chạy test hoặc chạy thẳng code, ta có thể biết lỗi ngay từ lúc save file trên text editor và sửa ngay tại đó.

Thứ hai, một file linter config sẽ giúp duy trì một chuẩn chung về code style cho các lập trình sư làm việc trên cùng một dự án. Công ty Airbnb có hẳn một tài liệu quy chuẩn cho JavaScript cả ES5 lẫn ES6, và họ có tạo hẳn một package chứa ESLint config để ràng buộc (enforce) những chuẩn họ đưa ra. Thậm chí ta có thể thêm một bước “linting” vào trong build process để cấm deploy nếu linter tìm ra bất cứ lỗi nào trong code.

3. Ok ông nói bùi tai phết, giờ tôi muốn dùng phải làm sao?

Thì… google chứ làm sao :)

Nói nghiêm túc thì hiện tại có quá nhiều text editor và hệ điều hành trên thị trường hiện nay trong khi tôi chỉ dùng vim nên không thể liệt kê từng bước cho từng chương trình được. Tuy nhiên, nguyên tắc hoạt động của chúng nhìn chung có thể nói là giống nhau. Ta sẽ cần:

  • Cài một plugin hỗ trợ linting cho text editor. Ví dụ:
    • Syntastic cho vim
    • Flycheck cho emacs
    • SublimeLinter cho Sublime Text
  • Cài đặt để nhúng một linter cụ thể vào plugin hỗ trợ linting ở trên. Ví dụ:
  • Cài linter để plugin ở trên có thứ mà chạy

Sau đây là hướng dẫn chi tiết cách dùng ESLint với vim và dùng ké ESLint config của Airbnb để lint cả JSX trên ES6 (whoa).

Đối với những bạn sử dụng Sublime Text, có thể tham khảo cách cài đặt SublimeLinter ở bên dưới.

Cài NodeJS (duh)

Nếu bạn dùng Mac hoặc Linux, tôi khuyến khích dùng nvm để cài NodeJS phiên bản mới nhất (4.1.1 tại thời điểm viết bài).

Còn bạn nào dùng Windows thì có thể tải bản cài đặt của NodeJS tại đây.

Cài ESLint và đồng bọn

Bạn đã cài NodeJS mới cứng ở bước trên rồi chứ? Chưa à? Cứ thư thả cài đi, tôi chờ.

Ok, tiếp nào, mở terminal hoặc cmd lên và gõ lệnh:

Sau đó tạo file .eslintrc trong directory chứa dự án của bạn với nội dung như sau:

VIM: Cài và bắt Syntastic dùng ESLint

Cài plugin Syntastic. Nếu bạn chưa rõ cách cài plugin cho vim, vui lòng xem link Shameless Plug để biết thêm chi tiết.

Sau đó thêm dòng này vào .vimrc để chọn ESLint làm linter cho bạn:

Khởi động lại vim là xong!

Sublime Text 3: Cài tất tần tật mọi thứ

Việc đầu tiên là tải và cài đặt Sublime Text, ở đây tôi dùng Sublime Text 3.

Cài thêm Package Control cho Sublime Text 3 theo hướng dẫn ở trang chủ của họ.

Bước tiếp theo, ấn tổ hợp phím Ctrl+Shift+P để mở bảng Command Palette (hoặc có thể vào menu Tools > Command Palette) rồi gõ vào Install package xong Enter.

Sublime Text 3 Install Package

Tìm và cài package Sublime​Linter, sau đó cài tiếp SublimeLinter-contrib-eslint. Mở file *.js nào đó lên và nghịch thử thôi.

Bonus: ESLint cho gulp

Nếu bạn là người cổ lổ sĩ như tôi và vẫn dùng gulp thay vì webpack, bạn có thể tham khảo gulp-eslint để tạo một linter task cho mình.

Rất đơn giản phải không, nếu có thắc mắc về linter thì bạn cứ comment bên dưới nha!

SSS Full-stack Engineer

Love Silicon Straits and want to know more about our company culture, working environment or job vacancies?
Find out more at careers.siliconstraits.vn.

Silicon Straits
Be Challenged. Be Inspired. Be Different.




Posted by

on November 10, 2015

in , ,

Comments

Follow us for more later

or subscribe with