NetBeans Tips#2 ใช้งาน Code Auto-complete
บทความที่ 3 ในซีรี่ส์ NetBeans IDE นะครับ
วันนี้จะพูดถึงเรื่อง Code Auto-completion ของ NetBeans นะครับ ฟีเจอร์นี้ถือเป็นฟีเจอร์มาตรฐานของ IDE ทุกตัวเลยก็ว่าได้ (ใครไม่มีเชยแย่เลย) .. สำหรับฟีเจอร์นี้ เป็นฟีเจอร์ที่ผมคิดว่าผมใช้บ่อยมากที่สุดของ NetBeans IDE เลยนะ .. ปกติแล้ว Code Auto-completion ถูกเปิดใช้งานโดยอัตโนมัติอยู่แล้วครับ และยังปรับแต่เพิ่มเติมได้ด้วยนะ โดยไปที่เมนู Tools > Options และเลือกแท็บ Editor > Code Completion ครับผม เลือกตั้งค่าแยกภาษาก็ได้นะ
การทำงานของ Code Auto-completion ของ NetBeans IDE คือ จะทำงานอัตโนมัติเมื่อเราเคาะ space ครับ ทุกสิ่งทุกอย่างที่มีความเป็นไปได้ว่าจะมาต่อโค้ดตรงนั้น ก็จะโผล่ขึ้นมา พร้อม document ครับ .. ในรูปผมเคาะ space หนึ่งครั้งหลังแท็ก <body> ครับ เราสามารถใช้ลูกศรเลื่อนขึ้น-ลงบนคีย์บอร์ด เพื่อเลือกโค้ดที่เราต้องการ แล้วกดปุ่ม Enter มันก็จะเติมโค้ดให้เราอัตโนมัติครับ
ถ้าเป็น NetBeans for PHP ก็แน่นอนว่าจะต้องมี Auto-completion สำหรับโค้ด PHP ด้วย ในภาพข้างล่าง ผมพิมพ์เครื่องหมาย $ (dollar sign) ซึ่งก็หมายถึงผมต้องการประกาศตัวแปรในโค้ด เจ้า NetBeans ก็ pop-up ขึ้นมาให้ครับ
แค่นี้มันยังน้อยไป NetBeans IDE ยังสามารถใช้งาน Auto-completion กับ Framework ต่างๆได้ด้วยนะ (แต่ต้องสร้างโปรเจ็คใน NetBeans IDE ก่อนนะครับ) .. ลองกับ WordPress บอกหมดทั้งชื่อฟังก์ชั่น, อาร์กิวเม้นต์ พร้อมบอกด้วยว่าอยู่ที่ไฟล์ไหน
สมมุติผมเลือกซักฟังก์ชั่นนึง ที่มีอาร์กิวเม้นต์เยอะๆนะครับ ตัว NetBeans IDE จะใส่อาร์กิวเม้นต์ทั้งหมดมาให้เลย ซึ่งสังเกตว่าจะมีกรอบสีม่วงรอรับค่าจากคียบอร์ด เราก็พิมพ์ค่าของอาร์กิวเม้นต์ที่จะส่งไปครับ แล้วพอกด Enter หรือ Tab เจ้ากรอบสีม่วงนั้น ก็จะเลื่อนไปยังอาร์กิวเม้นต์ถัดไปให้ทันที … ต่างกันแค่ตรงที่ กด Tab กรอบสีม่วงจะวนไปเรื่อยๆ จนถึงอาร์กิวเม้นต์สุดท้าย แล้ววนมาอาร์กิวเม้นต์ตัวแรกให้ใหม่ แต่ถ้ากด Enter เมื่อถึงอาร์กิวเม้นต์สุดท้ายแล้ว กด Enter อีกครั้ง cursor จะไปอยู่ท้ายประโยคแทนครับ
jQuery ก็มีนะ
จะทำงานกับ Auto-completion ให้ดี มันต้องเร็วและสะดวกกว่านี้ครับ ปกติจะหน่วงเวลาประมาณ 1 วินาที ก่อนที่มันจะ pop-up ขึ้นมา ถ้าคิดว่าช้าไป กดคีย์ลัดเพื่อ force ให้ตัว auto-complete โผล่มาทันทีเลยก็ได้ครับ คีย์ลัดนั้นก็คือ Ctrl+space ครับ กดปุ๊ป เด้งปั๊ปเลย
NetBeans IDE มันฉลาดพอที่จะเติมโค้ดที่มีเพียงค่าเดียว ให้ทันทีโดยที่ไม่ต้องกดเลือกครับ .. งงกันล่ะสิ ลองดูตัวอย่าง ผมต้องการพิมพ์ height ใน CSS ก็แค่พิมพ์ he แล้วกด Ctrl+space เจ้า NetBeans IDE ก็จะเติมโค้ดส่วนที่เหลือให้เลยทันที (พร้อมเครื่องหมาย colon ด้วยนะ) เพราะมันรู้แน่ๆว่า property ที่ขึ้นต้นด้วย he มีเพียง height อย่างเดียว เลยเติมให้ทันทีโดยไม่ต้องเสียเวลาครับ .. ซึ่งคีย์ลัด Ctrl+space เนี่ยผมใช้บ่อยมากกกกกกเลยล่ะ ประหยัดเวลาได้เยอะทีเดียว
Code-Autocompletion ใน NetBeans IDE เติมอะไรได้บ้าง
- Basic HTML, PHP, CSS, JavaScript
- ฟังก์ชั่นต่างๆใน Framework (ทั้ง PHP และ JavaScript Framework) พร้อม Argument
- Property, Method ของ class และ parent class
ลองไปเล่นกันดูครับ
9 Comments
Ming
September 10, 2010
ผมลองโหลดมาใช้แล้วครับรู้สึกว่า font ภาษาไทยมันแปลกๆ (ที่ default มาให้มันเป็น Monospaced) ไม่ทราบว่าคุณ Armno ใช้ font ตัวไหนครับ
ขอบคุณครับ
ArmNo
September 10, 2010
ถ้าบนลินุกซ์ ผมใช้ DialogInput ครับ
ส่วนบนวินโดวส์ ใช้ Trebuchet MS ..
พิมพ์ไทยเป็นยังไงไม่รู้นะ ปกติผมไม่ได้พิมพ์ภาษาไทยใน editor อ่ะครับ
Ming
September 11, 2010
ขอบคุณครับ
Disain
October 18, 2010
ขอบคุงมากคับ
ถ้า NetBeans จะเข้ามาอ่านเพิ่มเติมที่นี้
เด็กชายตัวเล็ก
November 11, 2010
ถามคุณอาร์มนิดนึงครับ
Auto Compltion ของ Jqury มันไม่ยอมขึ้นอ่ะครับ
ต้องทำยังไงบ้างครับ ผมเรียกไฟล์มาก็ปกติดี ไม่รู้ต้องปรับอะไรเพิ่มไหม ยังไงรบกวนด้วยนะครับ
ขอบคุณมากครับ
เด็กชายตัวเล็ก
November 13, 2010
ขึ้นแล้วครับ ผมไม่ได้รียก UI
ทีแรกนึกว่าใช้ Jquery เพียวๆได้ -.- พอดีปกติไม่ได้เล่น effect อะไรเทม่าไหร่ เลยไม่ได้ใส่
ตอนนี้เลยต้องใส่ให้มัน Auto code ให้
niyom
March 20, 2011
ผมใช้รุ่น 6.9 สามารถ เพิ่ม ส่วนของโค้ด html 5 ได้หรือไม่
ArmNo
March 20, 2011
ต้องลง zend coding มั้งครับ เพราะตัว netbeans เองยังไม่รู้จัก html5