Tôi đã viết mã React được khoảng 15 tháng và đó là một hành trình thú vị, nơi tôi có thể tìm hiểu những điều mới và tốt hơn xung quanh React ngay cả ngày hôm nay.

Không nhanh là điều mà cá nhân tôi đánh giá cao và luôn khuyến nghị các nhà phát triển đồng nghiệp. Có phân tích mã tĩnh trong kho lưu trữ của bạn sẽ giúp bạn viết mã sạch hơn, tìm lỗi sớm hơn và giảm tổng chi phí chung của bạn. 💸

Ở đây, tôi đã liệt kê một vài quy tắc ESLint mà chúng tôi sử dụng trong repo của mình tại Marvin , điều này rất hữu ích cho chúng tôi trong việc viết mã an toàn, sạch hơn, không có lỗi và có thể bảo trì với hiệu suất tốt hơn. 🚀

Bảo mật 🛡️

phản ứng / không nguy hiểm

Quy tắc này ngăn bạn viết mã không an toàn. Ví dụ: quy tắc này sẽ gây ra lỗi nếu bạn đặt HTML một cách nguy hiểm mà không khử trùng đầu vào. Thêm chi tiết tại đây .

react / jsx-no-target-blank

Quy tắc này ngăn bạn thêm các siêu liên kết mà không tạo ra các lỗ hổng bảo mật. Cửa sổ mới của bạn mà siêu kết nối mở ra vẫn có thể có tham chiếu đến đối tượng cửa sổ cũ. Thêm chi tiết tại đây .

react / jsx-no-script-url

Ngăn bạn mở lỗ hổng bảo mật nguy hiểm vì điều này có thể thực thi bất kỳ mã chưa được bảo vệ nào. Thêm chi tiết tại đây .

Khả năng bảo trì 📒

ưu tiên lan truyền và phản ứng / hủy cấu trúc-phân công

Quy tắc này rất hữu ích khi làm sạch mã và cập nhật các thành phần. Nó trở nên dễ dàng để tìm các biến đề xuất dư thừa hoặc các biến nói chung và làm sạch mã khi tái cấu trúc. Thêm chi tiết ở đây và ở đây .

react / jsx-props-no-spread

Quy tắc này đảm bảo rằng bạn biết chính xác đạo cụ nào được chuyển cho thành phần con, do đó đảm bảo rằng bạn sẽ không chuyển bất kỳ đạo cụ thừa nào cho các thành phần của mình. Điều này sẽ làm giảm số lần hiển thị trong thành phần. Thêm chi tiết tại đây .

Mã sạch 🧹

react-hooks / expustive-deps

Quy tắc này tránh rất nhiều lỗi có thể xảy ra do các hook mà chúng tôi viết mà không chuyển các phụ thuộc thích hợp và bắt buộc.

react / default-props-match-prop-type

Rất hữu ích nếu bạn đang cố gắng khắc sâu việc viết mã mô-đun và có thể sử dụng lại trên ứng dụng.

phản ứng / không sử dụng-prop-loại và phản ứng / không sử dụng-lớp-thành phần-phương thức

Giúp bạn xóa các đạo cụ thừa và các phương thức thành phần không còn được sử dụng trong mã của bạn nữa.

phản ứng / không-không-biết-thuộc-tính

Điều này hầu hết hữu ích khi tôi sử dụng classthay vì classNametrong mã của mình ngay cả sau 15 tháng viết React mỗi ngày. 🥲

phản ứng / sắp xếp-chống lại các loại

Mỗi nhà phát triển viết mã sẽ có quyền ưu tiên riêng của mình trong việc chuyển các đạo cụ trong một thành phần. Điều này trở nên phức tạp theo thời gian và việc giới thiệu các nhà phát triển mới. Nhưng một điều không đổi đối với tất cả các nhà phát triển là thứ tự bảng chữ cái. Quy tắc này sẽ đảm bảo rằng các nhà phát triển cấu trúc và duy trì các đạo cụ trên các thành phần bằng cách sử dụng một thứ tự bảng chữ cái duy nhất.

phản ứng / jsx-xoăn-ngoặc nhọn-hiện diện

Sử dụng cả biểu thức jsx và các ký tự chuỗi javascript sẽ khiến những thứ đơn giản trở nên phức tạp trong khi viết mã, ít nhất là trong những ngày đầu tiên cho đến khi bạn nắm rõ việc sử dụng cả hai trong React. Quy tắc này sẽ giúp bạn nhanh chóng tìm ra lỗi, mã không chính xác, dấu ngoặc nhọn không cần thiết và giúp bạn đơn giản hóa mã của mình. Thêm chi tiết tại đây .

react / jsx-cur-newline

Giúp bạn cấu trúc và viết mã rõ ràng hơn

hứa / luôn quay lại

Quy tắc này không chỉ giúp chúng tôi viết mã sạch hơn mà còn xử lý mã không đồng bộ một cách an toàn và đúng cách trong ứng dụng phản ứng của chúng tôi. Thêm chi tiết tại đây .

Hiệu suất 🚅

react / no-array-index-key

Nếu một mục mảng được thêm vào đầu mảng thì việc sử dụng chỉ mục làm khóa sẽ hiển thị lại tất cả các mục trong mảng. Quy tắc này ngăn chúng tôi sử dụng chỉ mục mảng làm khóa. Tìm hiểu thêm về các khóa React tại đây .

phản ứng / jsx-key

Các phím trong React xác định những mục nào trong danh sách được thay đổi, cập nhật hoặc xóa. Quy tắc này phát hiện xem có cần khóa cho một phần tử hay không. Bạn có thể tìm hiểu lý do tại sao cần có khóa từ đây .

phản ứng / jsx-không-xây dựng-ngữ cảnh-giá trị

Quy tắc này ngăn chặn các kết xuất không cần thiết bằng cách gợi ý cho chúng tôi những gì tất cả các biến có thể được ghi nhớ trong ứng dụng của chúng tôi. Ban đầu tôi thường sử dụng useEffectvà useStatekhông biết cũng useMemonhư cách sử dụng nó. nhưng một khi tôi học được cách ghi nhớ các biến của mình, tôi đã có thể ngăn một số lần hiển thị lại trong suốt ứng dụng của mình. Bạn có thể tìm thêm thông tin chi tiết tại đây .

Đây là một số quy tắc ESLint mà chúng tôi đã bật trong repo của mình để viết mã sạch hơn, có thể bảo trì, an toàn và không có lỗi với hiệu suất tốt hơn.

Biết bất kỳ quy tắc nào khác có thể giúp viết mã phản ứng tốt hơn? Bình luận bên dưới và giúp đỡ các nhà phát triển React đồng nghiệp của bạn. 🙌