Atom Text Editor เป็น Editor น้องใหม่จากค่าย GitHub ซึ่งออกมาให้ใช้ได้ระยะหนึ่งแล้ว โดยตัวโปรแกรมออกมารองรับเฉพาะผู้ใช้ OSX เท่านั้น แต่ก็มีนักพัฒนาได้พอร์ทไปยังระบบปฏิบัติการอื่นๆ ด้วย เช่น Linux และ Windows เป็นต้น Atom ในแนวคิดการออกแบบมาคล้ายกับ Emac และ Sublime Text คือเป็น Editor ครอบจักรวาล ซึ่งตั้งต้นด้วย Edit ความสามารถเบื้องต้นธรรมดาๆ แต่เปิดให้เขียน plugin เพิ่มเติมได้ ซึ่งทำให้เราเพิ่มความสามารถของ Atom ได้ตามที่เราต้องการและที่สำคัญ Atom ใช้งานฟรีครับ :)

สำหรับท่านที่ใช้งาน OSX ไม่มีปัญหาสักเท่าไรกับการติดตั้ง Atom สามารถดาวน์โหลดมาติดตั้งกันได้เลย แต่สำหรับท่านที่ใช้ Ubuntu ต้องติดตั้งจาก PPA ดังนี้

sudo add-apt-repository ppa:webupd8team/atom

sudo apt-get update

sudo apt-get install atom

จากนั้นก็เริ่มใช้งานกันได้เลย สำหรับหน้าตาก็จะคล้ายๆ กับ Sublime Text และปุ่มคีย์ลัดจะคล้ายๆ กัน เดี๋ยวเรามาลองติดตั้ง package เพิ่มความสามารถให้กับ Atom กันดีกว่า เปิด Atom ขึ้นมาแล้วคลิกไปที่เมนู File > Preferences… เลือกเมนู Packages ด้านข้าง

แล้วพิมพ์ Atom Bootstrap แล้วติดตั้ง Package ที่ชื่อ Atom Bootstrap3 ลงไปครับ ง่ายๆ แค่นี้เอง

จากนั้นมาลองเล่น Plugin นี้กันครับ สำหรับท่านที่เล่น Bootstrap คงทราบดีว่า Bootstrap ช่วยให้คุณพัฒนาเว็บไซต์ได้เร็วมากแค่ไหน และที่สำคัญสิ่งที่ Bootstrap มีให้ย่นระยะเวลาทำงานของคุณไปเยอะ ทั้ง 12 Grids System, CSS และ JQuery Plugin ที่มีให้สามารถเรียกใช้ได้เลย แต่ปัญหาคือ จำไม่ได้ว่า Bootstap ใช้ class css อะไรบ้างในการเรียกใช้ และที่สำคัญคือจำไม่ได้ทั้งหมดเพราะมันเยอะมาก ทำให้เราต้องคอยเปิดคัมภีร์ Bootstrap กันอยู่เรื่อยๆ :) ทีนี้เรามาลองใช้ Atom กันว่าจะง่ายขนาดไหน

ให้คุณเปิดไฟล์ใหม่ขึ้นมาดังนี้ File > New File หรือกด Ctrl+N จากนั้นบันทึกไฟล์นี้เป็นไฟล์ html ชื่อ test.html จากนั้นเราจะใช้ความสามารถของ Plugin Atom Bootstrap ที่เราเพิ่งติดตั้งไปดังนี้ ให้พิมพ์ คำว่า html- แล้วกดปุ่ม tab คุณจะพบว่า Atom เอา code snipet มาวางให้อัตโนมัติ

ถ้าสังเกตดูจะพบว่า url ของ css และ bootstrap ขาดอะไรไปบางอย่าง คุณสามารถใช้ความสามารถของ multi cursor เพื่อแก้ไขจุดเดียวแต่แก้ไขข้อความได้ทุกจุดที่เหมือนกัน ให้เอา cursor เลือกคำว่า //netdna แล้วกด Ctrl+D ไปเรื่อยๆ

คุณจะพบว่า Atom เลือกคำว่า //netdna ในจุดที่เหมือนกันในเอกสาร ให้เลือน corsor กลับมาก็จะพบว่าคุณมี corsor กระพริบอยู่ 3 จุด คุณสามารถพิมพ์คำว่า http: เพิ่มเข้าไปได้เลยง่ายๆ ดังนี้

มาลองอย่างอื่นกันบ้างครับ คนใช้ Bootstrap ชอบ Narvigation Bar สวยๆ เรามาลองสร้างกันดูครับ เลือน corsor มาอยู่ในส่วน body แล้วพิมพ์ navbar แล้วกด tab

เราจะพบว่า Atom เพิ่ม code snipet ส่วน Navigation Bar ให้เราเต็มไปหมดเลย ทั้ง Navigation Bar logo, Menu, Search Form และ Right Navigation Bar คุณสามารถเลือกได้ว่าจะลบจะเพิ่มอะไรได้หลังจากนี้

มาลองอย่างอื่นบ้างครับ เลื่อน corsor ไปท้าย tag nav จากนั้น

  • พิมพ์ con แล้วกด tab
  • พิมพ์ row แล้วกด tab
  • พิมพ์ col-lg แล้วกด tab แก้ตัวเลข 1-12 เป็น 6 เลือน corsor ไป 1 บรรทัด
  • พิมพ์ well แล้วกด tab เลือน corsor ไป 1 บรรทัด
  • พิมพ์ lorem แล้วกด tab
  • เลือกตั้งแต่ div col-lg-6 แล้วกด Ctrl+Shift+D เพื่อคัดลอกและวาง

จะได้โค้ด html ดังภาพ

ลองเปิดไฟล์นี้ด้วย Browser ดูครับ เราจะได้ผลลัพท์ดังนี้

เล่นพอสนุกสนานในเวลาอันรวดเร็วครับ สำหรับ snipet อื่นๆ ของ Atom Bootstrap สามารถอ่านเพิ่มเติมได้ที่เว็บไซต์ Atom Bootstrap3 เอาไปลองเล่นกันดูนะครับ

Comments are closed.