รีวิว Atom โปรแกรมแก้ไขข้อความแห่งอนาคต

หัวข้อกระทู้ ใน 'Programming' เริ่มโพสต์โดย iPokz, 12 พฤษภาคม 2014.

  1. iPokz

    iPokz ~" iPokz "~ Staff Member

    Atom เป็นโปรแกรมแก้ไขข้อความสุดล้ำจาก GitHub หลังจากเปิดซอร์ซ และได้นักพัฒนาจาก webupd8team สร้างไฟล์ไบนารีบน Ubuntu ไว้ให้ ผมก็ได้ฤกษ์ทดลองใช้งานและจะขอเขียนรีวิวสั้นๆ เกี่ยวกับว่าที่ผู้ท้าชิงตำแหน่งสุดยอดโปรแกรมแก้ไขข้อความจากแชมป์เก่าอย่าง vi และ Emcas ตัวนี้ครับ

    หน้าตาโปรแกรมในเสี้ยววินาทีแรกที่เห็น หลายคนคงนึกไปถึง Sublime Text อย่างแน่นอน ซึ่งก็อาจนับได้ว่าเป็นแรงบันดาลใจอย่างแรงกล้าเลยทีเดียว เพราะเมื่อลองกดปุ่ม ctrl+shift+p ก็จะมีเมนูอัจฉริยะแบบพิมพ์ค้นหา (ตัวโปรแกรมเรียกความสามารถนี้ว่า Command Palette) โผล่ขึ้นมาเช่นเดียวกันอย่างกับแกะเลยครับ (ฮาาา)

    [​IMG]

    ภาพ 1 หน้าตาโปรแกรมพร้อมข้อความต้อนรับเมื่อเปิดครั้งแรก

    อย่างไรก็ตาม ผมพบว่าด้วยความที่ Atom เติบโตมาภายใต้ร่มเงาของ GitHub ทำให้มันได้รับความสามารถเฉพาะตัวอันโดดเด่น 2 อย่างติดมาด้วย นั่นคือ

    1) ความสามารถในการทำพรีวิว Markdown แบบสดๆ ซึ่ง Markdown ตัวนี้เป็นแบบที่ถูกปรับแต่งเพิ่มความสามารถโดย GitHub เองอีก (มีชื่อเรียกว่า GitHub Flavored Markdown) มันถูกเคลมว่าเหมาะสำหรับการทำเอกสารประกอบโปรแกรมอย่างยิ่งยวด ด้วยความสามารถที่เพิ่มขึ้นมาอย่างการทำตาราง และการเน้นสีโค้ดของโปรแกรม

    [​IMG]

    ภาพ 2 การทำพรีวิว Markdown แบบสดๆ

    2) มีการเน้นบรรทัดที่ถูกแก้ไขจากการจดจำ (commit) ใน Git ครั้งก่อนอย่างชัดเจน ที่ด้านหน้าของแต่ละบรรทัดจะมีสีเขียว (มีข้อความเพิ่มเติม) สีแดง (ลบข้อความทิ้ง) หรือสีน้ำตาล (แก้ไขข้อความบางส่วน) กำกับไว้ และบอกชื่อกิ่งก้าน (branch) กำกับไว้ที่มุมล่างขวา พร้อมทั้งสรุปว่ามีการแก้ไขไปแล้วกี่บรรทัด

    [​IMG]

    ภาพ 3 บรรทัดที่ถูกแก้ไขจากการจดจำที่ถูกเน้นสีด้านหน้าบรรทัด

    ถึงกระนั้น ตัว Atom เพียวๆ ก็ยังขาดความสามารถไปหลายอย่าง เช่น การแสดงแผนที่ย่อ (minimap) แบบเดียวกับ Sublime Text ซึ่งแก้ไขได้ง่ายๆ เพียงแค่ติดตั้งแพ็คเกจเพิ่มเติมลงไป โดยสามารถทำผ่านคอมมานด์ไลน์ได้ดังนี้

    $ apm install minimap


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

    ส่วนใครที่กลัวหน้าต่างดำๆ พร้อมการพิมพ์คำสั่งยั้วเยี้ย ก็สามารถลงแพ็คเกจได้ผ่านตัวโปรแกรมโดยเปิด Settings เข้าไปที่ Packages (หรือกด ctrl+shift+p setting package) แล้วค้นหาแพ็คเกจมาลงเพิ่มได้ตามใจชอบ วิธีนี้เมื่อลงเสร็จแล้ว แพ็คเกจจะถูกโหลดขึ้นมาใช้งานทันที ไม่จำเป็นต้องปิดโปรแกรมแล้วเริ่มใหม่ด้วยครับ

    [​IMG]

    ภาพ 4 ติดตั้งแพ็คเกจผ่านตัวโปรแกรมเลยก็ได้

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

    [​IMG]

    ภาพ 5 หน้าต่างแสดงรายละเอียดแพ็คเกจ Vim Mode

    ด้านธีมนั้นมี 2 แบบหลักๆ คือ UI (สีสันหน้าต่างโดยรวม) กับ syntax (สีโค้ดโปรแกรม) ซึ่งถ้าหากว่าธีมที่มีให้ยังน้อยไป ก็สามารถลงธีมเพิ่มเติมได้ (เป็นแพ็คเกจอีกเช่นกัน)

    [​IMG]

    ภาพ 6 หน้าต่างเลือกธีมและติดตั้งเพิ่มเติม

    หรือถ้าหากสีสันที่มีให้เลือกยังไม่ถูกใจอีก ก็สามารถแก้ไขสีธีมได้เอง โดยอาจเริ่มจากหาจากธีมที่ต้องการแก้ผ่านช่อง Filter packages ด้านซ้ายมือ แล้วเลือก Open in Atom หลังจากนั้นก็ลงมือแก้ไขไฟล์ LESS (เป็น CSS แบบพัฒนาความสามารถให้ตั้งตัวแปร/สร้างคลาสได้) ตัวอย่างนี้ผมอาศัยความช่วยเหลือจากแพ็คเกจ Color Picker ในการเลือกสีอีกทีหนึ่ง

    [​IMG]

    ภาพ 7 แก้ไขสีธีมผ่าน Color Picker

    Merge Conflicts เป็นอีกแพ็คเกจอีกหนึ่งที่น่าสนใจ มันทำหน้าที่เพียงแค่เน้นส่วนที่ Git ควบรวมกิ่งก้าน (merge branch) แล้วเกิดข้อขัดแย้ง (conflict) ให้เด่นขึ้นมาเพื่อการเปรียบเทียบที่ง่ายขึ้น พร้อมทั้งตัวเลือกว่าจะแก้ไขข้อขัดแย้งนี้ไปในทางไหน และเตือนว่ายังเหลือข้อขัดแย้งใดที่ยังไม่ได้แก้ไขอีกบ้างในไฟล์อื่น

    [​IMG]

    ภาพ 8 ดูข้อขัดแย้งจากการควบรวมกิ่งก้านด้วย Merge Conflicts

    ทั้งนี้ หากแพ็คเกจที่มีให้เลือกยังไม่เจ๋งพอ ธีมที่มีอยู่ก็สีงั้นๆ อยากจะพัฒนาของใหม่มาใช้เองแต่ต้น ก็สร้างแพ็คเกจ/ธีมเปล่าๆ ได้ผ่านคำสั่ง

    $ apm init --package my-command
    $ apm init --theme my-style


    ภาษาที่ใช้สำหรับพัฒนาแพ็คเกจคือ CoffeeScript ครับ

    สุดท้ายนี้อย่าลืมว่า Atom เป็นโปรแกรมที่รันบน Node.js แล้วแสดงผลผ่าน Chrome อีกที ดังนั้นหากเกิดข้อผิดพลาดขึ้น ก็อย่าได้ตกใจไปถ้าจะมีหน้าต่าง Inspect Element ที่แสนจะคุ้นเคยโผล่มาเช่นนี้

    [​IMG]

    ภาพ 9 หน้าต่าง Inspect Element ภายในโปรแกรม Atom

    เนื่องจากโปรแกรมยังไม่เสร็จดี (และจากสไตล์โปรแกรมยุคนี้ที่ชอบพัฒนาต่อเติมกันไปเรื่อยๆ ไม่มีวันเสร็จ) เจอแบบนี้แล้วก็อย่าลืมกดไปที่แท็บ Console แล้วจดข้อความแจ้งข้อผิดพลาดไปบอกนักพัฒนาที่หน้าแจ้งบั๊กของโครงการด้วยนะครับ

    ปล. ใน build ที่ผมรีวิวนี้ ภาษาไทยบน Atom ยังใช้งานไม่ได้ครับ

    Atom Text Editor, GitHub, Open Source, Review
     
  2. chaziita

    chaziita Member

    เยี่ยมค่ะ
     
  3. ladyaphroditeholyz

    ladyaphroditeholyz New Member

  4. theanime.xyz9131

    theanime.xyz9131 New Member

แบ่งปันหน้านี้