Tôi muốn sử dụng Prettier và ESLint cùng nhau, nhưng tôi đã gặp phải một số xung đột khi sử dụng chúng lần lượt. Tôi thấy rằng có ba gói này dường như cho phép chúng được sử dụng song song:
prettier-eslinteslint-plugin-prettier eslint-config-prettierTuy nhiên, tôi không chắc nên sử dụng cái nào vì các tên gói này đều chứa eslintvà prettier.
Tôi nên sử dụng cái nào?
Câu trả lời:
ESLint chứa nhiều quy tắc và những người được định dạng liên quan đến sức mâu thuẫn với đẹp hơn, chẳng hạn như arrow-parens, space-before-function-parenvv Do đó sử dụng chúng với nhau sẽ gây ra một số vấn đề. Các công cụ sau đã được tạo ra để sử dụng ESLint và Prettier cùng nhau.
Tôi đã viết một so sánh ở định dạng bảng theo ý chính, vì Stack Overflow không hỗ trợ định dạng bảng. Hãy kiểm tra nếu bạn thích tổ chức hơn.
prettier-eslint: Chạy prettiersau đó chạy eslint --fixtrên mã. eslintthường có các bản sửa lỗi tự động để định dạng các quy tắc liên quan và eslint --fixsẽ có thể sửa định dạng xung đột do Prettier giới thiệu. Bạn sẽ không cần phải chạy prettierlệnh riêng biệt.
eslint-plugin-prettier: Đây là một plugin ESLint, có nghĩa là nó chứa triển khai các quy tắc bổ sung mà ESLint sẽ kiểm tra. Plugin này sử dụng Prettier dưới mui xe và sẽ phát sinh vấn đề khi mã của bạn khác với đầu ra dự kiến của Prettier. Những vấn đề đó có thể được tự động khắc phục thông qua --fix. Với plugin này, bạn không cần phải chạy prettierlệnh riêng lẻ, lệnh đang được chạy như một phần của plugin. Plugin này không tắt các quy tắc liên quan đến định dạng và bạn sẽ cần tắt chúng nếu bạn thấy xung đột đối với các quy tắc đó theo cách thủ công hoặc thông qua eslint-config-prettier.
eslint-config-prettier: Đây là một cấu hình ESLint và nó chứa các cấu hình cho các quy tắc (cho dù một số quy tắc nhất định đang bật, tắt hoặc cấu hình đặc biệt). Cấu hình này cho phép bạn sử dụng Prettier với các cấu hình ESLint khác như eslint-config-airbnbbằng cách tắt các quy tắc liên quan đến định dạng có thể xung đột với Prettier. Với cấu hình này, bạn không cần sử dụng prettier-eslintvì ESLint sẽ không phàn nàn sau khi Prettier định dạng mã của bạn. Tuy nhiên, bạn sẽ cần phải chạy prettierlệnh riêng biệt.
Hy vọng điều này tổng hợp sự khác biệt.
Cập nhật: Đó là phương pháp được khuyến nghị để cho Prettier xử lý định dạng và ESLint cho các vấn đề không định dạng, prettier-eslintkhông theo cùng hướng với phương pháp đó, do đó prettier-eslintkhông được khuyến khích nữa. Bạn có thể sử dụng eslint-plugin-prettiervà eslint-config-prettiercùng nhau.
eslint-config-prettier, tại sao chúng ta cần phải chạy đẹp hơn? Sẽ không eslint --fixđịnh dạng mã đường đẹp cùng sẽ?