โปรแกรม VSCode (Visual Studio Code) เป็นโปรแกรมแก้ไขโค้ดที่พัฒนาโดยบริษัทไมโครซอฟท์ โดยสามารถติดตั้งและทำงานได้บนหลายระบบปฏิบัติการ เช่น Windows, Linux และ macOS เป็นต้น ใน VSCode นั้นมีความสามารถในการ Debug โปรแกรม เพื่อช่วยในการค้นหาข้อผิดพลาด และมีส่วนช่วยเหลือเกี่ยวกับการควบคุม Git และ GitHub โดยถูกติดตั้งมาพร้อมกับโปรแกรมเอง VSCode ยังมีการช่วยเหลือในขณะเขียนโค้ด เช่น ตรวจสอบความถูกต้องของไวยากรณ์ภาษาโปรแกรม และการเติมโค้ดอัตโนมัติแบบอัจฉริยะ นอกจากนี้ยังมีตัวอย่างและโค้ดแนะนำเพื่อช่วยให้โค้ดที่เขียนเป็นไปตามวัตถุประสงค์ ให้เหมาะสมกับการใช้งานในขณะนั้น VSCode ยังมีความสามารถในการปรับแต่งต่าง ๆ ตามความต้องการของผู้ใช้ เช่น เปลี่ยนธีม แป้นพิมพ์คีย์ลัด การตั้งค่า และการติดตั้งส่วนขยายเพิ่มเติมที่เพิ่มฟังก์ชันการทำงานอื่น ๆ ใน VSCode VSCode เป็นโปรแกรมแบบโอเพนซอร์ส ที่เผยแพร่ภายใต้สิทธิ์การใช้งานแบบ MIT และที่สำคัญ ฟรีทั้งสำหรับการใช้ส่วนตัวหรือเพื่อการค้าก็ได้ ในขั้นตอนต่อไปนี้คือขั้นตอนแนะนำในการติดตั้งโปรแกรม VSCode โดยเน้นไปที่การใช้งานกับ Node.js เป็นหลัก อย่างไรก็ตาม VSCode ยังสามารถใช้เขียนโค้ดในภาษาอื่น ๆ ได้อีกมากมาย ต่อไปนี้คือขั้นตอนการติดตั้งตัวโปรแกรมและส่วนต่าง ๆ: 1. Download และ Install Visual Studio Code ได้จากลิงค์ “VSCode download” จากนั้นให้เลือก Download ไฟล์สำหรับการติดตั้งให้ตรงกับระบบปฏิบัติการของตัวเอง2. เมื่อติดตั้งโปรแกรมสำเร็จแล้วให้เริ่มโปรแกรม ซึ่งจะได้หน้าตาของตัวโปรแกรมดังแสดงต่อไปนี้3. เป็นขั้นตอนการเลือกหน้าตาหรือธีมของต้วโปรแกรม (Theme)ในขั้นตอนนี้ไม่จำเป็นต้องติดตั้งเพิ่มเติมก็ได้ แต่เป็นการปรับแต่งการเขียนโค้ดอาจจะปรากฎและนำเสนอในบทความอื่น ๆ ต่อไปเพื่อให้มีหน้าตาที่เหมือนกัน สำหรับการติดตั้งธีม ให้คลิกที่ปุ่มแถบเมนูส่วนขยาย (Extension) ที่ตั้งอยู่ทางด้านซ้ายดังแสดงในรูปด้านล่าง จากนั้นให้พิมพ์คำว่า ‘Monokai Pro’ ในช่องค้นหา โดยตัวธีม ‘Monokai Pro’ เป็นส่วนขยายที่สามารถใช้งานได้ฟรีและมีบางคุณสมบัติที่ต้องซื้อสิทธิ์การใช้งานเพิ่มเติม ในกรณีนี้ เราจะใช้คุณสมบัติพื้นฐานที่ไม่ต้องซื้อเพิ่มเติม เมื่อเริ่มโปรแกรม VSCode อาจจะปรากฏข้อความแนะนำให้ซื้อคุณสมบัติแบบ Pro เพิ่ม หากไม่ต้องการซื้อ ให้คลิกที่ปุ่ม ‘Cancel’ เพื่อติดตั้งส่วนขยายนี้ให้คลิกที่ปุ่ม ‘install’ โปรแกรมจะทำการติดตั้งส่วนขยายให้เรียบร้อย 4. การเปลี่ยนธีมเป็น Monokai Proให้เริ่มจากกดปุ่ม จากนั้นให้เลือกเมนู “Themes->Color Theme” จะปรากฎช่องให้พิมพ์ค้นหา ให้พิมพ์ข้อความดังรูปและเลือก “Monokai Pro” 5. การตั้งค่าการบันทึกอัตโนมัติ (Auto save settings of the VSCode)การบันทึกอัตโนมัติคือตัวโปรแกรม VSCode จะทำการบันทึกโค้ดที่เราเขียนลงไฟล์ให้เองโดยอัตโนมัติ โดยเริ่มจากการกดปุ่ม พิมพ์ข้อความ “Auto Save” ในช่องค้นหาจะแสดงดังรูป ในส่วนของ File: Auto Save section จะปรากฎตัวเลือก “Files: Auto Save” ใน Dropdown list ให้เลือก “OnFocusChange” ซึ่งตัวเลือกนี้จะทำให้ VSCode ทำการบันทักข้อมูลให้เมื่อไหร่ก็ตามที่เราย้ายไปมาระหว่างไฟล์ในตัวโปรแกรม ซึ่งคุณสมบัตินี้อำนวยความสะดวกให้เรา โดยไม่จำเป็นต้องกดปุ่มหรือเมนู Save ทุกครั้งด้วยตัวเอง 6. เพิ่มความสามารถในการเลือกคำได้หลายคำพร้อม ๆ กัน (Multi select modifier settings of the VSCode)ในขั้นตอนการเขียนโค้ดโปรแกรมเมื่อเราต้องการแก้ไขชื่อตัวแปรหรือข้อความในโค้ด สิ่งนี้อาจเป็นปัญหากวนใจสำหรับนักพัฒนาอย่างมาก เนื่องจากในบางกรณีตัวแปรที่ถูกอ้างอิงในหลายส่วนของโค้ดโปรแกรม การแก้ไขชื่อตัวแปรจะต้องไล่แก้ด้วยมือในทุกส่วนของโค้ด การกำหนดค่าตัวเลือกเพื่อให้ VSCode ทำการค้นหาและเลือกคำที่ต้องการพร้อมกันและสามารถพิมพ์ข้อความแก้ไขได้ในคราวเดียว การตั้งค่าเริ่มจากกดปุ่ม 7. การติดตั้งส่วนขยายสำหรับการปรับโครงสร้างโค้ดให้โดยอัตโนมัติ (Format on save settings of the VSCode)การเขียนโค้ดโปรแกรมที่เป็นระเบียบและมีรูปแบบที่ชัดเจนมีประโยชน์อย่างมาก ในกรณีที่เกิดข้อผิดพลาดในโปรแกรมและต้องการหาจุดผิดพลาด โค้ดที่เป็นสัดส่วนและมีการจัดระเบียบที่อ่านง่ายจะช่วยลดเวลาในการแก้ไขข้อผิดพลาดนั้นได้อย่างรวดเร็ว เนื่องจากโค้ดที่มีรูปแบบที่ชัดเจนทำให้อ่านง่ายและเข้าใจง่ายนั้นเอง การพัฒนาโปรแกรมในปัจจุบัน โดยเฉพาะในโปรแกรมที่มีขนาดใหญ่และใช้โปรแกรมเมอร์จำนวนมากในการทำงานร่วมกัน การเขียนโค้ดที่เป็นไปตามข้อตกลงและเป็นไปในแนวทางเดียวกันเป็นสิ่งจำเป็นเพื่อให้สามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพ ขั้นตอนการกำหนดข้อตกลงและแนวทางการเขียนโค้ดร่วมกันเราเรียกว่า ‘Code convention’ Code convention หมายถึงรูปแบบและกฎเกณฑ์ที่ใช้ในการเขียนโค้ด เพื่อให้โค้ดมีความเข้าใจง่าย อ่านและแก้ไขได้ง่าย และมีความเป็นระเบียบในการใช้งานร่วมกันระหว่างผู้พัฒนาในทีมหรือโครงการต่างๆ Code convention ประกอบด้วยหลายองค์ประกอบ แต่ส่วนใหญ่จะครอบคลุมเนื้อหาดังต่อไปนี้:
ส่วนขยาย “Prettier – Code formatter” จะช่วยในการจัดระเบียบโค้ดให้เรา แต่ไม่ได้รวมทุกรูปแบบและกฎเกณฑ์ทั้งหมดที่เกี่ยวข้องกับ Code Convention ส่วนขยาย Prettier เป็นเครื่องมือที่ช่วยในการจัดรูปแบบโค้ดเท่านั้น ในการติดตั้ง “Prettier – Code formatter” สามารถทำได้ตามขั้นตอนการติดตั้งที่ได้แนะนำไว้ก่อนหน้านี้ เช่นการติดตั้งธีม “Monokai Pro” ซึ่งไม่ว่าจะเป็นการติดตั้งส่วนขยายอื่นๆ ก็จะใช้รูปแบบเดียวกัน โดยหลังจากที่เราติดตั้งส่วนขยายเสร็จสมบูรณ์แล้ว การตั้งค่าส่วนขยายจะปรากฏดังรูปภาพที่แสดงให้เห็นดังต่อไปนี้ 8. การตั้งค่าให้ VSCode ทำการการปรับโครงสร้างโค้ดให้โดยอัตโนมัติหลังจากติดตั้งส่วนขยาย “Prettier – Code formatter” แล้ว เราสามารถกำหนดให้ส่วนขยายนี้ทำงานโดยอัตโนมัติได้ในขั้นตอนต่อไปนี้: กดปุ่ม
เมื่อกำหนดค่าเสร็จสิ้น ส่วนขยาย “Prettier – Code formatter” จะทำงานโดยอัตโนมัติเมื่อคุณเปลี่ยน Focus จากการเขียนโค้ดในไฟล์ปัจจุบันไปยังการเขียนโค้ดในไฟล์อื่นๆ ทำให้โค้ดของคุณมีการจัดรูปแบบอัตโนมัติตามตั้งค่าที่กำหนดไว้ |