บทความนี้เป็นภาพรวมสำหรับการติดตั้ง Visual Studio Code และ VEX Visual Studio Code Extension ส่วนขยายรองรับ Windows และ macOS อย่างเป็นทางการ

การติดตั้งโค้ด Visual Studio

เปิดอินเทอร์เน็ตเบราว์เซอร์แล้วไปที่: https://code.visualstudio.com/

คำแนะนำจากเว็บไซต์ VS Code มีดังนี้ สิ่งเหล่านี้อาจเป็นประโยชน์หรือคุณสามารถปฏิบัติตามบทความนี้ได้

การติดตั้งสำหรับ Windows

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

คลิกปุ่มดาวน์โหลดสำหรับ Windows

โปรแกรมติดตั้ง VS Code จะแสดงการดาวน์โหลดในเมนูดาวน์โหลดของเบราว์เซอร์

จากนั้นการดาวน์โหลดจะเริ่มขึ้นในเบราว์เซอร์

ไอคอน File Explorer

ไอคอน File Explorer แสดงบนแถบเครื่องมือ Windows ทางด้านขวาของแถบค้นหา

จากนั้นเปิด File Explorer โดยคลิกที่ไอคอน “File Explorer” ที่อยู่บนแถบเครื่องมือของ Windows

มีการพิมพ์คำว่า File Explorer ลงในแถบค้นหาของ Windows และแอป File Explorer จะปรากฏในผลลัพธ์การค้นหา

หรือโดยการพิมพ์ FIle Explorer ในแถบ Windows Search และคลิกที่ File Explorer App

ตัวเลือกทางลัดการดาวน์โหลดจะแสดงอยู่ในแถบด้านข้างของ File Explorer

จากนั้นไปที่โฟลเดอร์ดาวน์โหลดโดยคลิกที่ทางลัดดาวน์โหลดในแถบด้านข้าง

Windows File Explorer จะเปิดไปที่โฟลเดอร์ดาวน์โหลดและแสดงไฟล์ VS Code Installer

คลิกที่ตัวติดตั้ง VS Code

หน้าต่างการตั้งค่า Microsoft VS Code พร้อมข้อตกลงใบอนุญาตที่ต้องยอมรับ ให้เลือกปุ่มด้านล่างซึ่งระบุว่า ฉันยอมรับข้อตกลง ปุ่มถัดไปถูกไฮไลท์อยู่ด้านล่าง

ยอมรับข้อตกลงและคลิกถัดไป

หน้าต่างการตั้งค่า Microsoft VS Code พร้อมตัวเลือกในการเลือกงานเพิ่มเติม ตัวเลือกต่างๆ ได้แก่ การสร้างไอคอนเดสก์ท็อป การเพิ่มการดำเนินการเปิดด้วยโค้ดลงในเมนูบริบทของ File Explorer และการเพิ่ม VS Code ลงใน PATH ในตัวอย่างนี้ ตัวเลือกช่องกาเครื่องหมายทุกตัวจะถูกกาเครื่องหมายไว้ ด้านล่างนี้เป็นปุ่มถัดไปที่ถูกเน้นไว้

กำหนดค่าการติดตั้งและคลิกถัดไป

หน้าต่างการตั้งค่า Microsoft VS Code ที่พร้อมติดตั้งแล้ว งานเพิ่มเติมที่เลือกไว้จะถูกแสดงรายการเพื่อการตรวจสอบ ด้านล่างนี้ปุ่มติดตั้งจะถูกเน้นไว้

คลิกติดตั้งเพื่อเริ่มการติดตั้ง

หน้าต่างการติดตั้ง Microsoft VS Code พร้อมแถบความคืบหน้าและข้อความที่ระบุว่ากำลังติดตั้ง โปรดรอสักครู่ในขณะที่โปรแกรมติดตั้งกำลังติดตั้ง Visual Studio Code บนคอมพิวเตอร์ของคุณ

กระบวนการติดตั้งจะเริ่มขึ้น

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

เมื่อการติดตั้งเสร็จสมบูรณ์ คลิกเสร็จสิ้น จากนั้น VS Code จะเปิดตัว

เปิดแอปพลิเคชัน VS Code โดยไม่มีการเลือกโครงการใดๆ

รหัส Visual Studio จะเปิดขึ้น

การติดตั้งสำหรับ macOS

โฮมเพจเว็บไซต์ Visual Studio Code ที่มีหัวข้อขนาดใหญ่ว่า การแก้ไขโค้ด ถูกกำหนดใหม่ ปุ่มสีน้ำเงินที่มีป้ายชื่อว่า ดาวน์โหลด Mac Universal จะปรากฏอยู่ด้านล่างหัวเรื่อง

คลิกปุ่ม "ดาวน์โหลด Mac Universal"

ไฟล์ zip ของ VS Code จะแสดงการดาวน์โหลดรายการดาวน์โหลดของเบราว์เซอร์

จากนั้นการดาวน์โหลดจะเริ่มขึ้น

ไอคอนตัวค้นหา

ไอคอนแอป Finder จะปรากฏบนแถบเครื่องมือ macOS

ถัดไปเปิด Finder โดยคลิกที่ไอคอน "Finder" บนแถบเครื่องมือ macOS

ตัวเลือกทางลัดการดาวน์โหลดจะแสดงอยู่ในแถบด้านข้างของ Finder

จากนั้นไปที่โฟลเดอร์ "ดาวน์โหลด" โดยคลิกที่ "ดาวน์โหลด" ในแถบด้านข้างรายการโปรด

เปิด Finder ไปที่โฟลเดอร์ดาวน์โหลด และแสดงไฟล์ zip สากลของ VS Code darwin

ดับเบิลคลิกที่ไฟล์ zip VS Code เพื่อแตกไฟล์

เปิด Finder ไปที่โฟลเดอร์ดาวน์โหลด และดับเบิลคลิกไฟล์ zip สากลของ VS Code Darwin เพื่อแตกไฟล์ออกมา ไฟล์แอปพลิเคชัน VS Code ปรากฏถัดจากไฟล์ zip

คลิกและลากแอปพลิเคชันรหัส Visual Studio ไปยังโฟลเดอร์แอปพลิเคชัน

ตัวเลือกทางลัดแอปพลิเคชันจะแสดงอยู่ในแถบด้านข้างของ Finderแสดงแถบเครื่องมือ macOSไอคอน Launchpad จะแสดงบนแถบเครื่องมือ macOS

คลิกที่ไอคอน Launch Pad ในแถบเครื่องมือ macOS

แอปพลิเคชัน VS Code จะแสดงอยู่ในเมนู macOS Launchpad

คลิกที่ไอคอน Visual Studio Code เพื่อเปิด Visual Studio Code

เปิดแอปพลิเคชัน VS Code โดยไม่มีการเลือกโครงการใดๆ

รหัส Visual Studio จะเปิดขึ้น

การติดตั้งส่วนขยาย VEX

ไอคอนส่วนขยายบนเมนูข้างของ VS Code จะปรากฏขึ้น

คลิกที่ไอคอนส่วนขยายในแถบกิจกรรม VS Code

เมนูย่อยของ VS Code Extensions เปิดขึ้นและพิมพ์ VEX ลงในแถบค้นหาของเมนูแล้ว ผลการค้นหาแสดงอยู่ด้านล่าง และแสดงรายการส่วนขยาย VEX Robotics

ในแถบค้นหาให้พิมพ์ VEX

ส่วนขยาย VEX จะปรากฏในหน้าต่างด้านล่าง

คลิกปุ่มติดตั้งถัดจากส่วนขยายจาก VEX Robotics

ส่วนขยาย VS Code จะแสดงในเมนูข้างและสถานะจะระบุว่ากำลังติดตั้ง

เมื่อการติดตั้งเริ่มต้นขึ้น ข้อความจะเปลี่ยนเป็นการติดตั้ง รอให้การติดตั้งเสร็จสิ้นก่อนดำเนินการต่อ

การติดตั้งส่วนขยายที่รองรับ

หากต้องการใช้ Intellisense/Linting สำหรับทั้ง C++ และ Python จะต้องติดตั้งส่วนขยายเพิ่มเติม ส่วนขยายรหัส VEX VS จะกำหนดค่าโปรเจ็กต์ VEX ให้ทำงานกับส่วนขยายเหล่านี้โดยอัตโนมัติ สามารถใช้ส่วนขยาย Intellisense/Linting อื่นๆ ได้ แต่ผู้ใช้จะต้องกำหนดค่าโครงการด้วยตนเองตามความจำเป็น

ไอคอนส่วนขยายบนเมนูข้างของ VS Code จะปรากฏขึ้น

คลิกที่ไอคอนส่วนขยายในแถบกิจกรรม VS Code

เมนูย่อยของ VS Code Extensions จะเปิดขึ้นและพิมพ์ C++ ลงในแถบค้นหาของเมนูแล้ว ผลลัพธ์การค้นหาแสดงอยู่ด้านล่าง และส่วนขยาย Microsoft C/C++ เป็นตัวเลือกแรกที่แสดงไว้

ในแถบค้นหาให้พิมพ์ “C++”

ส่วนขยาย Microsoft C++ จะปรากฏในหน้าต่างด้านล่าง

คลิกปุ่มติดตั้งถัดจากส่วนขยาย C/C++ จาก Microsoft

ส่วนขยาย Microsoft C/C++ จะแสดงในเมนูข้าง และสถานะจะระบุว่า กำลังติดตั้ง

เมื่อการติดตั้งเริ่มต้นขึ้น ข้อความจะเปลี่ยนเป็นการติดตั้ง รอให้การติดตั้งเสร็จสิ้นก่อนดำเนินการต่อ

เมนูย่อยของ VS Code Extensions เปิดขึ้นและพิมพ์ Python ลงในแถบค้นหาของเมนู ผลการค้นหาแสดงอยู่ด้านล่าง และส่วนขยาย Microsoft Python เป็นตัวเลือกแรกที่แสดงรายการ

ในแถบค้นหาให้พิมพ์ “Python”

Microsoft Python Extension จะปรากฏในหน้าต่างด้านล่าง

คลิกปุ่มติดตั้งถัดจากส่วนขยาย Python จาก Microsoft

ส่วนขยาย Microsoft Python จะแสดงในเมนูข้างและสถานะจะระบุว่ากำลังติดตั้ง

เมื่อการติดตั้งเริ่มต้นขึ้น ข้อความจะเปลี่ยนเป็นการติดตั้ง รอให้การติดตั้งเสร็จสิ้นก่อนดำเนินการต่อ

For more information, help, and tips, check out the many resources at VEX Professional Development Plus

Last Updated: