ฉันต้องการใช้ Prettier และ ESLint ร่วมกัน แต่ฉันพบข้อขัดแย้งบางอย่างโดยใช้ทีละรายการ ฉันเห็นว่ามีสามแพ็คเกจนี้ที่ดูเหมือนจะอนุญาตให้ใช้ควบคู่กันได้:
prettier-eslinteslint-plugin-prettier eslint-config-prettierอย่างไรก็ตามฉันไม่แน่ใจว่าควรใช้ชื่อแพ็คเกจใดในชื่อแพ็กเกจเหล่านี้eslintและprettier.
ควรใช้ตัวไหนดี?
คำตอบ:
ESLint มีกฎระเบียบมากและผู้ที่ได้รับการจัดรูปแบบที่เกี่ยวข้องกับความขัดแย้งอาจจะมีสวยเช่นarrow-parens, space-before-function-parenฯลฯ ดังนั้นการใช้พวกเขาเข้าด้วยกันจะทำให้เกิดปัญหาบางอย่าง เครื่องมือต่อไปนี้ถูกสร้างขึ้นเพื่อใช้ ESLint และ Prettier ร่วมกัน
ฉันเขียนการเปรียบเทียบในรูปแบบตารางในส่วนสำคัญเนื่องจาก Stack Overflow ไม่รองรับการจัดรูปแบบตาราง ตรวจสอบว่าคุณชอบองค์กรมากกว่า
prettier-eslint: รันprettierแล้วรันeslint --fixบนโค้ด eslintโดยปกติจะมีการแก้ไขอัตโนมัติสำหรับการจัดรูปแบบกฎที่เกี่ยวข้องและeslint --fixจะสามารถแก้ไขการจัดรูปแบบที่ขัดแย้งกันที่ Prettier แนะนำได้ คุณไม่จำเป็นต้องเรียกใช้prettierคำสั่งแยกกัน
eslint-plugin-prettier: นี่คือปลั๊กอิน ESLint ซึ่งหมายความว่ามีการใช้งานสำหรับกฎเพิ่มเติมที่ ESLint จะตรวจสอบ ปลั๊กอินนี้ใช้ Prettier ภายใต้ประทุนและจะเพิ่มปัญหาเมื่อโค้ดของคุณแตกต่างจากผลลัพธ์ที่คาดไว้ของ Prettier --fixปัญหาเหล่านั้นสามารถแก้ไขได้โดยอัตโนมัติผ่านทาง ด้วยปลั๊กอินนี้คุณไม่จำเป็นต้องเรียกใช้prettierคำสั่งแยกจากกันคำสั่งจะถูกเรียกใช้เป็นส่วนหนึ่งของปลั๊กอิน eslint-config-prettierปลั๊กอินนี้จะไม่ปิดการจัดรูปแบบที่เกี่ยวข้องกับกฎระเบียบและคุณจะต้องปิดได้ถ้าคุณเห็นความขัดแย้งสำหรับกฎระเบียบดังกล่าวด้วยตนเองหรือผ่านทาง
eslint-config-prettier: นี่คือการกำหนดค่า ESLint และมีการกำหนดค่าสำหรับกฎ (ไม่ว่ากฎบางอย่างจะเปิดปิดหรือการกำหนดค่าพิเศษ) การกำหนดค่านี้ช่วยให้คุณใช้ Prettier กับการกำหนดค่า ESLint อื่น ๆ เช่นeslint-config-airbnbโดยการปิดกฎที่เกี่ยวข้องกับการจัดรูปแบบที่อาจขัดแย้งกับ Prettier ด้วยการกำหนดค่านี้คุณไม่จำเป็นต้องใช้prettier-eslintเนื่องจาก ESLint จะไม่บ่นหลังจากที่ Prettier ฟอร์แมตโค้ดของคุณ อย่างไรก็ตามคุณจะต้องเรียกใช้prettierคำสั่งแยกกัน
หวังว่านี่จะสรุปความแตกต่างได้
อัปเดต: เป็นแนวทางปฏิบัติที่แนะนำเพื่อให้ Prettier จัดการกับการจัดรูปแบบและ ESLint สำหรับปัญหาที่ไม่ใช่การจัดรูปแบบprettier-eslintไม่ได้เป็นไปในทิศทางเดียวกันกับแนวทางปฏิบัติดังกล่าวจึงprettier-eslintไม่แนะนำอีกต่อไป คุณสามารถใช้eslint-plugin-prettierและeslint-config-prettierร่วมกัน
eslint-config-prettierเหตุใดเราจึงต้องสวยขึ้น? จะไม่eslint --fixฟอร์แมตโค้ดแบบเดียวกับที่สวยกว่านี้หรือ?