History

leestott 425e0f6fbe 🌐 Update translations via Co-op Translator		1 week ago
..
README.md	🌐 Update translations via Co-op Translator	1 week ago
assignment.md	🌐 Update translations via Co-op Translator	1 week ago

README.md

การใช้โปรแกรมแก้ไขโค้ด

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

วัตถุประสงค์การเรียนรู้

ในบทเรียนนี้ คุณจะได้เรียนรู้วิธี:

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

สิ่งที่ต้องเตรียมก่อนเริ่ม

ก่อนเริ่มต้น คุณจำเป็นต้องสร้างบัญชีกับ GitHub หากยังไม่มีบัญชี ให้ไปที่ GitHub และสร้างบัญชีใหม่

บทนำ

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

เริ่มต้นใช้งาน VSCode.dev

VSCode.dev เป็นโปรแกรมแก้ไขโค้ดบนเว็บ คุณไม่จำเป็นต้องติดตั้งอะไรเพื่อใช้งาน เพียงแค่เปิดเหมือนเว็บไซต์ทั่วไป เริ่มต้นใช้งานโดยเปิดลิงก์นี้: https://vscode.dev หากคุณยังไม่ได้ลงชื่อเข้าใช้ GitHub ให้ทำตามคำแนะนำเพื่อลงชื่อเข้าใช้หรือสร้างบัญชีใหม่แล้วลงชื่อเข้าใช้

เมื่อโหลดเสร็จ หน้าตาจะคล้ายกับภาพนี้:

มีสามส่วนหลัก เริ่มจากซ้ายไปขวา:

แถบกิจกรรม ซึ่งมีไอคอนบางอย่าง เช่น แว่นขยาย 🔎, เกียร์ ⚙️ และอื่น ๆ
แถบกิจกรรมที่ขยายออก ซึ่งค่าเริ่มต้นคือ Explorer เรียกว่า แถบด้านข้าง
และสุดท้าย พื้นที่โค้ดทางด้านขวา

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

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

เปิด GitHub Repository

สิ่งแรกที่คุณต้องทำคือเปิด GitHub repository มีหลายวิธีในการเปิด repository ในส่วนนี้คุณจะได้เห็นสองวิธีที่แตกต่างกันในการเปิด repository เพื่อเริ่มทำการเปลี่ยนแปลง

1. ใช้โปรแกรมแก้ไข

ใช้โปรแกรมแก้ไขเพื่อเปิด repository ระยะไกล หากคุณไปที่ VSCode.dev คุณจะเห็นปุ่ม "Open Remote Repository":

คุณยังสามารถใช้ command palette ซึ่งเป็นช่องป้อนข้อมูลที่คุณสามารถพิมพ์คำใด ๆ ที่เป็นส่วนหนึ่งของคำสั่งหรือการกระทำเพื่อค้นหาคำสั่งที่เหมาะสม ใช้เมนูที่มุมบนซ้าย จากนั้นเลือก View และเลือก Command Palette หรือใช้คีย์ลัด: Ctrl-Shift-P (บน MacOS คือ Command-Shift-P)

เมื่อเมนูเปิดขึ้น ให้พิมพ์ open remote repository และเลือกตัวเลือกแรก repository หลายตัวที่คุณเป็นส่วนหนึ่งหรือที่คุณเปิดล่าสุดจะปรากฏขึ้น คุณยังสามารถใช้ URL GitHub เต็มรูปแบบเพื่อเลือกได้ ใช้ URL ต่อไปนี้และวางลงในช่อง:

https://github.com/microsoft/Web-Dev-For-Beginners

✅ หากสำเร็จ คุณจะเห็นไฟล์ทั้งหมดใน repository นี้โหลดในโปรแกรมแก้ไขข้อความ

2. ใช้ URL

คุณยังสามารถใช้ URL โดยตรงเพื่อโหลด repository ตัวอย่างเช่น URL เต็มรูปแบบสำหรับ repository ปัจจุบันคือ https://github.com/microsoft/Web-Dev-For-Beginners แต่คุณสามารถเปลี่ยนโดเมน GitHub เป็น VSCode.dev/github และโหลด repository ได้โดยตรง URL ที่ได้จะเป็น https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

แก้ไขไฟล์

เมื่อคุณเปิด repository บนเบราว์เซอร์หรือ vscode.dev ขั้นตอนต่อไปคือการอัปเดตหรือเปลี่ยนแปลงโปรเจกต์

1. สร้างไฟล์ใหม่

คุณสามารถสร้างไฟล์ในโฟลเดอร์ที่มีอยู่หรือสร้างในไดเรกทอรี/โฟลเดอร์ราก เพื่อสร้างไฟล์ใหม่ ให้เปิดตำแหน่ง/ไดเรกทอรีที่คุณต้องการบันทึกไฟล์และเลือกไอคอน 'New file ...' บนแถบกิจกรรม (ซ้าย) ตั้งชื่อไฟล์และกด Enter

2. แก้ไขและบันทึกไฟล์ใน repository

การใช้ vscode.dev มีประโยชน์เมื่อคุณต้องการอัปเดตโปรเจกต์อย่างรวดเร็วโดยไม่ต้องโหลดซอฟต์แวร์ใด ๆ ในเครื่อง เพื่ออัปเดตโค้ดของคุณ คลิกไอคอน 'Explorer' ซึ่งอยู่บนแถบกิจกรรมเพื่อดูไฟล์และโฟลเดอร์ใน repository เลือกไฟล์เพื่อเปิดในพื้นที่โค้ด ทำการเปลี่ยนแปลงและบันทึก

เมื่อคุณอัปเดตโปรเจกต์เสร็จแล้ว ให้เลือกไอคอน source control ซึ่งมีการเปลี่ยนแปลงใหม่ทั้งหมดที่คุณทำใน repository

เพื่อดูการเปลี่ยนแปลงที่คุณทำในโปรเจกต์ ให้เลือกไฟล์ในโฟลเดอร์ Changes ในแถบกิจกรรมที่ขยายออกมา สิ่งนี้จะเปิด 'Working Tree' เพื่อให้คุณเห็นการเปลี่ยนแปลงที่คุณทำในไฟล์ สีแดงแสดงการลบออกจากโปรเจกต์ ส่วนสีเขียวแสดงการเพิ่มเข้าไป

หากคุณพอใจกับการเปลี่ยนแปลงที่ทำ ให้เลื่อนเมาส์ไปที่โฟลเดอร์ Changes และคลิกปุ่ม + เพื่อเตรียมการเปลี่ยนแปลงสำหรับการ commit การเตรียมการหมายถึงการเตรียมการเปลี่ยนแปลงเพื่อ commit ไปยัง GitHub

หากคุณไม่พอใจกับการเปลี่ยนแปลงบางอย่างและต้องการยกเลิก ให้เลื่อนเมาส์ไปที่โฟลเดอร์ Changes และเลือกไอคอน undo

จากนั้นพิมพ์ commit message (คำอธิบายของการเปลี่ยนแปลงที่คุณทำในโปรเจกต์) คลิกไอคอน check เพื่อ commit และ push การเปลี่ยนแปลงของคุณ

เมื่อทำงานในโปรเจกต์เสร็จแล้ว ให้เลือกไอคอนเมนู hamburger ที่มุมบนซ้ายเพื่อกลับไปยัง repository บน github.com

การใช้ส่วนขยาย

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

เพื่อเรียกดูรายการส่วนขยายที่มีอยู่ทั้งหมด ให้คลิกไอคอน Extensions บนแถบกิจกรรมและเริ่มพิมพ์ชื่อส่วนขยายในช่องข้อความที่มีป้ายกำกับ 'Search Extensions in Marketplace' คุณจะเห็นรายการส่วนขยาย แต่ละรายการมี ชื่อส่วนขยาย, ชื่อผู้เผยแพร่, คำอธิบาย 1 ประโยค, จำนวนการดาวน์โหลด และ คะแนนดาว

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

1. ติดตั้งส่วนขยาย

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

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

2. ปรับแต่งส่วนขยาย

หลังจากติดตั้งส่วนขยาย คุณอาจต้องปรับเปลี่ยนพฤติกรรมและปรับแต่งตามความต้องการของคุณ เพื่อทำสิ่งนี้ ให้เลือกไอคอน Extensions และครั้งนี้ส่วนขยายของคุณจะปรากฏในโฟลเดอร์ Installed คลิกที่ ไอคอน Gear และไปที่ Extensions Setting

3. จัดการส่วนขยาย

หลังจากติดตั้งและใช้ส่วนขยาย vscode.dev มีตัวเลือกในการจัดการส่วนขยายของคุณตามความต้องการที่แตกต่างกัน ตัวอย่างเช่น คุณอาจเลือก:

Disable: (คุณสามารถปิดใช้งานส่วนขยายชั่วคราวเมื่อคุณไม่ต้องการใช้งาน แต่ไม่ต้องการถอนการติดตั้งออกทั้งหมด)

เลือกส่วนขยายที่ติดตั้งในแถบกิจกรรมที่ขยายออกมา > คลิกไอคอน Gear > เลือก 'Disable' หรือ 'Disable (Workspace)' หรือ เปิดส่วนขยายในพื้นที่โค้ดและคลิกปุ่ม Disable สีน้ำเงิน
Uninstall: เลือกส่วนขยายที่ติดตั้งในแถบกิจกรรมที่ขยายออกมา > คลิกไอคอน Gear > เลือก 'Uninstall' หรือ เปิดส่วนขยายในพื้นที่โค้ดและคลิกปุ่ม Uninstall สีน้ำเงิน

งานที่มอบหมาย

สร้างเว็บไซต์เรซูเม่โดยใช้ vscode.dev

ทบทวนและศึกษาด้วยตนเอง

อ่านเพิ่มเติมเกี่ยวกับ VSCode.dev และฟีเจอร์อื่น ๆ ของมัน

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษาจากผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้