VS Code หรือ Visual Studio Code จากบริษัทไมโครซอฟต์ เป็นโปรแกรมประเภท Editor ใช้ในการแก้ไขโค้ดที่มีขนาดเล็ก แต่มีประสิทธิภาพสูง เป็น OpenSource โปรแกรมจึงสามารถนำมาใช้งานได้โดยไม่มีค่าใช้จ่าย เหมาะสำหรับนักพัฒนาโปรแกรมที่ต้องการใช้งานหลายแพลตฟอร์ม รองรับการใช้งานทั้งบน Windows , macOS และ Linux รองรับหลายภาษาทั้ง JavaScript, TypeScript และ Node.js ในตัว และสามารถเชื่อมต่อกับ Git ได้ง่าย สามารถนำมาใช้งานได้ง่ายไม่ซับซ้อน มีเครื่องมือและส่วนขยายต่าง ๆ ให้เลือกใช้มากมาย รองรับการเปิดใช้งานภาษาอื่น ๆ ทั้ง ภาษา C++ , C# , Java , Python , PHP หรือ Go สามารถปรับเปลี่ยน Themes ได้ มีส่วน Debugger และ Commands เป็นต้น ซึ่งบทความนี้จะเป็นการสอน วิธีการใช้งาน Visual Studio Code เบื้องต้น มาเริ่มกันเลย
วิธีการดาว์นโหลดโปรแกรม
อันดับแรกเราต้องเข้าไปที่เว็บ https://code.visualstudio.com/ เมื่อเข้าเว็บแล้วให้กดปุ่มดาวน์โหลด
วิธีการติดตั้งโปรแกรม
เมื่อเปิดตัวติดตั้งขึ้นมาหน้าจอแสดงว่า ( Welcome to the Visual Studio Code Setup Wizard ) แล้วเราให้กดปุ่ม Next >
หลังจากนั้นก็จะแสดงหน้าจอข้อตกลงของโปรแกรม ( License Agreement ) แล้วเลือก ☑ I accept the agreement หลังจากนั้นก็กด Next >
หลังจากนั้นจะแสดงหน้าจอหน้าต่างนี้จะแสดงโฟลเดอร์ที่จะใช้เก็บไฟล์ของโปรแกรม ( Select Destination Location ) แล้วก็กดปุ่ม Next >
จากนั้นจะแสดงหน้าจอเลือก ( Select Start Menu Folder ) แล้วก็กดปุ่ม Next >
จากนั้นก็จะแสดงหน้าจอ ( Select Additional Tasks ) แล้วก็กดปุ่ม Next >
หลังจากนั้นจะแสดงหน้าจอ ( Ready to Install ) แล้วก็กดปุ่ม Install
จากนั้นรอโปรแกรมทำการติดตั้งสักครู่นะคะ…
เมื่อโปรแกรมทำการติดตั้งเสร็จแล้วจะแสดงหน้าจอ ( Completing the Visual Studio Code Setup Wizard ) ให้กดปุ่ม Finish >
จากนั้นโปรแกรม Visual Studio Code จะทำการเปิดขึ้นมาก็เป็นถือว่าทำการติดตั้งเสร็จในขั้นตอนการติดตั้งโปรแกรม Visual Studio Code
วิธีการใช้งาน Visual Studio Code
เปิดโปรแกรม Visual Studio Code ขึ้นมา
สิ่งแรกที่ต้องก็ ทำคือ ติดตั้ง Plugin ไปที่ Search
แล้วค้นหาคำว่า vscode icon หลังจานั้นติดตั้งได้เลยจ้า
การเปิดใช้งาน Code > Preferences . File Icon Theme
แล้วกดเลือก VSCode Icons
Plugin ตัวต่อไป Snippet ที่จะช่วยทำ Auto Complete
ต่อไปเรามาลองทดสอบ โดยการนำ VS code ไปเปิด โปรเจค Angular
จะได้ไอคอนที่สวยงามตามนี้ค่ะ
วิดีโอเพิ่มเติม >>>>>>>> https://youtu.be/EA2H686OfZA
จัดทำโดย นางสาวอภิญญา พรมนัส รหัสนักศึกษา 600112230047 สาขาวิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยราชภัฏบุรีรัมย์
[/vc_column_text][/vc_column][/vc_row]