การติดตั้งและใช้งานโปรแกรม Visual Studio Code

ในบทนี้ จะเป็นการแนะนำขั้นตอนการติดตั้งโปรแกรม Visual Studio Code และสร้างโปรเจ็คเพื่อเขียนโปรแกรมบน Windows

Visual Studio Code หรือ VS Code นั้นเป็นโปรแกรมแก้ไขข้อความ (Editor) แบบโอเพนซอร์สที่พัฒนาโดย Microsoft สำหรับ Windows ในปัจจุบัน โปรแกรม VS Code ได้มีให้ดาวน์โหลดทั้งบน Linux และ Mac มันเป็นโปรแกรมที่มีน้ำหนักเบา ใช้งานง่าย และมีความยืดหยุ่นสูง มันสนับสนุน Code Intellisense พื้นฐาน และสามารถใช้งาน Version Control ได้ในตัว นอกจากนี้ มันยังมีระบบส่วนเสริมที่ให้เราสามารถติดตั้งปลั๊กอินเพิ่มเติมได้

จากการสำรวจบน Stackoverflow ในปี 2019 นั้น Visual Studio Cod ถือว่าเป็น Editor ที่มีผู้ใช้งานมากที่สุด นักพัฒนากว่า 50% ของทั่วโลกใช้มัน นั่นจึงเป็นเหตุผลว่าทำไมเราถึงแนะนำโปรแกรมนี้ และนี่เป็นสิ่งที่เราจะทำในบทความนี้

• การดาวน์โหลด Visual Studio Code
• การติดตั้ง Visual Studio Code
• การสร้างโปรเจ็ค
• การใช้งาน Terminal บน Visual Studio Code

การดาวน์โหลด Visual Studio Code

สิ่งแรกที่เราต้องทำก็คือดาวน์โหลดตัวติดตั้งของโปรแกรมมาก่อน เพื่อดาวน์โหลด Visual Studio Code ไปที่หน้าเว็บทางการของมัน https://code.visualstudio.com/Download

ในหน้าของการดาวน์โหลด ให้เลือกแพ็กเกจตัวติดตั้งที่คุณต้องการ ในกรณีนี้เราคลิกที่ปุ่มดาวน์โหลดสีฟ้า ซึ่งเป็นแพ็กเกจตัวติดตั้งที่แนะนำจากเว็บไซต์ จากนั้นรอจนกว่าการดาวน์โหลดเสร็จสิ้น

การติดตั้ง Visual Studio Code

หลังจากดาวน์โหลดเสร็จแล้ว ไปยังโฟล์เดอร์ที่เก็บตัวติดตั้งไว้ และคลิกที่ไฟล์ "VSCodeUserSetup-x64-1.47.3.exe" เพื่อเปิดมันขึ้นมา ชื่อของไฟล์อาจแตกต่างจากนี้เล็กน้อย ขึ้นกับตัวเลือกหรือเวอร์ชันที่คุณดาวน์โหลดในขณะนั้น

ตอนนี้เรากำลังเริ่มติดตั้งโปรแกรม Visual Studio Code ในหน้ายอมรับเงื่อนไขการใช้งาน ให้คลิกที่ "I accept the agreement" และคลิก "Next"

ในหน้าเลือกสถานที่สำหรับการติดตั้ง คุณสามารถเลือกติดตั้งโปรแกรมไว้ที่โฟล์เดอร์อื่นที่ต้องการได้ ในกรณีนี้ เราเลือกค่าเริ่มต้นที่โปรแกรมกำหนดมาให้ และคลิก "Next"

ในหน้านี้เป็นการตั้งค่าว่าเราต้องการให้ Visual Studio Code กำหนดทางลัดบน Start Menu หรือไม่ ในกรณีนี้เราเลือกค่าเริ่มต้นที่โปรแกรมกำหนดมา และคลิก "Next"

ในหน้านี้เป็นการตั้งค่าเพิ่มเติม ให้เลือกที่ "Create a desktop icon" เพื่อสร้างทางลัดสำหรับเข้าโปรแกรมใน Desktop และตรวจสอบให้แน่ใจว่า "Add to PATH" ได้ถูกเลือก หลังจากนั้นคลิก "Next" และคลิก "Install" ในหน้าถัดไป

ตอนนี้เราได้ติดตั้งโปรแกรมเสร็จเรียบร้อยแล้ว ต่อไปจะเป็นการสร้างโปรเจ็ค เพื่อเริ่มเขียนโปรแกรมบน Visual Studio Code

การสร้างโปรเจ็ค

ก่อนอื่น เราจำเป็นต้องสร้างโฟลเดอร์สำหรับโปรเจ็คก่อน ให้คุณสร้างโฟล์เดอร์ใหม่ขึ้นมาบนคอมพิวเตอร์ของคุณ ในตัวอย่าง เราได้สร้างโพล์เดอร์ชื่อ "JavaScript" ที่ Drive C:

จากนั้นในโปรแกรม Visual Studio Code ให้เปิดโฟล์เดอร์ดังกล่าวขึ้นมา โดยคลิกเลือกที่เมนู "File" และเลือก "Open Folder..." เลือกโฟล์เดอร์ที่คุณสร้างไว้และเปิดมันขึ้นมาเหมือนในรูปด้านล่าง

ตอนนี้เราได้สร้างโฟล์เดอร์สำหรับเก็บไฟล์ในโปรเจ็คแล้ว ให้คุณคลิกเลือกที่เมนู "File" และเลือก "New File" หรือกดคำสั่งลัด "Ctrl+N" เพื่อสร้างไฟล์ใหม่ โดยตั้งชื่อไฟล์ว่า "app.js" โดยพิมพ์โค้ดต่อไปนี้ลงไปและบันทึกไฟล์ โดยการกดที่ "File" และเลือก "Save"

console.log("Hello World!");

ในตอนนี้ คุณได้เรียนรู้วิธีการสร้างโปรเจ็คและสร้างไฟล์บน Visual Studio Code แล้ว หลังจากนี้ขึ้นอยู่กับคุณว่าต้องการทำอะไรต่อ โปรดจำไว้ว่าโปรแกรมนี้เป็นเพียง Editor เท่านั้น ในกรณีที่คุณต้องการรันหรือคอมไพล์โปรแกรม คุณจะต้องทำมันเองโดยใช้คำสั่งจาก Command Line หรือจากโปรแกรมภายนอก

หมายเหตุ: Command Line หรือ Terminal นั้นเป็นสิ่งเดียวกัน คุณอาจจะเห็นว่าเราใช้ทั้งสองคำในบทความนี้

การใช้งาน Terminal บน Visual Studio Code

โปรแกรม Visual Studio Code มีคุณสมบัติที่สนับสนุนให้เราสามารถเปิด Command Line หรือ Terminal ของระบบขึ้นมาภายในโปรแกรมได้ เพื่อให้ง่ายและสะดวกในการทำงาน

เพื่อเปิด Command Line คลิกเลือกที่เมนู "Terminal" ด้านบนและเลือก "New Terminal" หรือกดคำสั่งลัด "Ctrl+Shift+`" เพื่อเปิดหน้าต่าง Terminal ใหม่ขึ้นมา จากนั้นเราสามารถใช้งาน Terminal ได้ผ่านหน้าต่างนี้โดยที่ไม่ต้องสลับหน้าต่างออกไปนอกตัวโปรแกรม ซึ่งสะดวกเป็นอย่างมากในกรณีที่เราต้องใช้มันเพื่อรันหรือคอมไฟล์โปรแกรมในขณะที่เขียนโปรแกรมไปด้วย

ต่อไปจะเป็นการรันโค้ดของไฟล์ app.js ที่เราได้สร้างขึ้นมาก่อนหน้านี้ เราใช้คำสั่ง node app.js เพื่อรันโปรแกรม และผลลัพธ์จะแสดงออกมาทาง Terminal (1) และนอกจากนี้ คุณยังสามารถเพิ่ม ลบ จัดพื้นที่ หรือเปลี่ยน Terminal ที่ต้องการทำงานได้จากแผงควบคุมในหมายเลข (2)

หมายเหตุ: ในการรันคำสั่ง node app.js นั้นเป็นแค่การสาธิตการใช้งาน Terminal บน VS Code เท่านั้น เพื่อที่จะรันคำสั่งนี้ คอมพิวเตอร์ของคุณจะต้องติดตั้ง Node.js ก่อน

ในบทนี้ คุณได้เรียนรู้การใช้งานโปรแกรม Visual Studio Code ในเบื้องต้น เราได้พูดถึงการติดตั้งโปรแกรม การสร้างโปรเจ็ค และการใช้งาน Terminal ภายในตัว Editor เอง อย่างไรก็ตาม ยังมีสิ่งอื่นๆ อีกมากที่คุณต้องเรียนรู้เกี่ยวกับ Visual Studio Code เช่น การใช้งาน Version Control และการติดตั้งส่วนเสริมที่จำเป็นในการเขียนโปรแกรม