การติดตั้งโปรแกรม VSCode

โปรแกรม 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 จะทำการบันทึกโค้ดที่เราเขียนลงไฟล์ให้เองโดยอัตโนมัติ โดยเริ่มจากการกดปุ่ม ที่แถบเมนูที่อยู่ทางด้านล่างซ้ายจากนั้นเลือก “Settings” ดังแสดงในรูป

พิมพ์ข้อความ “Auto Save” ในช่องค้นหาจะแสดงดังรูป

ในส่วนของ File: Auto Save section จะปรากฎตัวเลือก “Files: Auto Save” ใน Dropdown list ให้เลือก “OnFocusChange” ซึ่งตัวเลือกนี้จะทำให้ VSCode ทำการบันทักข้อมูลให้เมื่อไหร่ก็ตามที่เราย้ายไปมาระหว่างไฟล์ในตัวโปรแกรม ซึ่งคุณสมบัตินี้อำนวยความสะดวกให้เรา โดยไม่จำเป็นต้องกดปุ่มหรือเมนู Save ทุกครั้งด้วยตัวเอง

6. เพิ่มความสามารถในการเลือกคำได้หลายคำพร้อม ๆ กัน (Multi select modifier settings of the VSCode)

ในขั้นตอนการเขียนโค้ดโปรแกรมเมื่อเราต้องการแก้ไขชื่อตัวแปรหรือข้อความในโค้ด สิ่งนี้อาจเป็นปัญหากวนใจสำหรับนักพัฒนาอย่างมาก เนื่องจากในบางกรณีตัวแปรที่ถูกอ้างอิงในหลายส่วนของโค้ดโปรแกรม การแก้ไขชื่อตัวแปรจะต้องไล่แก้ด้วยมือในทุกส่วนของโค้ด

การกำหนดค่าตัวเลือกเพื่อให้ VSCode ทำการค้นหาและเลือกคำที่ต้องการพร้อมกันและสามารถพิมพ์ข้อความแก้ไขได้ในคราวเดียว การตั้งค่าเริ่มจากกดปุ่ม ที่แถบเมนูที่อยู่ทางด้านล่างซ้ายจากนั้นเลือก “Settings” ในช่องค้นหาพิมพ์คำว่า ‘Multi Select Modifier’ และตรวจสอบให้แน่ใจว่าคำในรายการที่แสดงคือ ‘ctrlCmd’ หากไม่ใช่ ให้เปลี่ยนตัวเลือกกลับเป็น ‘ctrlCmd’ ให้เรียบร้อย

7. การติดตั้งส่วนขยายสำหรับการปรับโครงสร้างโค้ดให้โดยอัตโนมัติ (Format on save settings of the VSCode)

การเขียนโค้ดโปรแกรมที่เป็นระเบียบและมีรูปแบบที่ชัดเจนมีประโยชน์อย่างมาก ในกรณีที่เกิดข้อผิดพลาดในโปรแกรมและต้องการหาจุดผิดพลาด โค้ดที่เป็นสัดส่วนและมีการจัดระเบียบที่อ่านง่ายจะช่วยลดเวลาในการแก้ไขข้อผิดพลาดนั้นได้อย่างรวดเร็ว เนื่องจากโค้ดที่มีรูปแบบที่ชัดเจนทำให้อ่านง่ายและเข้าใจง่ายนั้นเอง การพัฒนาโปรแกรมในปัจจุบัน โดยเฉพาะในโปรแกรมที่มีขนาดใหญ่และใช้โปรแกรมเมอร์จำนวนมากในการทำงานร่วมกัน การเขียนโค้ดที่เป็นไปตามข้อตกลงและเป็นไปในแนวทางเดียวกันเป็นสิ่งจำเป็นเพื่อให้สามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพ ขั้นตอนการกำหนดข้อตกลงและแนวทางการเขียนโค้ดร่วมกันเราเรียกว่า ‘Code convention’

Code convention หมายถึงรูปแบบและกฎเกณฑ์ที่ใช้ในการเขียนโค้ด เพื่อให้โค้ดมีความเข้าใจง่าย อ่านและแก้ไขได้ง่าย และมีความเป็นระเบียบในการใช้งานร่วมกันระหว่างผู้พัฒนาในทีมหรือโครงการต่างๆ Code convention ประกอบด้วยหลายองค์ประกอบ แต่ส่วนใหญ่จะครอบคลุมเนื้อหาดังต่อไปนี้:

1. การตั้งชื่อตัวแปรและฟังก์ชัน: ใช้ชื่อที่สื่อความหมายและอธิบายได้ชัดเจน และปฏิบัติตามรูปแบบการตั้งชื่อที่เป็นที่ยอมรับ เช่น ใช้พิมพ์ใหญ่และตัวใหญ่เป็นตัวแปรแบบคาเมลและใช้พิมพ์เล็กและขีดล่างเป็นตัวแปรแบบแบบล่างเส้น (camel case) เป็นต้น
2. การจัดรูปแบบ: การจัดรูปแบบโค้ดเพื่อให้มีความอ่านง่าย โดยใช้การเว้นวรรคและการจัดชุดคำสั่งให้เป็นระเบียบ ตัวอย่างเช่นใช้การเว้นวรรคที่เหมือนกันในบล็อกคำสั่ง เปิด/ปิดคำสั่ง และการจัดวางองค์ประกอบของฟังก์ชันให้เป็นระเบียบ
3. การคอมเมนต์: การเพิ่มคำอธิบายและคอมเมนต์ในโค้ดเพื่อช่วยในการอธิบายหรือสื่อความหมายของโค้ด การคอมเมนต์สามารถใช้เพื่ออธิบายรายละ

ส่วนขยาย “Prettier – Code formatter” จะช่วยในการจัดระเบียบโค้ดให้เรา แต่ไม่ได้รวมทุกรูปแบบและกฎเกณฑ์ทั้งหมดที่เกี่ยวข้องกับ Code Convention ส่วนขยาย Prettier เป็นเครื่องมือที่ช่วยในการจัดรูปแบบโค้ดเท่านั้น ในการติดตั้ง “Prettier – Code formatter” สามารถทำได้ตามขั้นตอนการติดตั้งที่ได้แนะนำไว้ก่อนหน้านี้ เช่นการติดตั้งธีม “Monokai Pro” ซึ่งไม่ว่าจะเป็นการติดตั้งส่วนขยายอื่นๆ ก็จะใช้รูปแบบเดียวกัน โดยหลังจากที่เราติดตั้งส่วนขยายเสร็จสมบูรณ์แล้ว การตั้งค่าส่วนขยายจะปรากฏดังรูปภาพที่แสดงให้เห็นดังต่อไปนี้

8. การตั้งค่าให้ VSCode ทำการการปรับโครงสร้างโค้ดให้โดยอัตโนมัติ

หลังจากติดตั้งส่วนขยาย “Prettier – Code formatter” แล้ว เราสามารถกำหนดให้ส่วนขยายนี้ทำงานโดยอัตโนมัติได้ในขั้นตอนต่อไปนี้: กดปุ่ม ที่แถบเมนูที่อยู่ทางด้านล่างซ้ายจากนั้นเลือก “Settings”

1. เปิดโปรแกรม VSCode ของคุณ
2. กดปุ่ม ที่แถบเมนูที่อยู่ทางด้านล่างซ้ายเลือก “Settings”
3. จะปรากฏหน้าต่างค้นหา ในช่องค้นหาให้พิมพ์คำว่า “format on save”
4. จากนั้นให้เลือกตัวเลือกต่าง ๆ ดังแสดงในรูปต่อไปนี้

เมื่อกำหนดค่าเสร็จสิ้น ส่วนขยาย “Prettier – Code formatter” จะทำงานโดยอัตโนมัติเมื่อคุณเปลี่ยน Focus จากการเขียนโค้ดในไฟล์ปัจจุบันไปยังการเขียนโค้ดในไฟล์อื่นๆ ทำให้โค้ดของคุณมีการจัดรูปแบบอัตโนมัติตามตั้งค่าที่กำหนดไว้