สอนติดตั้ง VS Code

Visual Studio Code (VS Code) คือโปรแกรมแก้ไขโค้ด (Source Code Editor) ที่ทรงพลัง, มีขนาดเล็ก, และใช้งานได้ฟรี พัฒนาโดย Microsoft และได้รับความนิยมสูงสุดในหมู่นักพัฒนาสมัยใหม่ เนื่องจากมีความยืดหยุ่นและมีส่วนขยาย (Extensions) ให้เลือกใช้มากมาย คู่มือนี้จะแนะนำขั้นตอนการติดตั้ง, การใช้งานเบื้องต้น, และการตั้งค่าที่สำคัญเพื่อให้คุณเริ่มต้นได้อย่างรวดเร็ว

ขั้นตอนที่ 1: ดาวน์โหลดและติดตั้ง Visual Studio Code

ขั้นตอนการติดตั้งจะแตกต่างกันเล็กน้อยระหว่าง Windows และ macOS แต่ทั้งสองระบบก็ทำได้ง่ายและตรงไปตรงมา

สำหรับ Windows:

1. ดาวน์โหลดตัวติดตั้ง: ไปที่เว็บไซต์ทางการของ VS Code ที่ https://code.visualstudio.com/ หน้าเว็บจะตรวจจับระบบปฏิบัติการของคุณและแสดงปุ่มดาวน์โหลดที่ถูกต้องสำหรับ Windows ให้คลิกเพื่อดาวน์โหลด

2. รันตัวติดตั้ง: เมื่อดาวน์โหลดเสร็จสิ้น ให้เปิดไฟล์ติดตั้งขึ้นมา

3. ยอมรับข้อตกลง: ยอมรับข้อตกลงการใช้งาน (License Agreement) แล้วคลิก "Next"

4. เลือก Additional Tasks (สำคัญมาก): ในหน้าจอ "Select Additional Tasks" แนะนำอย่างยิ่งให้ ติ๊กเลือกทุกช่อง โดยเฉพาะ:

   • Add 'Open with Code' action to Windows Explorer file context menu

   • Add 'Open with Code' action to Windows Explorer directory context menu

   • Register Code as an editor for supported file types

   • Add to PATH (requires shell restart) การตั้งค่านี้จะทำให้คุณสามารถคลิกขวาที่ไฟล์หรือโฟลเดอร์ใดก็ได้แล้วเลือก "Open with Code" เพื่อเปิดใน VS Code ได้ทันที

5. ติดตั้ง: คลิก "Next" และ "Install" เมื่อเสร็จสิ้นก็สามารถเปิดใช้งานโปรแกรมได้เลย

สำหรับ macOS:

วิธีที่เป็นมาตรฐานและมีประสิทธิภาพที่สุดสำหรับนักพัฒนาคือการใช้ Homebrew ซึ่งเป็นโปรแกรมจัดการแพ็กเกจสำหรับ macOS

1. ติดตั้ง Homebrew (หากยังไม่มี): เปิด Terminal แล้ววางคำสั่งนี้ลงไป:

   Bash

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

2. ติดตั้ง VS Code ผ่าน Homebrew: เมื่อ Homebrew พร้อมใช้งานแล้ว ให้รันคำสั่งนี้ใน Terminal:

   Bash

    brew install --cask visual-studio-code
   

   Homebrew จะจัดการดาวน์โหลดและติดตั้งโปรแกรมลงในโฟลเดอร์ "Applications" ให้คุณโดยอัตโนมัติ

ขั้นตอนที่ 2: การใช้งานเบื้องต้น

เมื่อเปิด VS Code ขึ้นมาครั้งแรก คุณจะพบกับหน้า Welcome Screen การใช้งานพื้นฐานที่สุดคือการจัดการโปรเจกต์และไฟล์

การสร้างโปรเจกต์ (โฟลเดอร์): โปรเจกต์ใน VS Code ก็คือโฟลเดอร์ในคอมพิวเตอร์ของคุณนั่นเอง

1. ไปที่เมนูด้านบน เลือก File > Open Folder...

2. เลือก "New Folder" เพื่อสร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์ของคุณ (เช่น my-first-project) แล้วกด "Open"

3. VS Code จะเปิดโฟลเดอร์นั้นขึ้นมา และคุณจะเห็นชื่อโฟลเดอร์ของคุณในแถบ Explorer ด้านซ้ายมือ

การสร้างไฟล์:

1. ในแถบ Explorer ด้านซ้าย ให้เอาเมาส์ไปชี้ที่ชื่อโปรเจกต์ของคุณ

2. คลิกที่ไอคอน "New File" (รูปกระดาษมีเครื่องหมายบวก)

3. ตั้งชื่อไฟล์ของคุณ พร้อมกับนามสกุล เช่น index.html หรือ app.js แล้วกด Enter

4. ไฟล์ใหม่จะถูกสร้างขึ้นและเปิดใน Editor พร้อมให้คุณเริ่มเขียนโค้ดได้ทันที

ขั้นตอนที่ 3: การเปิด VS Code ผ่าน Terminal (วิธีสำหรับมือโปร)

หนึ่งในฟีเจอร์ที่ทรงพลังที่สุดของ VS Code คือการเรียกใช้งานผ่าน Terminal ได้โดยตรง

1. เปิด Terminal (หรือ Command Prompt บน Windows)

2. ใช้คำสั่ง cd เพื่อเข้าไปยังโฟลเดอร์โปรเจกต์ที่คุณต้องการทำงานด้วย

   Bash

    cd path/to/your/project
   

3. เมื่อคุณเข้ามาอยู่ในโฟลเดอร์ที่ถูกต้องแล้ว ให้พิมพ์คำสั่ง:

   Bash

    code .
   

   (เครื่องหมาย . หมายถึง "โฟลเดอร์ปัจจุบัน")

VS Code จะเปิดหน้าต่างใหม่ขึ้นมาโดยโหลดโปรเจกต์ในโฟลเดอร์นั้นให้คุณทันที นี่เป็นวิธีที่รวดเร็วและเป็นที่นิยมอย่างสูงในหมู่นักพัฒนา