ESLint là trình kiểm tra linter / style JavaScript đã nhanh chóng nổi tiếng vì một số lý do. Trước hết, nó dễ dàng cài cắm như các plugin khác. Thứ hai, nó là loại lai giữa JSHint và JSCS. Thứ ba, nó được viết bởi không ai khác ngoài Nicholas Zakas .

Bắt đầu với ESLint

Rất dễ sử dụng ESLint. Bạn đã cài đặt Node.js rồi sau đó intsall ESLint …

npm install -g eslint  
# Or
npm install eslint  

Bạn có thể cài đặt Eslint như một package global hoặc Local trong folder dự án. Best practice là cài Eslint như một global package.

Cấu hình

Tạo một thư .eslintrcmục gốc trong dự án của bạn. Sau đó, bạn có thể thêm globals, thiết lập môi trường của mình envvà thêm các quy tắc .

{
  "globals": {
    // Put things like jQuery, etc
    "jQuery": true,
    "$": true
  },
  "env": {
    // I write for browser
    "browser": true,
    // in CommonJS
    "node": true
  },
  // To give you an idea how to override rule options:
  "rules": {
    // Tons of rules you can use, for example...
    "quotes": [1, "double"]
  }
}

Quy tắc

Để sử dụng các quy tắc, hãy thêm tên của nó, sau đó chuyển một mảng. Mảng là một mảng các tùy chọn. Đầu tiên là …

• 0 – Disable the rule
• 1 – Warn about the rule
• 2 – Throw error about the rule

Sau đó, các đối số tiếp theo có thể cấu hình các tham số khác nhau cho mỗi quy tắc. Trong trường hợp này, chúng ta đang nói cho Eslint rằng Tao muốn đưa ra cảnh báo khi các dấu nháy đơn được sử dụng ” chứ không phải dấu ngoặc kép “”.

Xem danh sách đầy đủ các quy tắc tại đây .

Phân tích cú pháp

Có sẵn các loại trình phân tích cú pháp khác nhau. Một trong số đó là babel-eslint…

"parser": "babel-eslint",

Điều này sẽ cho phép bạn sử dụng cú pháp ES6.

Sublime-Linter

Có một plugin tuyệt vời cho Sublime Text được gọi Sublime-Linter. Một khi nó được cài đặt, có một loạt các plugin khác cho nó, bao gồm một cho ESLint! Cài đặt nó với Command+Shift+Pshorcut …

Sau đó, bạn phải làm một chút cấu hình để làm cho nó thực sự chạy với mã của bạn. Đi tới Sublime Text -> Prefences -> Package Settings -> SublimeLinter -> Settings-User…

Ở đây, bạn phải cài đặt cho Sublime-Linter biết nơi bạn cài đặt NodeJS bằng cách sử dụng paths option. Bạn có thể làm điều này bằng cách chạy which nodetrên dòng lệnh command line. Ví dụ, nếu bạn sử dụng nvmcấu hình của bạn sẽ như thế này.

Phần này khá là quan trọng, thi thoảng vì nhiều lý do, khi Dev chỉ làm theo hướng dẫn là cài đặt Eslint & add thêm file .eslintrc su đó restart Sublime Text các kiểu nhưng vẫn thấy kết quả không như ý muốn, chẳng thấy lỗi gì hiển thị như mô tả cả :D, 1 trong những  thứ quan trọng cần kiểm tra lại là setting đường dẫn đến thư mục cài đặt NodeJS như hình trên.

"paths": {
  "linux": [],
  "osx": [
    "/Users/jonathanc/.nvm/versions/io.js/v2.0.0/bin"
  ],
  "windows": []
},

 

One other thing you might have to set depending on your syntax highlighter is an alias for your syntax highlighter. For ES6, Babel has a sublime plugin for syntax highlighting that you can install by searching for Babel.

Then in your config for the linter…

"syntax_map": {
  "JavaScript (Babel)": "javascript",
}

Bây giờ khi bạn có JavaScript Invalid trong  ES6, bạn sẽ thấy cảnh báo trong mã code như sau…

Điều này sẽ giúp bạn phát hiện lỗi và viết code tốt hơn trong Sublime Text.

Một số packages name thường cài đặt cùng với Eslint:

eslint-config-airbnb-base

eslint-plugin-import

eslint-plugin-class-property

eslint-config-rallycoding

eslint-plugin-react

eslint-plugin-jsx-a11y

Trên đây là tổng hợp lại một số kinh nghiệm & kiến thức của tôi trong việc sử dụng Eslint để kiểm tra, sửa lỗi cú pháp khi lập trình với Javascript. Trong quá trình hệ thống lại kinh nghiệm và kiến thức không tránh khỏi những sai sót, Rất mong các bạn đọc đóng góp ý kiến để Mình càng ngày càng hoàn thiện hơn bài viết. Bài viết được tham khảo từ một số nguồn dưới đây:

http://jonathancreamer.com/setup-eslint-with-es6-in-sublime-text/ 

https://eslint.org/docs/user-guide/getting-started

Cám ơn các bạn đã quan tâm và đọc đến tận đây <3 <3 <3

Nếu bạn cảm thấy bài viết này hay và hữu ích thì hãy Like, Share & Subscribe techblog của bọn mình nhé 😀 😀