Atom Package ที่น่าสนใจ และใช้อยู่

ตอนนี้ผมก็เปลี่ยน Text Editor ตัวเองมาใช้ Atom มาหลายเดือนแล้วตั้งแต่ประกาศเวอร์ชั่น 1.0 ออกมา ในตอนแรกนั้นมันก็ ทำอะไรไม่ค่อยได้เลย และบัคก็เยอะมาก เมื่อเทียบกับ Sublime Text ที่ใช้อยู่ ณ ตอนนั้น แต่ตอนนี้เวลาผ่านไป Community ของคนที่ใช้ Atom ก็ใหญ่ขึ้นเรื่อย ๆ บัคก็ถูกแก้ไปเรื่อย ๆ เลยทำให้โปรแกรมนี้ค่อนข้างเป็นที่นิยมและมี Atom Package ออกมาเป็นจำนวนมาก
หนึ่งเหตุผลที่ทำให้ Atom นั้นเป็นที่นิยมก็เพราะว่า ตัวมันถูกเขียนขึ้นมาด้วย HTML, CSS และ JS และใช้ Electron ช่วยเพื่อให้มันรันได้เหมือน Native Application ฉะนั้นใครที่เขียนเว็บเป็นก็สามารถเล่นกับมันได้ไม่ยากเลย

Atom Package

จากที่ได้บอกไปว่าตัวมันถูกเขียนโดย HTML, CSS และ JS ทำให้นักพัฒนาสามารถ เล่นกับตัวโปรแกรมได้จนถึงตัวแกนกลางเลยก็ย่อมได้ ดังนั้นจึงมีนักพัฒนาที่พัฒนา Package หรือ ส่วนเสริม ขึ้นมาเป็นจำนวนมาก มีทั้งดี ทั้งไม่ดี วันนี้ผมจะมาแนะนำ 10 ตัวที่ผมใช้อยู่ในอ่านกัน

Emmet

ตัวนี้ไม่ขอพูดพร่ำทำเพลงอะไรเลย ใช้มาตั้งแต่ตอนใช้ Vim แล้ว เพราะมันคือตัวช่วยเขียนพวก HTML และ CSS ให้เร็วขึ้น โดยมันจะมี รูปแบบของคำสั่ง อยู่เพียงแค่เราพิมพ์ตามรูปแบบแล้วกด Tab มันจะแปลงคำสั่งที่เราพิมพ์ให้กลายเป็น คำสั่ง หรือ Tag ต่าง ๆ ออกมาได้ เช่นผมอยากได้ li 100 ตัว ผมก็มานั่งพิมพ์ก็ไม่ไหว หรือถ้าจะคัดลอกแล้วค่อย ๆ แปะก็คงไม่ไหวเหมือนกัน
แต่ถ้ามา Emmet เราสามารถพิมพ์ li*100 แล้วกด Tab เท่านี้ เราก็จะได้ li 100 ตัวแล้ว

File Icons

ถ้าใครเคยใช้ Atom เราจะเห็น Tree View ที่อยู่ทางด้านซ้ายของตัวโปรแกรม เราจะเห็นได้ว่า กว่าเราจะรู้ว่าไฟล์นั้นคือไฟล์อะไร เราก็ต้องเหลือบตาไปอ่าน Extension ข้างหลัง ซึ่งเสียเวลามาก ถ้า Project ของเรามีไฟล์เยอะ ๆ ดังนั้น ถ้ามี Icon บอก Extension ของไฟล์ก็น่าจะช่วยย่นเวลาตรงนี้ให้เราได้

Minimap

อันนี้น่าจะเหมาะกับคนที่เคยใช้ Sublime Text มาก่อน ที่เราต้องใช้ Minimap ทางด้านขวา แต่พอมาใน Atom มันกลับไม่มี มันเซ็งจริง ๆ แต่ Package ตัวนี้สามารถมาคลายความหงุดหงิดในเรื่องนี้ได้ เพราะมันทำให้ Minimap กลับมาอีกครั้ง

Linter

ถ้าใครที่ใช้ Vim ก็ให้นึกถึง Syntastic หรือถ้าใช้ Sublime มาก่อนก็ต้องนึกถึง SublimeLinter มันสามารถที่จะแสดง Error และ Warning จาก Code ที่เรากำลังทำงานอยู่แบบ Real-time เลยทีเดียว ถือว่าทำให้การเขียน Code ของเราสะดวกมากขึ้น

Pigments

ถ้าใครที่ต้องเขียนพวก SCSS หรือ SASS อะไรพวกนี้อยู่น่าจะชอบ เพราะมันจะแสดงสีอยู่บน Text ที่เป็นข้อมูลสี เหมือนในภาพข้างบนเลย ทำให้เราเห็นภาพมากขึ้นว่า ที่เราพิมพ์ หรือที่เราเห็นนั้นมันคือสีอะไร จากเมื่อก่อนที่เราพิมพ์ลงไป rbg แล้วต้องเอาไปรัน เพื่อดูว่าสีถูกมั้ย ตอนนี้แค่พิมพ์ลงไป มันก็จะแสดงสีให้เราดูแบบ Real-time เลย
นอกจากนั้น มันยังสามารถที่จะแสดง Palette ของสีที่เราใช้ใน Project ของเราได้ด้วย ว่าเรามีการใช้สีอะไรบ้าง ตรงไหน และชื่ออะไร

Color-picker

ก็ตามชื่อมันเลย นั่นคือ เราสามารถที่จะกดเลือกสีแล้วแสดงออกมาเป็น Code สีในระบบต่าง ๆ ได้เลย ดีกว่าต้องไปเปิดเว็บแล้วก๊อปมาเยอะเลย

Git Plus

ปกติแล้ว ถ้าเราใช้ Git ใน Project ของเรา เวลาเราจะ Commit Code ของเราขึ้นไป หรือเปลี่ยน Branch เราก็จำเป็นต้องสลับไปอีกโปรแกรมเพื่อจัดการ แต่ Git Plus จะช่วยย่นเวลาของเราได้เลย เพราะเราสามารถที่จะ Commit Code ของเราใน Atom ตรง ๆ ได้เลย และยังสามารถจัดการ Branch และฟีเจอร์อื่น ๆ ของ Git ได้ทั้งหมดเลย

Git Time Machine

เมื่อกี้เป็น Package สำหรับจัดการ ตอนนี้เราจะมาดู Log กันบ้างว่า เราทำอะไรใน Git ไปเมื่อไหร่ ยังไง และถ้าเป็นการ Commit เราก็ต้องดูอีกว่า Code เก่ามันต่างจาก Code ใหม่ยังไงอีก
Package นี้เมื่อเราเปิดหน้าต่างออกมาเราจะเห็นเป็นก้อนกลม ๆ อยู่ใน Timeline เราสามารถย้อนดู Code เก่า ๆ ของเราโดยแค่ คลิก และจะมีการ highlight ว่าบรรทัดไหนถูกเพิ่มขึ้นมา หรือลบออกไป

Todo-show

ผมเป็นคนนึงที่เวลาเขียน Code จะเขียน Reminder ตัวเองเสมอ เช่นพวก TODO, CHANGED หรือ REVIEW เจ้า Todo-show มันจะคอยเข้าไปหาว่าใน Project มีพวก Reminder อยู่ตรงไหนบ้าง แล้วแสดงออกมาให้เราดูเป็นรายการไปเลย สะดวกมาก ๆ (Text Editor ตัวอื่นเขาก็มีกันหมดเลยนะ)

Rest Client

ตัวนี้พึ่งเจอเมื่อไม่นานมานี้เลย หลัก ๆ มันสามารถที่ทำให้เราทดสอบการเรียก REST API ต่าง ๆ ได้ใน Atom โดยไม่ต้องพึ่งโปรแกรมอื่นเลย โดยเราสามารถใส่ Header และ Payload ก็ได้ ถ้าเราต้องการ
สารภาพบาปว่า ช่วง Imagine Cup ไปซื้อ Paw มาหลายสิบเหรียญที่ความสามารถเหมือนกับ Rest Client เลย แต่ Rest Client ง่ายกว่า เพราะมันทำงานอยู่ใน Atom เลย เราแค่เรียกมันขึ้นมาผ่าน Shortcut ก็ได้แล้ว เอาเงินคืนมา !!!

สรุป

ก็ผ่านไปกับ 10 Atom Package ที่ผมใช้อยู่บ่อย ๆ จริง ๆ มันมีมากกว่านี้อีก ส่วนใหญ่จะเป็นพวก Snippet ของ Framework ต่าง ๆ ที่ผมใช้เช่น Laravel หรือ Bootstrap อะไรทำนองนั้น เลยไม่ได้พูดถึง ถ้าใครใช้อะไร ก็ลองบอกหน่อยครับ เพื่ออยากจะลองใช้บ้าง และสำหรับใครที่จะไม่รู้จะใช้อะไร ลองเข้าไปดูได้ในเว็บของ Atom ได้เลย