Thêm ESlint vào trong VueJS

Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về cách sử dụng ESlint trong ứng dụng VueJS. Nếu bạn chưa biết ESLint là gì thì hãy đọc bài viết này trước để tìm hiểu về ESLint. Bài viết này chúng ta sẽ sử dụng source code của bài viết về cách xây dựng một ứng SSR trong VueJS hoặc sử dụng webpack-simple dùng vue-cli template

Cài đặt ESLint

Vào dự án VueJS của bạn và cài đặt ESLint như sau

Cài đặt eslint-loader

Plugin này giúp cho Webpack nạp một vài pre-test trên các file trước khi nạp chúng

Cấu hình kiểm tra các file .js

Được tích hợp trong loader chúng ta đã cài ở bên trên

Trong file webpack.config.js, thêm rule sau đây ở phía trước rule /\.js$/

  • enforce: "pre" – chỉ định rằng bạn muốn loader này chạy trước các loader thông thường.
  • Đảm bảo rằng bạn sẽ loại bỏ thư mục /node_modules/ khi kiểm tra.

Chạy thử cài đặt

Nó sẽ trả về một lỗi như sau:

Thêm file cấu hình

Trong thư mục gốc thêm file sau .eslintrc.js

Bạn có thể tìm hiểu thêm thông tin về file này ở đây: https://eslint.org/docs/user-guide/configuring.

Do webpack-simple template dựa trên Babel, chúng ta cũng cần cài đặt thêm phân tích cú pháp babel-eslint

Thay vì tự định nghĩa và viết các rule cho dự án, chúng ta có thể sử dụng lại rule theo chuẩn chung, hoặc rule của vue

Cài đặt như sau

Thêm đoạn code sau cho file .eslintrc.js

Nào hãy chạy thử lại dự án

Sau khi chạy bạn sẽ thấy một loạt lỗi được đưa ra bởi ESlint hãy thử tự fix những lỗi này

Như vậy chúng ta đã hoàn thành xong việc cấu hình ESLing cho các file .js

Cấu hình kiểm tra các file .vue

Về cơ bản chúng ta đã kiểm tra được hầu hết các file .js

Nhưng vẫn còn nhiều đoạn code JS cần được kiểm tra và nó được đặt trong các file .vue.  Chúng ta cần sử dụng plugin eslint-plugin-html

Để cho các thông báo khi kiểm tra các file đẹp hơn, chúng ta nên cài đặt thêm plugin sau

Nào hãy sửa đoạn cấu hình bên trên trong cấu hình của webpack, chúng ta thêm các file vue và sử dụng định dạng mới mà chúng ta vừa cài ở trên

Và cấu hình .eslintrc.js bao gồm html plugin và plugin:vue/recommended

Hãy thử chạy lại

Bạn sẽ nhìn thấy thêm một loạt lỗi mới và hãy thử sửa nó. Mấy của tôi như sau

Các lỗi:

Tham khảo Github sử dụng branch vue-eslint

 

You May Also Like

About the Author: Nguyen Dinh Thuc

Leave a Reply

avatar
  Subscribe  
Notify of