จัดระเบียบโค้ดให้สวยงามด้วย Prettier

aofleejay
aofleejay
Jul 2 · 2 min read

การจัดระเบียบโค้ดให้สวยงามเป็นเรื่องที่สำคัญ เพราะความอ่านง่ายถือเป็นหนึ่งในคุณสมบัติของโค้ดที่ดี แต่ถามว่าแบบไหนล่ะที่เรียกว่าอ่านง่าย ?


ใช้เครื่องมือมาช่วยดีกว่า

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

ถ้างั้นให้เครื่องมือมาช่วยดีกว่าเนอะ สำหรับผมเองชอบใช้ prettier ในการจัดระเบียบโค้ดนะ และถ้าใครใช้ vscode ก็สามารถลง extension ของ prettier ได้ ผ่านลิ้งนี้ เลย

เราสามารถจัดระเบียบได้หลายวิธี ไม่ว่าจะเป็น จัดทั้งไฟล์ด้วย CMD + Shift + P แล้วกด Format Document หรือจะจัดแค่บางส่วนด้วยการทำไฮไลต์แล้วคลิกขวา Format Selection ก็ได้เช่นกัน

จัดระเบียบด้วย Prettier

หรือจะทำผ่าน cli ก็ได้ เพีียงแค่ลง package ผ่าน yarn หรือ npm

yarn add prettier -D

หากผมอยากจะจัดระเบียบโค้ดในโฟลเตอร์ src ก็สามารถทำได้ง่าย ๆ ด้วยคำสั่งนี้

prettier --write \"src/**/*.js\"

หากใครอยากใส่ออพชันเสริมก็สามารถทำผ่านคอนฟิกไฟล์ก็ได้ โดยสร้างไฟล์ชื่อ .prettierrc และภายในก็เอาออพชันไปใส่ในรูปของ JSON ได้เลย

{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}

ทำยังไงถึงจะไม่ลืมจัดระเบียบโค้ด ?

สิ่งหนึ่งที่ผมชอบมากก็คือเราสามารถใช้ prettier ร่วมกับ git pre-commit hook ได้ กล่าวคือเราจะจัดระเบียบของโค้ดเราได้ทุกครั้งที่เราคอมมิทโค้ดเลย

วิธีที่ผมใช้ก็คือลง pretty-quick และ husky ครับ

yarn add pretty-quick husky -D

แล้วเพิ่มการตั้งค่าในไฟล์ package.json ดังนี้

{
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}

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

คอมมิทปุ๊บ เป็นระเบียบปั๊บ

ความเห็นส่วนตัว

ผมเองใช้ prettier ในแทบทุก ๆ โปรเจคเลย ด้วยความชอบใน git pre-commit hook นี่แหละครับ มันช่วยให้เราไม่มีทางลืมจัดระเบียบโค้ดได้เลย ยังไงถ้าเราคอมมิท โค้ดก็จะถูกจัดให้เป็นระเบียบอยู่เสมอ

สำหรับใครที่ลองเล่นแล้ว ชอบใจหรือไม่ชอบใจ ยังไงมาแลกเปลี่ยนกันได้นะครับ ไว้เจอกันใหม่บทความหน้า สวัสดีครับ

aofleejay

Written by

aofleejay

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade