[Part 6] Coding on Vim: NERDTree ทำไฟล์ explorer บน Vim

สวัสดีครับ บทความชุด Coding on Vim ก็มาถึง Part 6 ซึ่งในบทความนี้ผมจะมาแนะนำปลั๊กอินที่ช่วยให้เราจัดการไฟล์บน Vim ได้โดยไม่ต้องใช้พวกโปรแกรม Finder(Mac) หรือ File explorer (Windows, Linux) ทำให้เราสามารถอยู่บนหน้าจอ Vim ได้ตลอดเวลา ไม่ต้องสลับหน้าจอไปมา และ Plugin ตัวนี้ชื่อว่า NERDTree ซึ่งหลักๆ เราจะเอาไว้หาไฟล์​ และใช้คำสั่งจัดการไฟล์พื้นฐาน

 

NERDTree [Github][Vimawesome]

หน้าตามันก็จะเป็นแบบนี้ จะเห็นได้ว่ามันมีแทบข้างๆ ที่เป็นรายชื่อของไฟล์ในโปรเจคเราออกมาให้ และสำหรับการติดตั่งนั่นไม่ยากก็เข้าไปในลิ้ง NERDTree ที่ผมแปะให้ จากนั่นก็ตาม Part 2 [link] ที่ผมได้เคยสอนไป เท่านี้ก็เสร็จรีบร้อย

 

:NERDTreeToggle

สำหรับการเรียกเปิดหน้าต่างของไฟล์นั่น เราจะเรียกฟังก์ชันชื่อว่า :NERDTreeToggle ใน vim ครับ มันก็จะเปิด-ปิดให้เอง แต่ว่ามันพิมพ์ยาวไปใช่ไหม ผมแนะนำให้เปิดไฟล์ vimrc แล้วเพิ่มคำสั่ง “map <C-n> :NERDTreeToggle<CR>” ลงไปแล้วก็เซฟ จากนั้นลองกด ctrl+n มันก็จะไปเรียกคำสั่ง :NERDTreeToggle ให้ทันทีแทนการพิมพ์ยาวๆ นะครับ สำหรับใครที่ยังไม่เคยอ่านเรื่องการใช้งาน vimrc และการตั่งค่าคีย์บอร์ด ผมแนะนำให้ไปอ่าน Part 4[link] นะครับ จะเข้าใจมากขึ้น

 

จัดการไฟล์ด้วย NERDTree

ด้วยเหตุที่ว่าเราทำงานกับ vim ที่เป็น command line ดังนั่นการจะสร้างไฟล์ใหม่ ลบไฟล์ หรือแม้กระทั่งคัดลอกไฟล์ นั่นเป็นไปได้ยาก อาจจะต้องใช้วิธีการปิด-เปิด vim ใหม่เพื่ออกไปใช้คำสั่งของ OS หรือใช้โปรแกรมที่เป็น UI จัดการแทน แต่ปัญหานี้แก้ได้ด้วย NERDTree เพียงการกด m(เอ็มเล็ก) บนคีย์บอร์ดในขณะที่อยู่ Normal Mode จากนั่นจะมีหน้าตามาให้เลือกการทำงานแบบนี้

และการจะเรียกใช้หน้าต่างจัดการไฟล์ต้องมีเงือนไขว่า cursor ต้อง active อยู่ที่หน้าต่างของ NERDTree นะครับ และกด m (เอ็มเล็ก) เราก็จะสามารถใช้งานมันได้ทันทีโดยมี Options ดังนี้

  • กด a เป็นการเพิ่มไฟล์/โฟลเดอร์ใหม่เข้าไป ถ้าหากเพิ่มไฟล์เพียงแค่พิมพ์ชื่อโดยไม่ต่อท้ายด้วย / (slash) เราจะได้การเพิ่มไฟล์ใหม่ แต่ถ้าใส่ / (slash) ต่อท้ายเป็นการเพิ่มโฟลเดอร์นะครับ อันนี้จำให้ดี
  • กด m ย้ายไฟล์นั่นเอง หรือจริงๆ คือการทำ Cut นะครับ และด้วยความสามารถนี้เราสามารถที่จะใช้มันสั่ง rename ไฟล์ได้ด้วยได้ เพียงแค่พิมพชื่อใหม่ลงไปเลยระบบจะ rename ให้ ซึ่งจริงๆ แล้วมันคือการสั่ง “mv -original -dest” นั่นเองครับ ใครใช้ระบบ Unix บ่อยๆ จะเข้าใจไม่ยาก
  • กด d ลบไฟล์
  • กด r คือการเรียกพวกโปรแกรมไฟล์ manager ของ OS ขึ้นมาครับ
  • กด q คือการเปิด info ขึ้นมา (ใน Mac นะ OS อื่นไม่แน่ใจ)
  • กด c ก็ทำการ copy ไฟล์
  • กด l คือการสั่ง ls -al หรือใน windows จะเป็น dir ปกติผมจะใช้มันเปิด path ให้แล้วก็อบออกไปใช้งานครับ

 

การ Integrate NERDTree กับ Git

ปกติถ้าใครคุ้นเคยกับการใช้ Editor หรือ IDE ตัวอื่นๆ อยู่แล้ว จะสังเกตว่ามันจะมีการทำ Git Diff ให้ที่ตัวไฟล์ หรือโฟลเดอร์แบบนี้

 

 

ซึ่งจะทำให้เรารู้ว่าโฟรเดอร์ หรือไฟล์ไหนมีการแก้ไข หรือเพิ่มใหม่นั่นเอง และใน Vim เราก็มีให้ทำเหมือนกันโดยใช้ Plugin ที่ชื่อ nerdtree-git-plugin การติดตั่งก็เหมือนเดิมที่ผมเคยสอนไปนะครับ ตัวนี้ใช้งานง่ายไม่ต้องทำไรเลย แต่ต้องลง NERDTree ก่อนเท่านั้นเองครับ และหน้าตก็จะออกแบบประมาณนี้

ก็จะเห็นได้ว่ามันจะมี status บอกให้เรารู้ว่าไฟล์ไหนถูกแก้ไข และโฟลเดอร์ไหนนั่นเอง

 

Multitasking windows

ใน Vim เองก็สามารถเปิดโค้ดทำงานได้หลายๆ หน้าจอนะครับ แบบนี้

วิธีการก็ง่ายมาก ถ้าต้องการเปิดหน้าต่างในแนว vertical (ตั่ง)ให้กด s และกด i สำหรับเปิดจอแนว horizontal (นอน) เพียงเท่านี้เราก็จะทำงานได้หลายๆ หน้าจอพร้อมๆ กัน อย่าลืมว่า cursor ต้องอยู่ที่หน้าจอ NERDTree นะครับ

เทคนิคเพิ่มเติม สำหรับการสลับ cursor ระหว่าง หน้าจอให้กด ctrl+w แล้วตามด้วย h, j , k , l เพื่อเลือกว่าอยากจะย้ายไปหน้าจอหน้าไหน ในกรณีที่มีหลายหน้า แต่ถ้าขี้เกียจกด พวก h, j , k , l ก็ให้กด crtl+ww มันจะเลื่อน cursor แบบ round robin หรือวนไปตามลำดับให้เราครับ

Facebook Comments