Sử Dụng ESLint Trong Vue

Công Cụ Công Nghệ

  • IDE: VSCode
  • Linter: ESLint
  • Ngôn ngữ: TypeScript

TypeScript Là Gì?

  • Cú pháp: TS là một siêu tập của JS, định nghĩa cách viết mã để lập trình.
  • Kiểu dữ liệu: TS cung cấp quy tắc và cách sử dụng kiểu dữ liệu.

Ghi nhớ: **TS thực chất là JS có kiểm tra kiểu**.

ESLint Là Gì?

ESLint nhận diện và báo cáo lỗi cú pháp trong mã JS, giúp tránh lỗi và giữ phong cách mã hóa đồng nhất khi làm việc nhóm.

Sử Dụng ESLint Trong TypeScript

Để hiểu tại sao TS cần ESLint, hãy tham khảo bài viết về công cụ kiểm tra mã (Từ TSLint sang ESLint). Ở đây chúng ta tập trung vào typescript-eslint.

  • typescript-eslint: Plugin cho ESLint, tải các quy tắc tùy chỉnh và cấu hình sẵn.
  • @typescript-eslint/parser: Chuyển đổi mã TS thành định dạng mà ESLint có thể hiểu.
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

Sử Dụng ESLint Trong Vue

Giống như TS, ESLint không nhận diện file `.vue`, cần một bộ phân tích (eslint-plugin-vue) để kiểm tra `