Visual Studio Code คืออะไร มารู้จักกับ VS Code ดีงามอย่างไร ทำอะไรได้บ้าง

เจ้า Visual Studio Code หรือที่เราเรียกย่อๆ ว่า “VS Code” นั้นคือ Editor ตัวหนึ่งที่ถูกสร้างมาอำนวยความสะดวกให้เหล่าโปรแกรมเมอร์ อาจเรียกได้ว่าเป็น ตัวท็อบของรุ่น ตัวสุดของภาค :mechanical_arm: ทำได้ทั้งงานปรับแต่ง หรือ แก้ไขโค้ตประมาณว่า(code optimized editor) คล้ายๆ กับ Sublime Atom และ Notepad++ ที่หลายท่านอาจเคยใช้งานกันมาแล้ว

icon-VSCode

ผู้อยู่เบื้องหลังและพลักดันออกมาสู่ชาวโลกก็คือไมโครซอฟต์นั้นเอง เราอาจคุ้นหน้าคุ้นตากับ Visual Studio กันมาบ้างแต่ Visual Studio Code ถูกแยกร่างออกมาให้เบาและกระชับกว่า ไม่มีในส่วนของ GUI Designer เน้นแค่ Coding เพียวๆ เท่านั้น VS Code รอบรับหลายๆ OS เช่น Window Mac Linux ทั้งยังทำงานข้ามแพลตฟอร์มกันไปมาได้ และยังรองรับภาษาโปรแกรมหลายร้อยภาษาอีกด้วย ที่สำคัญคือฟรีนะครับ :grin:

VS Code แน่นอนว่าไม่ได้มาเดียวๆ นำทีมมาพร้อมกับความสามารถในการติดตั้งเครื่องมือเสริม (Extension) ซึ่งมีให้เลือกใช้งานแตกแขนงออกไปได้อีกมากมาย

เท่านั้นยังไม่พอพี่ไมโครซอฟต์ ที่พึ่งเข้าซื้อ GitHub มาได้ไม่นานก็ทำการเพิ่มฟีเจอร์ที่เชื่อมต่อกับ Git ได้อย่างรวดเร็วเต็มที่ มีฟังก์ชั่นในการ commit, push & pull มาให้เลย ตรงนี้ชอบมาช่วงหลังๆ ผมใช้บ่อยมาก

อีกจุดเด่นสำคัญของ VS Code ที่ผมอยากจะหันมาใช้ก็เพราะระบบ IntelliSense นี้แหละครับ มันเหมาะสมกับคนขี้เกียจพิมพ์ อย่างผมเป็นอย่างมาก :grin:

:diamond_shape_with_a_dot_inside: ตรงนี้เป็นตัวอย่างสำหรับสัญลักษณ์ภายในที่อยู่ในโปรแกรม

:diamond_shape_with_a_dot_inside: อีกหนึ่งฟีเจอร์ที่คนมีจอใหญ่ ๆ คงจะชอบ นั้นคือ การแยก Layout แบ่งเป็นหลายหน้าต่าง ดูพร้อมกันได้เลย

คุณสมบัติเพิ่มเติมและอื่น ๆ

:diamond_shape_with_a_dot_inside: Format on Paste จัดรูปแบบซอร์สโค้ดทันทีที่เรานำมาไว้ในโปรเจค

image

:diamond_shape_with_a_dot_inside: Language specific settings กำหนดการตั้งค่าเฉพาะสำหรับแต่ละภาษาได้

:diamond_shape_with_a_dot_inside: Inline variables display ดูค่าตัวแปรอินไลน์ในขณะที่การดีบั๊ก

:diamond_shape_with_a_dot_inside: Improved task running support เรียกใช้หลายคำสั่งจาก Task เดียวกัน

:diamond_shape_with_a_dot_inside: Preserve case for global search and replace เก็บตัวอักษรในการค้นหา / แทนที่ แบบหลายไฟล์พร้อมกัน

:diamond_shape_with_a_dot_inside: Settings editor string array validation ตรวจสอบค่าตัวแปร String array จำแนกน้อยไปหา - มากและแสดงค่าสมาชิกใน array ในรูปแบบ Glob patterns

:diamond_shape_with_a_dot_inside: Multi-line search in Find การค้นหาหลายบรรทัด หลายคำพร้อมกัน

:diamond_shape_with_a_dot_inside: Add missing await Quick Fix เป็นการเพิ่มการแก้ไขที่เราอาจมองข้ามไปแบบปัจจุบันทันด่วนเลยทีเดียวเฟียวมาก

และที่ชอบมากที่สุดคงนะหนีไม่พ้นฟีเจอร์นี้ สามารถใช้ส่วนขยาย Remote Development แก้โค้ตใน WSL, คอนเทนเนอร์ หรือ server เสมือนกับเรารีโมท เข้าไปทำบน server หรือ host เองเลย พูดง่ายๆ ภาษาบ้านๆ ก็คือ เราเหมือนรีโมท ผ่าน VScode เราทำอะไรผ่าน VScode มันก็คือเราทำอยู่บน server จริงๆ นั้นเอง การประยุกย์ใช้งานง่ายๆ เช่น ใช้คอมไฟล์โปรแกรม ใน Raspberry pi โดยไม่ต้องรีโมทเข้าไป หรือ FTP ไฟล์ ออกมาก่อนแล้ว upload เข้าไปอีกที อืมลดขั้นตอนไปได้เยอะเลย

:diamond_shape_with_a_dot_inside: ตรงนี้เป็นบางช่วงบางตอนที่ผมพยายาม นำมาใช้แทน Arduino IDE หลังจากนี้คงจะใช้ VScode แทนไปเลย ถ้าไม่ติดเรื่องต้องมานั่ง config .json file และ path กันให้วุ่นอ่ะนะครับ

:warning: บทความนี้เรียบเรียงและเขียนขึ้น เพื่อเพิ่มความรู้ความเข้าใจของผม เท่านั้น หากมีตรงไหนตกหล่น ต้องขออภัยด้วยครับ และทุกท่านสามารถคอมเม้นเพื่อนำไปสู่การแก้ไข ให้ถูกต้อง สมบูรณ์ยิ่ง ๆ ขึ้นไป


ที่มา :pray:




https://www.hanselman.com/blog/VisualStudioCodeRemoteDevelopmentOverSSHToARaspberryPiIsButter.aspx