บทความ IT เจ๋งๆ

สำหรับ Programmer แล้ว ชีวิตประจำวันของพวกเขาแทบจะอยู่กับการ Coding ตลอดเวลา และเมื่อต้องทำงาน Project ใหญ่ๆ ก็แน่นอนว่าอาจจะต้องเขียน Code ที่ยาวมาก ดังนั้น การจัด Format หรือรูปแบบของ Code จึงเป็นเรื่องที่(จำเป็น)ต้องทำอย่างหลีกเลี่ยงไม่ได้ โดยเฉพาะเมื่อต้องทำงานกันเป็นทีม ดังนั้นเรามารู้จักเครื่องมือ ที่ช่วยจัด Format Code ให้คุณกันดีกว่า

ก่อนหน้านี้คุณ Nipuna Gunathilake ซึ่งเป็นผู้เขียนบทความนี้ ได้รับคำแนะนำจากเพื่อนของเขาให้รู้จักกับ Tool ตัวหนึ่งชื่อ “Prettier” แต่เขาก็ไม่ทราบว่า Tool ตัวนี้มีดีอะไร เพราะเขาก็ใช้ Linter ช่วยจับ Error และจัด Format ของ Code ให้โดยอัตโนมัติอยู่แล้ว และยังมี Text Editor บางตัวที่มีประโยชน์อยู่แล้ว ทำให้เขาคิดว่า ทำไมถึงต้องใช้ Tool ตัวอื่นในการจัด Code ให้เป็นระเบียบ แต่หลังจากได้ใช้งานแล้ว เขาจะมาอธิบายว่า Prettier นี้มีประโยชน์อย่างไรกับการทำงานใน Project ของคุณ

Prettier คืออะไร?

จาก Document ของ Prettier กล่าวไว้ว่า “Prettier เป็นตัวจัด Format Code หรือทำให้ Code เป็นระเบียบสวยงามอ่านง่าย ซึ่งรองรับหลายภาษาไม่ว่าจะเป็น JavaScript, TypeScript, HTML, CSS, JSON และอื่นๆ”

เรามาดูกันว่ามันทำอะไรได้บ้าง

1. จัดรูปแบบ Code ของคุณโดยมันจะช่วยพิจารณาให้ - ยกตัวอย่าง ของการพิจารณาในที่นี้ เช่น Code ของคุณจบบรรทัดหรือยัง ควรขึ้นบรรทัดใหม่หรือ วิธีแสดง Attribute ของ HTML
2. อนุญาตให้เราปรับแต่งหรือตั้งค่าได้ด้วยการ Configuration - ในขณะที่ Prettier มีมาตรฐานที่ตั้งไว้ให้เบื้องต้นแล้ว ว่า Code ควรมีลักษณะอย่างไร เราสามารถปรับแต่ง/ตั้งค่า ได้โดยใช้การ Configuration เพื่อให้เหมาะกับความต้องการของทีมได้
3. สามารถ Share และนำรูปแบบที่ถูก Configuration ไว้ไปใช้งานต่อได้ – เมื่อการ Configuration ค่า ถูกเพิ่มเข้าไปใน Project แล้ว Editor ส่วนใหญ่สามารถนำรูปแบบเหล่านั้นไปใช้งานได้โดยอัตโนมัติทันทีที่คุณกด Save

มันทำงานอย่างไร?

Prettier จะนำ Code ของคุณไป Re-write ให้อยู่ใน Format ของมัน นี่คือสิ่งที่แตกต่างจากการทำงานของ Code Linters เพราะสิ่งที่ Linter ทำ ก็แค่เพียงเพื่อชี้ให้เห็นถึง Error ที่อยู่ใน Code ของคุณ แต่มันจะไม่ช่วย Re-write Code แต่อย่างใด

นี่คือสิ่งที่ Prettier สามารถทำได้:

1. อ่าน Code ทั้งหมดที่คุณเขียน
2. สร้าง Abstract Syntax Tree(AST) จาก Code ของคุณ โดย AST ก็เป็นตัวแทนทั่วไปของ Code ที่จะทำให้เห็นถึง Logic ทั้งหมด เพียงแค่ทำให้เหมือน Tree เพื่อจะได้รู้ว่าทำอะไรก่อน-หลัง และเป็นขั้นตอน
3. ใช้ AST และ Rule ที่มีอยู่ แล้วทำการ Re-write Code ใหม่ให้สอดคล้องและเป็นไปตามที่ตั้งค่าไว้

การใช้งาน Prettier

วิธีที่เร็วที่สุดในการลองใช้ Prettier ก็คือใช้ Prettier Playground คุณสามารถไปที่นั่น แล้วลองดูว่ามันทำงานอย่างไร คุณสามารถดูวิธีการที่ Prettier จัด Format Code ได้แบบ Real Time

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

เราจะสามารถใช้ Code Linter แทนได้ไหม?

อย่างที่เราทราบกันว่าทั้ง Code Linter และ Prettier มีส่วนของการทำงานที่คล้ายกันอยู่ มีบางสิ่งที่ Prettier ทำได้ดีกว่า และมีบางสิ่งที่เราอาจต้องการ Linter เข้ามาช่วยด้วย ลองดูตัวอย่าง Code ต่อไปนี้:

คุณคงจะคิดว่า Code นี้ค่อนข้างจะยุ่งเหยิง จนเรียกได้ว่าเป็น Code ที่ไม่มีความสวยงามเอาซะเลย

• Code ถูกเขียนยาวต่อเนื่องไปเรื่อย เต็มความยาวสูงสุดที่ตั้งค่าไว้ที่ 80 ตัวอักษร
• If statement อยู่ในบรรทัดเดียวกัน (ที่จริงมันก็ไม่ผิดหากทีมของคุณต้องการแบบนั้น) แต่ด้วยการ Configuration นี้ Code แบบนี้ถือว่า Format ยังไม่สวยงาม
• `greetingMethod` ยังไม่ถูก Define

แต่หากลองจัด Format ใหม่แบบด้านล่าง มันจะทำให้ดูดีกว่าเดิมมาก

หากเราใช้เฉพาะ Linter ในเรื่องของ Max-Width ของ Code เราก็อาจพบ Error ได้ แต่ความแตกต่างก็คือ เนื่องจาก Linters ไม่ได้ มีการตั้งหรือกำหนดค่าไว้ แต่เราก็สามารถแก้ไขปัญหาของ Lint ได้หลายวิธี

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

ถ้า Prettier มันยอดเยี่ยมมาก แล้วเราควรเลิกใช้ Linter ไหม

อย่าเพิ่งด่วนตัดสินใจ หากคุณสังเกตเห็นก็จะพบว่า ขณะที่ Prettier ช่วยจัด Format Code ให้สวยงามในตัวอย่างล่าสุด แต่มันกลับไม่ทำอะไรเลยเกี่ยวกับ Method `greetingMethod`

นี่คือสิ่งที่ Linters สามารถเข้ามาช่วยได้ จากที่ Document ของ Prettier ได้อธิบายไว้ Linters มี Rule อยู่ 2 ชุด

1. การจัด Format
2. คุณภาพของ Code

Linters สามารถใช้เพื่อตรวจจับในเรื่อง คุณภาพของ Code รวมทั้งการจัด Format ซึ่งสามารถนำไปใช้กับ Prettier ได้

การใช้ Tool อย่าง ESLint ร่วมกับ Prettier จะช่วยให้คุณสามารถตรวจจับ Error ได้เร็วขึ้นในขณะที่ยังคงรักษา Consistency ของ Code ไว้ได้อยู่

ข้อดีของการใช้ Computer ช่วยชัด Format

1. การกำหนดรูปแบบขึ้นมา จะถูกทำทั้ง Project

มีการกำหนดรูปแบบบางอย่างขึ้น ในทุกครั้งที่เราเขียน Code คุณมักต้องใช้เวลาคิดเกี่ยวกับวิธีการจัดรูปแบบของ Code กรณีที่คุณต้องการ Develop Method ขึ้นมาเพื่อช่วยจัด Format Code ให้ แน่นอนว่าจะต้องใช้เวลา แต่หากคุณให้คอมพิวเตอร์ทำให้ มันกลับใช้เวลาเพียงสั้นๆ เท่านั้น

2. ทำให้ทุกคนสามารถใช้รูปแบบเดียวกันได้

โดยทั่วไป คนในทีมมักจะทำตามคู่มือ “Coding Style Guide” อยู่แล้ว แต่มันก็เป็นเรื่องง่ายที่จะเปลี่ยนแปลง Rule ของคู่มือนี้ได้บ้าง ซึ่งสิ่งนี้อาจนำไปสู่การการถกเถียงกันภายในทีมอย่างไม่จบไม่สิ้นในประเด็นที่อาจไม่ได้สำคัญมากนัก การที่เรามีการจัดรูปแบบ Code แบบอัตโนมัติ จะช่วยให้เราสามารถแก้ไขปัญหานี้ได้ในระดับหนึ่ง ซึ่งจะช่วยให้คนในทีมได้มีเวลาทำในสิ่งอื่นๆ ที่สำคัญกว่า

3. ไม่ขึ้นอยู่กับเครื่องมือใดๆ

เราจะมีตัวจัดรูปแบบ Code (Code Formatter) บน IDE และ Text Editor ต่างๆ มากมาย แต่สำหรับ Prettier แล้วมันอยู่เหนือกว่านั้น เพราะมันไม่ขึ้นอยู่กับเครื่องมือใดๆ เลย คุณสามารถ Develop บน Notepad ก็ได้(ซึ่งที่จริงไม่ขอแนะนำ) และ Run มันผ่าน Prettier ด้วย Command Line Tool

4. สะดวกกับสมาชิกใหม่ที่เข้ามาในทีม

เมื่อมีสมาชิกใหม่เข้าร่วมทีม เรามักจะมีการบอกกล่าวหรือคำอธิบายต่างๆ มากมาย ที่เราต้องสอนสมาชิกใหม่เหล่านั้นเกี่ยวกับวิธีการ Organize สิ่งที่จะ Import เข้ามา รวมทั้งวิธีที่คนส่วนใหญ่ไม่ชอบ เช่น การเขียน If Conditions ภายในบรรทัดเดียว เมื่อเข้าร่วม Project ใหม่ที่มีการ Config. ค่าของ Prettier แล้ว จะทำให้ช่วยลดขั้นตอนของการอธิบายสมาชิกใหม่ออกไป เพื่อให้พวกเขามีเวลาในการเรียนรู้สิ่งสำคัญอื่นๆ ได้มากขึ้น

5. ลดปัญหาการเกิด Merge Conflicts ในเรื่องของ Format

ประโยชน์หลักๆ ของการมี Prettier คือ มันช่วยให้คนในทีมสามารถใช้รูปแบบที่สอดคล้องกันทั้ง Project หากมีใครบางคนต้องการจะเปลี่ยนการจัดรูปแบบของ Code คนในทีมก็สามารถปรึกษากัน และเปลี่ยน Prettier File ได้ตามต้องการ เมื่อมีการ Commit แล้ว Prettier จะนำรูปแบบนั้นไปใช้กับ File ที่ถูก Add หรือ Modify ทั้งหมด

ไม่มีตัวจัด Format ไหนในโลกที่สามารถแก้ปัญหาได้ทุกอย่าง

คุณอาจรู้สึกเหมือนว่า คุณต้องปล่อยให้คอมพิวเตอร์ทำการจัด Format ให้เองทั้งหมด แต่ที่จริงแล้ว มันช่วยให้คุณประหยัดเวลาอันมีค่าและพลังสมองของคุณ เพื่อทำในสิ่งที่สำคัญกว่าการมานั่งจัดรูปแบบ Code

แม้ว่า Prettier จะช่วยให้คุณเขียน Code ที่ “ดูเหมือนจะ” แต่มันไม่ได้ช่วยในเรื่องการ Logic ของ Code ที่ Clean ขึ้น การเขียน Code ที่ Readable และ Reusable นั้น ต้องใช้ความพยายามมากกว่าการจัด Format หากคุณสนใจเรื่อง “Clean Code” ก็ขอแนะนำให้อ่านหนังสือของ Uncle Bob ดู

หวังว่าบทความนี้ จะช่วยให้คนไอทีรู้จัก Prettier มากขึ้น และนำมันไปใช้ประโยชน์ในการช่วยจัด Format Code ของคุณ เพื่อที่คุณจะได้มีเวลาทำงานอย่างอื่นที่มีความสำคัญกว่าได้มากขึ้น

ที่มา:  https://blog.bitsrc.io/