Code ví dụ TypeScript Eslint (áp dụng eslint cho TypeScript)

By
-
Cập nhật lúc:
0
63
Lượt xem: 30
Rate this post

Thêm vào đó, DNULib cung cấp nhiều tài liệu hữu ích về lập trình, bạn có thể tìm hiểu thêm tại DNULib.

Lưu ý: Bài viết này được dựa trên nội dung gốc được đăng tải trên stackjava.com.

Giới thiệu

Trong quá trình phát triển dự án TypeScript, việc quản lý code và đảm bảo sự nhất quán giữa các thành viên trong nhóm là vô cùng quan trọng. Đó chính là lúc Eslint trở nên cần thiết. Eslint là một thư viện hỗ trợ tìm kiếm và sửa các vấn đề liên quan đến định dạng code và cú pháp. Nó giúp xác định các vấn đề trong mã nguồn TypeScript, từ đó giúp bạn sửa chúng theo chuẩn định nghĩa sẵn và tạo ra mã nguồn chất lượng hơn.

Cài đặt Eslint cho project TypeScript

Để bắt đầu, hãy xem một ví dụ đơn giản về project TypeScript:

Đầu tiên, hãy cài đặt package Eslint bằng lệnh:

npm install eslint --save-dev

Sau khi hoàn tất cài đặt, bạn cần cấu hình Eslint bằng lệnh:

npx eslint --init

Lệnh trên sẽ yêu cầu bạn chọn cấu hình và mục đích sử dụng Eslint cho dự án của mình. Có thể cấu hình theo những yêu cầu riêng của bạn, ví dụ như sử dụng dấu nháy đơn, kết thúc file bằng dấu chấm phẩy, vv.

Kết quả là file .eslintrc.json sẽ được tạo ra. Đây là file cấu hình cho Eslint, bạn có thể chọn định dạng .json, .yaml hoặc JavaScript tùy thuộc vào sở thích của mình.

Dưới đây là nội dung file .eslintrc.json mẫu:

{
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Trong phần "rules", bạn có thể định nghĩa các quy tắc bạn muốn áp dụng cho project của mình. Ví dụ: sử dụng gạch đầu dòng bằng khoảng trắng, sử dụng dấu nháy đơn, kết thúc câu lệnh với dấu chấm phẩy, vv. Nếu vi phạm các quy tắc này, Eslint sẽ báo lỗi. Bạn cũng có thể chỉ định “warn” (cảnh báo) hoặc “0” (không báo lỗi) / “1” (cảnh báo) / “2” (báo lỗi) nếu bạn chỉ muốn nhận cảnh báo thay vì lỗi thực sự.

Ngoài ra, bạn có thể thêm 2 script lint và lint-and-fix vào file package.json để kiểm tra và sửa lỗi bằng Eslint:

{
  "scripts": {
    "lint": "eslint '**/*.ts'",
    "lint-and-fix": "eslint --fix '**/*.ts'"
  }
}

Trong đó:

  • Lệnh lint được sử dụng để tìm kiếm lỗi trong tất cả các file .ts dựa trên các quy tắc đã được định nghĩa.
  • Lệnh lint-and-fix được sử dụng để tìm kiếm và sửa lỗi trong tất cả các file .ts dựa trên các quy tắc đã được định nghĩa. Nếu gặp lỗi không thể sửa tự động, Eslint sẽ báo lỗi và bạn cần phải sửa lỗi đó thủ công.

Demo

Để kiểm tra, hãy chạy lệnh npm run lint:

Như bạn có thể thấy ở hình trên, file index.ts trong project của tôi có các lỗi như không đúng định dạng thụt đầu dòng đã được định nghĩa, vẫn sử dụng dấu nháy kép và kết thúc file bằng CRLF (Windows). Thực tế, khi bạn cài đặt Eslint, IDE đã cảnh báo lỗi cho bạn ngay khi code, ví dụ như ở đây tôi đang sử dụng Visual Studio và đã cài đặt plugin Eslint:

Để sửa các lỗi không tuân theo quy tắc, bạn có thể chạy lệnh npm run lint-and-fix:

Kết quả:

Bạn có thể tải mã nguồn ví dụ ở đây hoặc tại đây.

Kết luận

Trên đây là hướng dẫn áp dụng Eslint cho dự án TypeScript của bạn. Bằng cách sử dụng Eslint, bạn có thể kiểm tra và sửa các lỗi trong mã nguồn TypeScript, giúp duy trì sự nhất quán và chất lượng trong project của bạn.

Nguồn tham khảo: https://eslint.org/docs/user-guide/getting-started, https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/

Đại học Quốc gia Thành phố Hồ Chí Minh – Thư viện trực tuyến DNULib hiện cung cấp nhiều tài liệu hữu ích về lập trình và công nghệ thông tin. Để tìm hiểu thêm, hãy truy cập DNULib.

RELATED ARTICLESMORE FROM AUTHOR