Sublime กับความขี้เกียจ

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

  1. จำ syntax ภาษาไม่ได้
  2. พิมพ์ช้า
  3. ขี้เกียจ

เรื่องจำ Syntax ของภาษาไม่ได้นั้นไม่ถือเป็นปัญหาใหญ่เท่าไหร่ สาเหตุจริงๆมันเกิดขึ้นเพราะว่าในชีวิตการทำงานของผมนั้น ในภาษาและ framework สลับกันไปๆมาๆ ค่อนข้างมาก (CakePHP, Ruby on Rails, Python, AngularJS, บลาๆๆๆ) เลยมีปัญหาเกิดการสับสนในบางครั้ง ข้อนี้แก้ไขได้ด้วยการใส่ความตั้งใจเข้าไป(?)

ปัญหาต่อไปก็คือการพิมพ์ช้า ซึ่งถือเป็นปัญหาระดับชาติ ขนาดมีคอมเล่นเกมมาตั้งแต่มัธยมก็ยังพิพม์ช้าอยู่เลย อันนี้คงแก้ปัญหาไม่ได้ แต่เราจะพยายามใช้ IDE เมพๆ อย่าง Sublime มาช่วยแก้ปัญหานี้

ข้อสุดท้ายที่สำคัญที่สุด คือความขี้เกียจนั่นเอง อันนี้น่าจะเป็นผลต่อเนื่องมาจากข้อ 2 คือแบบ พิมพ์ช้าไง มันเลยขี้เกียจพิมพ์ เลยขิเกียจทำงานไง ไม่เคยอ้างนะ ไม่เลย

การแก้ปัญหา

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

http://www.sublimetext.com/3

Download + Install ให้เรียบร้อย เราจะพบกับโปรแกรมหน้าตาแบบนี้

Sublime Text 3

หน้าจอดำๆแบบนี้ แค่ดูก็ฉลาดแล้ว (ถึงแม้ผมจะใช้กรอบจะสีชมพูหวานแหววไปหน่อยก็เถอะ) ก่อนอื่นมาถึงก็ให้ทำการ Save ไฟล์ไปก่อนเลย เพื่อให้โปรแกรมมันเลือก Syntax ให้ ในที่นี้ให้เซฟเป็น .html

save

โอเค ตอนนี้เรามี Syntax Highlight เรียบร้อยแล้ว  ทีนี้ ลองพิมพ์โค้ดนี้ลงไป (ขอร้อง อย่า Copy นะ T-T)

 

คาดว่าแต่ละคนคงใช้เวลาในการพิมพ์แตกต่างกันไป เร็วบ้าง ช้าบ้าง แต่บทความนี้ มันเอาไว้สำหรับคนพิมพ์ช้าหนิ? แปลว่า Sublime มันต้องมีอะไรฉลาดๆให้เราสิ เพราะบทความนี้ มีไว้สำหรับการปัญหา 3 ข้อ ก็คือ 1. จำ Syntax ไม่ได้ 2. พิมพ์ช้า และ 3. ขี้เกียจ

ต่อไปนี้ จะเป็นการแก้ปัญหาง่ายๆ โดยใช้ Sublime ของเรานั่นเอง โดยเริ่มจาก ลบโค้ดทั้งหมดที่พิมพ์มาเมื่อกี้ออกให้หมด(!)

no-codeพิมพ์คำว่า html ลงไป

htmlกด Tab บนคีบอร์ด

done

OMGFWTFLOLROLF!!!!!! จะเห็นว่าทุกอย่างที่เรานั่งพิมพ์เมื่อกี้ สามารถพิมพ์เสร็จได้ภายใน 5 ตัวอักษร (h + t + m + l + Tab) ตรงนี้ สามารถแก้ปัญหาเรื่องการพิมพ์ช้า และการลืม syntax (โดยเฉพาะลืมใส่ <!DOCTYPE html>) ได้ แต่ไม่สามารถแก้ปัญหาเรื่องความขี้เกียจได้ เพราะทำแบบนี้ไปเราก็ขี้เกียจอยู่ดี แต่งานเสร็จไง เราไม่แคร์

นอกจากนี้ cursor ของเรายังอยู่ที่แท็ก <title> พร้อมให้เราใส่ Title ไปได้เลย รวมทั้งเรายังสามารถกด Tab อีกครั้ง เพราะให้ cursor เข้าไปที่แท็ก <body> ต่อได้เลย อะไรจะสะดวกขนาดนี้

ลองใส่ข้อมูลเข้าไปเล็กน้อย (<p> ก็ใช้ p + [Tab] ได้นะ ถ้าจะขี้เกียจขนาดนั้น)
p

ที่นี้ ไอเรื่องของคนขี้ลืม syntax เนี่ย ลืมล้างโลกขนาดไหนก็คงไม่ลืมพวก <p> <div> อะไรอย่างนี้กันหรอก แต่ถ้าเป็นอะไรยาวๆ อย่างพวก link css, script อะไรแบบนี้หละ แน่นอน เราก็สามารถใช้ link + [Tab] และ script + [Tab] ได้เช่นกัน

more

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

อะไรที่มากกว่านี้

นอกจากจะใช้กับพวก html หรือเหล่าภาษาพื้นฐานที่ Sublime มีมาให้แล้ว Sublime เองยังสามารถลงพวก Package ตัวช่วยต่างๆได้ โดยเพื่อความง่าย เราจะลง Package Control กันก่อน

https://packagecontrol.io/installation

ทำตามลิงค์ข้างบนที่ให้ไป Restart Sublime ซักครั้ง จากนั้นเราจะมาทำอะไรที่โหดๆกันต่อไป

พอเปิด Sublime ขึ้นมาอีกรอบแล้ว ให้เราเข้าในงาน Package Control ซึ่งสามารถเข้าถึงได้โดยการกดคีย์ลัด Ctrl+Shift+P (จำไว้ ได้ใช้บ่อยมาก) แล้วพิมพ์คำว่า package install เข้าไป กด Enter แล้วเราจะเจอ Package มากมาย

Package Install

packages

ในที่นี้ เราจะลองใช้ตัวช่วย syntax (เรียกอีกอย่างว่า Snippet) ซึ่งในตอนนี้ เราอยากใช้ Bootstraps 3 มากๆ เพราะมันเจ๋งดี

ในช่องเลือก Package พิมพ์คำว่า Bootstraps 3 ลงไป และเลือก Package อันแรกสุดนี้

bs3

ทีนี้ใน Bootstraps 3 Snippet ของเรา มันมีอะไรบ้างละ อยากรู้ ให้กด Ctrl+Shift+P เหมือนเดิม แล้วลองเลื่อนๆดู หรือจะพิมพ์คำว่า bs3 ไปเพื่อเป็นการ Filter ก็ได้ สังเกตุว่า มีให้เลือกเยอะมากๆ (ในรูปลบพวก <link>, <script> ไปแล้ว)

bs3-filter

ให้ทำการพิมพ์สิ่งที่อยู่ใน [[…]] ลงไป แล้วทำการกด tab เพื่อ generate code (ถ้าทำการคัดลอกโค้ดไป ให้ทำการลบ [[, ]] ออกให้หมด เหลือแต่ข้อความด้านใน แล้วกด [Tab] ได้เช่นกัน)

แต่ถ้าใครจำไอพวกนี้ไม่ได้ ก็ Ctrl+Shift+P เพื่อไล่หาไปได้เรื่อยๆเช่นกัน เยเย

 

จะได้โค้ดแบบนี้กันเลยทีเดียว

bs3-done

ปล. ตรงที่เป็น href=”//netdna…. src=”//code…. src=”//netdna…หากใช้การเปิดไฟล์ HTML ตรงๆ ไม่ได้ผ่าน Web Server ให้ใส่ http: เข้าไปหน้า // เช่น href=”http://netdna….

ถ้าลองเอาไปเปิดใน Web Browser หละ

preview

เห้ย นี้มันสุดยอกมากๆเลยนะเนี่ย เว็บออกมาหน้าตาสวยงาม มีแท็บเมนูด้านบนเรียบร้อน แถมเอาจริงๆ เว็บมันเป็น Responsive ด้วยซ้ำนะเนี่ย ซึ่งถ้าสังเกตุดูดีๆแล้ว เราเพิ่งพิมพ์ไปไม่กี่ตัวเอง

กับคำว่า My Site บน Title นอกจากนั้น เราไม่ได้พิมพ์อะไรเลย

สรุปแล้ว เราสามารถแก้ปัญหาในเรื่องของการจำ Syntax หรือ คำสั่งต่างๆไม่ได้เป็นอย่างดี เพราะเราสามารถกด Ctrl+Shift+P เพื่อส่องได้ นอกจากนี้ การพิมพ์ช้ายังไม่เป็นปัญหาอีกต่างหาก เพราะเราพิมพ์ไปไม่กี่ตัวเอง แต่ปัญหาเรื่องความขี้เกียจกลับเพิ่มพูน แต่ไม่เป็นไรมั้ง เพราะงานเราเสร็จไว แถมโค้ดก็ยังออกมามีคุณภาพอีกต่างหาก แถมบทความเรายังชื่อ “Sublime กับความขี้เกียจ” อีกด้วย ซึ่งมันก็เข้ากันดีมั้ง

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

 

One thought on “Sublime กับความขี้เกียจ

  1. […] Sublime ขอแนะนำให้อ่านบทความที่แล้วก่อนนะครับ […]

Leave a Reply

Your email address will not be published. Required fields are marked *