Thứ Hai, 21 tháng 3, 2016

Eslint và ứng dụng

Dẫn chuyện:
Khi vào team hiện tại thì có 1 số qui tắc code như:
- Nên dùng ' (single quote) thay vì " (double quote).
- Có space trước dấu { ....
- Dấu , ở property cuối cùng.
- Khai báo biến mà không dùng.

Điều này ban đầu làm mình khá là khó khăn và hay phải commit lại chỉ để sửa mấy cái này. Do ở công ty cũ không có những qui định này. Mình cũng cố gắng review code cẩn thận trước khi commit nhưng lâu lâu vẫn phải commit lại để sửa những cái này. Thật sự commit lại để sửa những cái này khá là bực.

Eslint

Tình cờ hôm nay, thấy comment trên github của một dev khác có chụp hình nó show những cái lỗi có mấy cái tương tự như vậy. Search search chút thì tìm được cái thằng này Eslint. Tình cờ hôm nay lại hết task, thế là dành thời gian đọc qua mấy cái rule của nó và tìm được những cái rule thích hợp để thỏa mãn hết mấy cái code convention

Mình dùng plugin linter-eslint cho atom để chụp hình mình họa trong bài này. (Bạn có thể tìm plugin tương tự cho IDE/Text editor mà bạn dùng).

Để eslint phát hiện được những chỗ cần nhắc (warning: 1) hoặc báo lỗi (error: 2) thì bạn phải cho nó biết những quy luật (rules) mà bạn muốn áp dụng.

Để áp dụng luât này thì bạn phải biết tên của nó và đặt nó vào file config của eslint hoặc là để trên phần comment ở đầu file.

Ở đây mình sẽ lấy ví dụ là đặt những luật này trong file config. File config của nó sẽ có tên là .eslintrc, bạn có thể cấu hình để eslint nạp file config này từ đường dẫn bạn buồn trong phần cấu hình của plugin.

Cấu trúc của 1 file .eslintrc có định dạng json. Bạn sẽ đặt các rule vào trong property rules ở file json này.

Cấu trúc nó sẽ có dạng như sau:
{
  rules: {
     no-console: 1,
     eqeqeq: 2,
     quotes: [2, "single"],
  }
}

Mỗi rule sẽ là 1 dòng như thế này, gồm có tên rule và cấu hình.
1: là warning,
2: là error.
Nếu 1 rule cần thêm tham số cấu hình thì sẽ đặt nó trong cái array như ví dụ trên.

1 số rule mình đang dùng và giải thích:

Mấy cái nào mà dễ hiểu quá thì mình sẽ không giải thích, cái nào bạn muốn tìm hiểu thêm thì copy rồi google cho rõ nhé.
  • quotes: [1, "single"] //Cái này sẽ báo warning (vì mình dùng số 1), khi mình dùng dấu " (nháy kép) để khai báo hay sử dụng một cái string trong JS.
  • space-before-blocks: 1, //Cái này sẽ nhắc mình thêm 1 dấu space trước khi mở ngoặc móc.
  • no-trailing-spaces: 2
  • no-multi-spaces: 2,
  • eqeqeq: 1 //Cái này sẽ warning khi bạn dùng == hoặc !=, để bạn luôn nhớ dùng === hoặc !==. Ở đây có giải thích lí do bạn nên dùng === thay vì ==
  • "valid-typeof": 1, //Tránh lỗi type khi so sánh type of, kiểu như nunber (đúng ra phải là number)
  • "no-unused-vars": [1, {"vars": "all", "args": "all"}], //Sẽ nhắc bạn về các biến được khai báo mà không sử dụng trong khai báo (vars) và trong đầu vào của hàm (args)
  • no-unreachable: 1 //Cái này dùng để báo lỗi khí mà trong code có chỗ nào đó return trước 1 câu lệnh khác.
  • "no-console": 1,//Khỏi quên xóa console.log khi debug.
  • "no-cond-assign": 1 // Tránh kiểu lỡ gõ nhầm lệnh gán trong phép so sánh, kiểu như thay vì so sánh a === 1, thì lại gõ nhầm thành a = 1 nên câu lệnh if luôn chạy. Mình từng thấy cái này khi review code 1 lần rồi. Bạn chắc là không muốn bị bắt vì lỗi này đâu nhỉ :)
  • "no-constant-condition": 1, //Tránh so sánh vô nghĩa, ví dụ dụ if(true) { //do some thing}

Những rule trên sẽ giúp mình không phải commit lại chỉ để sửa những cái code convention ở trên. Bạn có thể đọc thêm về các rules khác ở đây để chọn rule thích hợp cho mình.
Chúc may mắn.

6 nhận xét:

  1. Ngon :))
    xài cái này tiết kiệm thời gian, cuối ngày commit ko để ý dễ dính mấy cái linh tinh này

    Trả lờiXóa
  2. Bạn có biết config để chạy với netbeans không?
    Mình down plugin ESLint về rồi mà nó không hoạt động

    Trả lờiXóa
    Trả lời
    1. Hi bạn,
      Mình không dùng netbean 1 thời gian rồi. Để mai mình thử lại xem có giúp bạn được không.

      P/s: Bạn đã thử dùng atom chưa? Trước đây mình cũng dùng netbean nhưng một thời gian chuyển qua atom mình bỏ hẳn netbean luôn rồi

      Xóa
    2. Hi,
      Thanks bạn :)
      Mình đang down thử Atom về dùng xem.
      Bạn có thể nói rõ hơn về cách cài đặt ESLint trên Atom đc không?
      Mình mới dùng nên không rõ ntn ><

      Xóa
    3. Nhận xét này đã bị tác giả xóa.

      Xóa
    4. Hi bạn,
      Mình đã làm được trên Atom rồi nhé.
      Thank you :)

      P/s: nếu bạn làm đc trên netbeans thì bảo mình với nhé.

      Xóa