ทำให้ทุกคนเขียนโค้ดเป็นสไตล์เดียวกันโดยอัตโนมัติด้วย Prettier, Husky และ lint-staged

เขียนโดย: Thai Pangsakulyanont

หลายครั้งที่ผมไปดูโค้ดของเว็บที่ทำกันเป็นทีม สิ่งที่ผมเห็นเป็นประจำเลยคือ ต่างคนต่างมีสไตล์การเขียนโค้ดของตัวเอง

• บางคนใช้ Semicolon บางคนไม่ใช้
• บางคน Indent ด้วยการเว้นวรรค 2 ครั้ง บางคนก็ 4 ครั้ง
• บางคนก็เว้นวรรคหลังคำว่า if บางคนก็ไม่เว้น
• บางคนใช้ Double quote บางคนใช้ Single quote
• ฯลฯ

บางทีขนาดเขียนเองคนเดียวก็ยังไม่ค่อย Consistent กันเลย

เดี๋ยวนี้สิ่งที่ผมมักจะทำเป็นอย่างแรกๆ เวลาเริ่ม Set Up Project ที่ต้องทำงานกันหลายคน รวมถึงเว็บ ELECT Live! นี้ด้วย คือ เซ็ตอัพให้คนทุกคนเขียนโค้ดออกมาแล้วมีการจัดรูปแบบโค้ดที่เหมือนๆ กัน โดยอัตโนมัติ (นักพัฒนาแทบไม่ต้องทำอะไรเพิ่มเองเลย)

เลิกเถียงกันเรื่องการจัดรูปแบบโค้ด โดยการใช้ Prettier

Prettier เป็นโปรแกรมที่จัดรูปแบบโค้ด โดยตัวโปรแกรมนี้ จะแทบไม่สนใจเลยว่าเดิมเราเขียนโค้ดรูปแบบไหน มันจะจัดให้ในรูปแบบของมัน จะได้เลิกเถียงกันสักทีว่าจะจัดโค้ดกันยังไง

⬆️ ตัวอย่างการจัดโค้ดด้วย Prettier — ด้านซ้าย: ก่อนจัด, ด้านขวา: หลังจัด

โดยที่ตัว Gatsby เอง ก็มี Prettier config มาตรฐานมาให้ตั้งแต่เริ่มเซ็ตอัพโปรเจกต์

Husky + lint-staged

การมีเครื่องมืออัตโนมัติช่วยเป็นเรื่องที่ดี …ก็ต่อเมื่อทุกคนใช้มันเหมือนกัน… แล้วเราจะทำยังไงให้ทุกคนใช้เครื่องมือนี้เหมือนกันล่ะ? 🤔

เพราะว่าต่างคนก็ต่างใช้ Text editor คนละตัวกัน บางคนใช้ VS Code บางคนใช้ Vim จะบังคับให้ทุกคนมาใช้เครื่องมือเดียวกันหมดก็อาจจะไม่ใช่เรื่องที่ดีนัก

แต่ยังมีเครื่องมือตัวหนึ่งที่ทุกคนใช้เหมือนกันหมด นั่นก็คือ…

Git นั่นเอง!

เพราะถ้าไม่ใช้ Git ก็โหลดโค้ด ส่งโค้ดขึ้นมาไม่ได้

แพ็กเกจ lint-staged บน npm เป็นเครื่องมือที่สามารถช่วยทำการเช็ค และจัดรูปแบบโค้ดแบบอัตโนมัติเวลาที่เราสั่ง git commit

อย่างเช่นของโปรเจกต์ ELECT Live! เมื่อนักพัฒนาสั่ง git commit จะมีการรัน Prettier โดยอัตโนมัติทันที:

โดยวิธีการ Set up lint-staged ในโปรเจกต์ก็ง่ายมาก คือเมื่อหลังจากติดตั้ง Prettier เรียบร้อยแล้ว ก็สั่งคำสั่ง

npx mrm lint-staged

มันจะทำการติดตั้งและตั้งค่า Husky ซึ่งเมื่อแพกเกจนี้ถูกติดตั้ง ตัว Husky จะแอบไปแก้ Config ของ Git เพื่อให้มีการรัน Prettier เวลาสั่ง git commit ได้ (เรียกว่า pre-commit hooks)

หากต้องการจะติดตั้ง Husky และ lint-staged ด้วยตัวเอง สามารถดูวิธีได้ในคู่มือของ Prettier เลยครับ