Atom Packages ที่ใช้แล้วจะ Cool

ก่อนอื่นเราต้องมาทำความรู้จักกับไอเจ้า Atom ตัวนี้ก่อน

Atom เป็นโปรแกรม Text editor ที่ถูกพัฒนาขึ้นบน Github ซึ่งในช่วงแรกๆ อาจจะยังทำอะไรไม่ค่อยได้ และบัคเยอะมาก แต่หลังๆ มานี้ มีคนใช้มันเยอะขึ้น และบัคก็ได้ถูกแก้ไขเรื่อยๆ จนทำให้ Atom เป็นที่นิยมและมี package ออกมามากมาย ซึ่งตัวมันจะถูกเขียนด้วย HTML, CSS และ JS และรันบน Electron เจ๋งป่ะละ

Logo of Atom Editor

มาดู Package ที่น่าใช้กันดีกว่า

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

• File-Icons

ถ้ามีไอคอนไว้ดูว่าไฟล์นั้นเป็นไฟล์ประเภทไหน ก็อาจจะลดเวลาในการเหลือบตาไปมอง type ไฟล์ที่อยู่ข้างหลังของชื่อ ยิ่งถ้าเป็น project ใหญ่ และมีไฟล์เยอะๆ

ตัวอย่างไอคอนจาก package นี้

• Minimap

Minimap เอาไว้แสดงโค้ดย่อ จะตั้งค่าให้แสดงทางด้านขวามือหรือซ้ายมือก็ได้ จะทำให้เราเลื่อนหาโค้ดในตำแหน่งที่ต้องการได้เร็วขึ้น

Minimap ทางด้านขวามือ

• Linter

linter เป็นตัวช่วยในการ debug code ที่เราเขียน ซึ่งจะช่วยให้เราเห็นได้ง่ายขึ้นว่าเราเขียนโค้ดผิดหรือเปล่า

• Color-picker คู่กับ Pigments

Color-picker เราจะสามารถที่จะเลือกสีแล้วแสดงออกมาเป็น Code สีในระบบต่าง ๆ ได้เลย ไม่ต้องเสียเวลาต้องไปเปิดเว็บแล้วก๊อปมา ส่วน Pigment จะเป็นการแสดงสีอยู่บน Text ที่เป็นข้อมูลสี ทำให้เราเห็นภาพมากขึ้นว่า เราใช้สีอะไร แบบ Real-time เลยด้วย

การใช้ Color-picker กับ Pigments

• Todo-show

เวลาเขียน Code คนส่วนใหญ่มักจะเขียน Reminder เสมอ เช่น TODO, NOTE หรือ REV ไอเจ้า Todo-show มันก็จะคอยหาว่าใน Project เรามีคำพวกนี้อยู่ตรงไหนบ้าง แล้วแสดงออกมาให้เราดูเป็นรายการ ทำให้มันง่ายและสะดวกมากขึ้นเลยจ้า

แสดงผล Reminder ที่มีใน Project

• Atom-beautify

Beautify จะช่วยให้เราจัดฟอร์แมตของโค้ดให้สวยงามขึ้น

ก่อนและหลังการทำ beautify

• Script

Script เป็นตัวช่วยที่จะทำให้เรา run code ของเราได้ในเจ้า Atom ตัวนี้ได้เลย และจะเห็น output ทันที (ปุ่มลัด ctrl+shift+b)

โค้ดและผลการรันโค้ด

ขอแถม UI Theme & Syntax Theme ที่ใช้อยู่ให้ดูด้วย

ตัวที่ผมใช้อยู่ ชื่อ Dracula ถึงจะดาร์ก แต่ก็มีความแบ๊วในตัวเอง พื้นหลังจะเป็นสีเข้ม จะไม่ออกดำสนิท จะออกสีครามมากกว่า และจะมีสีชมพูแซมๆ อยู่นิดหน่อย เช่น scroll bar ส่วน Syntax จะเน้นไปที่สีสันสดใส เพื่อให้ตัดกับสีพื้นหลัง รวมๆแล้วโอเคเลยแหละ

ตัวอย่าง dracula theme

ถ้าใครไม่ชอบ theme นี้ ยังมี theme มีมากมายให้เลือกโหลดมาใช้กัน

ขอเสริมอีกนิด

Atom สามารถใช้ได้กับทุก platform ไม่ว่าจะเป็น OS X, Windows หรือ Linux และสามารถแยกส่วนการใช้งานแบบ multiple panes ได้อีกด้วย

ลองไปโหลดมาใช้กันได้เลยที่

A hackable text editor for the 21st Century

Atom ร้องเพลง อยู่นี้ไง แล้วจะมีสักคนไหม ที่จะมาร้องเพลงของเรา