บทนำ: ทำไมผมถึงตัดสินใจตั้งค่า VSCode เป็นภาษาไทย
สวัสดีครับ! ผมเขียนบทความนี้จากมุมมองของคนที่เมื่อไม่กี่เดือนก่อนยังไม่มีความรู้ด้านการเขียนโปรแกรมเลย เหมือนกับหลายๆ ท่านในที่นี้
ด้วยความช่วยเหลือของ AI และการลองผิดลองถูกมากมาย ผมสามารถสร้างเว็บไซต์ 2 แห่งได้ด้วยตัวเองในเวลาเพียงหนึ่งเดือนครึ่ง ในระหว่างกระบวนการนั้น สิ่งหนึ่งที่ผมทำเป็นอันดับแรกและรู้สึกขอบคุณตัวเองมากๆ ที่ได้ทำก็คือ การตั้งค่า Visual Studio Code ให้เป็นภาษาไทย
ในตอนแรก ผมคิดว่าจะใช้เมนูภาษาอังกฤษเพื่อ "ให้ดูเป็นมืออาชีพ" แต่ไม่นานก็เจอกำแพง ทั้งข้อความแจ้งเตือนข้อผิดพลาด (Error) และรายการเมนูทางเทคนิคต่างๆ ที่เป็นภาษาอังกฤษนั้นเข้าใจได้ยากในทันที ผมเสียเวลาไปมากกับการแปลและค้นหาความหมายของแต่ละอย่าง
พอเปลี่ยนมาใช้ภาษาไทย การค้นหาสาเหตุของข้อผิดพลาดก็เร็วขึ้นมาก และที่สำคัญที่สุดคือ ผมสามารถจดจ่ออยู่กับ "การเขียนโค้ด" ได้เต็มที่ แทนที่จะต้องพะวงกับ "วิธีใช้เครื่องมือ" ในบทความนี้ ผมไม่เพียงแต่จะแสดงขั้นตอนการเปลี่ยนภาษาเท่านั้น แต่จะแชร์การตั้งค่าที่ผมใช้แล้วได้ผลดีจริงๆ เพื่อทำให้สภาพแวดล้อมการทำงานในภาษาไทยสะดวกสบายยิ่งขึ้นไปอีกครับ!
สรุปสำหรับคนรีบ: ตั้งค่า VSCode เป็นภาษาไทยใน 3 ขั้นตอนง่ายๆ
สำหรับท่านที่ไม่มีเวลา นี่คือภาพรวมของกระบวนการทั้งหมด เพียงทำตามขั้นตอนเหล่านี้ VSCode ของคุณก็จะกลายเป็นสภาพแวดล้อมการพัฒนาโปรแกรมภาษาไทยที่สะดวกสบาย
- ติดตั้งส่วนขยาย (Extension): เพิ่มแพ็กภาษาไทย
- ตั้งค่าภาษาที่แสดงผล: บอก VSCode ให้แสดงผลเป็นภาษาไทย
- รีสตาร์ท VSCode: เพื่อให้การตั้งค่ามีผลบังคับใช้! ol>
- [✅] ติดตั้งส่วนขยาย (Extension) แล้วหรือยัง?
ลองเปิดหน้าต่างส่วนขยายอีกครั้ง แล้วตรวจสอบให้แน่ใจว่า "Thai Language Pack" ติดตั้งเรียบร้อยแล้ว - [✅] ได้รีสตาร์ท VSCode แล้วหรือยัง?
การเปลี่ยนแปลงจะยังไม่มีผลถ้าแค่บันทึกไฟล์ ต้องปิดโปรแกรม VSCode ให้สนิทแล้วเปิดขึ้นมาใหม่ - [✅] โค้ดในไฟล์
locale.jsonถูกต้องหรือไม่?
ตรวจสอบให้แน่ใจว่าเขียนเป็น"locale": "th"โดยเครื่องหมายอัญประกาศ (Quotes) และโคลอน (Colon) ต้องถูกต้อง ไฟล์ JSON จะไม่อ่านข้อมูลหากมี синтаксисผิดแม้แต่นิดเดียว
ตอนนี้ เรามาดูรายละเอียดแต่ละขั้นตอนพร้อมรูปภาพกันครับ
วิธีตั้งค่า VSCode เป็นภาษาไทยแบบละเอียดพร้อมรูปภาพประกอบ
จากตรงนี้ไป เราจะมาตั้งค่าไปพร้อมๆ กันโดยดูจากภาพหน้าจอจริง ถ้าทำตามทีละขั้นตอนอย่างตั้งใจ รับรองว่าไม่ยากเลยครับ
ขั้นตอนที่ 1: ติดตั้ง "Thai Language Pack"
อันดับแรก เราจะติดตั้งส่วนขยาย (Extension) เพื่อเพิ่มไฟล์ภาษาไทยลงใน VSCode
1. คลิกที่ไอคอนรูปสี่เหลี่ยมซ้อนกัน (Extensions) บนแถบกิจกรรม (Activity Bar) ด้านซ้ายมือ หรือจะใช้คีย์ลัด Ctrl+Shift+X (Windows) / Cmd+Shift+X (Mac) ก็ได้ครับ
2. ในช่องค้นหาที่ปรากฏขึ้นมาด้านบน พิมพ์คำว่า "Thai Language Pack"
3. เมื่อ "Thai Language Pack for Visual Studio Code" ปรากฏขึ้นในผลการค้นหา ให้คลิกที่ปุ่ม "Install" สีฟ้าได้เลยครับ นี่เป็นส่วนขยายอย่างเป็นทางการจาก Microsoft จึงมั่นใจได้ในความปลอดภัย
ขั้นตอนที่ 2: เปลี่ยนภาษาที่แสดงผลผ่าน Command Palette
เมื่อติดตั้งเสร็จแล้ว เราจะมาตั้งค่าเพื่อบอก VSCode ว่า "จากนี้ไปให้แสดงผลเป็นภาษาไทยนะ"
1. เปิด Command Palette ขึ้นมา วิธีที่ง่ายที่สุดคือการใช้คีย์ลัด Ctrl+Shift+P (Windows) / Cmd+Shift+P (Mac)
2. ในช่องที่ปรากฏขึ้นมา พิมพ์ "Configure Display Language" แล้วคลิกเลือกตัวเลือกที่แสดงขึ้นมา
3. ไฟล์ตั้งค่าที่ชื่อว่า locale.json จะเปิดขึ้นมา ไฟล์นี้ใช้จัดการภาษาที่แสดงผลของ VSCode ให้คัดลอกโค้ดด้านล่างไปวางได้เลยครับ
หากมีข้อความเดิมอยู่แล้ว เช่น "locale":"en" ก็ให้เปลี่ยนแค่ตรง "en" เป็น "th" ก็พอครับ
{
"locale": "th"
}ขั้นตอนที่ 3: รีสตาร์ท VSCode เพื่อให้การตั้งค่ามีผล
หลังจากบันทึกการตั้งค่าแล้ว ขั้นตอนสุดท้ายคือการปิด VSCode หนึ่งครั้งแล้วเปิดขึ้นมาใหม่ การรีสตาร์ทนี้สำคัญมากเพื่อให้การตั้งค่ามีผลบังคับใช้
เป็นอย่างไรบ้างครับ? ถ้าเมนูและคำสั่งต่างๆ แสดงเป็นภาษาไทยแล้ว ก็หมายความว่าการตั้งค่าสำเร็จเรียบร้อย!
ตั้งค่าแล้วไม่เปลี่ยนเป็นภาษาไทย? ตรวจสอบสาเหตุและวิธีแก้ไขที่พบบ่อย
หากทำตามขั้นตอนแล้ว แต่ยังไม่เป็นภาษาไทย... ไม่ต้องตกใจครับ ลองตรวจสอบตามรายการด้านล่างนี้ดู ผมเองก็เคยเจอปัญหาเล็กๆ น้อยๆ แบบนี้ตอนเริ่มต้นเหมือนกัน
กรณีที่ 1: ไม่เป็นภาษาไทยเลยแม้แต่น้อย
กรณีที่ 2: เมนูเป็นภาษาไทย แต่บางส่วนยังเป็นภาษาอังกฤษ
นี่ไม่ใช่ข้อผิดพลาดครับ ส่วนขยายจำนวนมากของ VSCode ถูกสร้างโดยนักพัฒนาจากทั่วโลก ซึ่งส่วนใหญ่ยังไม่รองรับภาษาไทย ดังนั้นจึงเป็นเรื่องปกติที่เมนูบางอย่างที่มาจากส่วนขยายเหล่านั้นจะยังคงเป็นภาษาอังกฤษ หากเมนูหลักๆ เป็นภาษาไทยแล้ว ก็ถือว่าการตั้งค่าสำเร็จแล้วครับ
หากยังแก้ไขไม่ได้?
หากไม่เข้าข่ายกรณีใดๆ ข้างต้น ผมขอแนะนำให้ดูข้อมูลจากเอกสารทางการของ VSCode ซึ่งเป็นแหล่งข้อมูลที่ถูกต้องและอัปเดตที่สุด
🔗 Visual Studio Code - Display Language (เอกสารทางการ)
การตั้งค่าขั้นสูง: ปรับสภาพแวดล้อมภาษาไทยให้ดียิ่งขึ้น
มาถึงส่วนสำคัญแล้วครับ! เมื่อ VSCode ของเราเป็นภาษาไทยแล้ว เรามาเพิ่มการตั้งค่าที่จะช่วยให้การพัฒนาโปรแกรมในภาษาไทย "สะดวกสบาย" ยิ่งขึ้นไปอีก นี่คือการตั้งค่าที่ผมใช้จริงและรู้สึกว่า "จำเป็นต้องมี" สำหรับนักพัฒนาชาวไทย
การตั้งค่าที่จำเป็น: ป้องกันปัญหา "ภาษาต่างด้าว" อัตโนมัติ
คุณเคยเปิดไฟล์ที่คนอื่นสร้าง เช่น ไฟล์ .csv หรือไฟล์ .txt เก่าๆ แล้วเจอข้อความที่อ่านไม่ออกหรือที่เรียกกันว่า "ภาษาต่างด้าว" ไหมครับ? ปัญหานี้เกิดจากการที่ VSCode ไม่สามารถเดาการเข้ารหัสตัวอักษร (Character Encoding) ของไฟล์นั้นๆ ได้อย่างถูกต้อง โดยเฉพาะไฟล์ภาษาไทยเก่าๆ ที่อาจจะไม่ได้ใช้มาตรฐาน UTF-8 แต่อาจใช้เป็น TIS-620
เราสามารถเพิ่มการตั้งค่า "เหมือนมีเวทมนตร์" หนึ่งบรรทัด เพื่อสั่งให้ VSCode พยายามเดาการเข้ารหัสที่ถูกต้องโดยอัตโนมัติ ซึ่งจะช่วยลดปัญหานี้ไปได้มากเลยครับ
1. เปิดไฟล์ settings.json ของคุณ (เปิด Command Palette ด้วย Ctrl+Shift+P แล้วค้นหา Preferences: Open User Settings (JSON))
2. เพิ่มโค้ดหนึ่งบรรทัดต่อไปนี้ลงในไฟล์ settings.json หากมีค่าอื่นอยู่แล้ว ให้ใส่เครื่องหมายจุลภาค (,) เพื่อคั่นรายการ
{
// การตั้งค่าอื่นๆ ที่คุณอาจมีอยู่แล้ว...
"files.autoGuessEncoding": true
}เพียงเท่านี้ VSCode ก็จะฉลาดขึ้นในการเปิดไฟล์ภาษาไทย และโอกาสที่จะเจอภาษาต่างด้าวก็จะน้อยลงมากครับ!
บทสรุป: มาสนุกกับการเขียนโค้ดในสภาพแวดล้อมภาษาไทยกันเถอะ!
ในบทความนี้ เราได้เรียนรู้วิธีการตั้งค่า VSCode ให้เป็นภาษาไทย รวมถึงการตั้งค่าขั้นสูงเพื่อทำให้สภาพแวดล้อมการทำงานของเราสะดวกสบายยิ่งขึ้น
ในการเรียนเขียนโปรแกรม การตั้งค่าสภาพแวดล้อมถือเป็นด่านแรกที่ต้องผ่าน แต่เมื่อผ่านไปได้แล้ว ที่เหลือก็คือความสนุกในการเขียนโค้ด การขจัดความเครียดที่ไม่จำเป็นอย่างเรื่องภาษาของเครื่องมือ ถือเป็นสิ่งสำคัญอย่างยิ่งในการเพิ่มประสิทธิภาพการเรียนรู้
ผมหวังว่าบทความนี้จะเป็นประโยชน์และช่วยให้ชีวิตการใช้ VSCode ของคุณสะดวกสบายขึ้นนะครับ ขอให้สนุกกับการเขียนโปรแกรมในสภาพแวดล้อมที่คุณคุ้นเคย!
บทความถัดไปที่แนะนำ
เมื่อตั้งค่า VSCode พื้นฐานเรียบร้อยแล้ว ลองมา挑戦กับการเชื่อมต่อกับ "Git" ซึ่งเป็นเครื่องมือจัดการเวอร์ชันดูไหมครับ? ในบทความถัดไป ผมจะอธิบายวิธีจัดการประวัติการแก้ไขซอร์สโค้ดและเชื่อมต่อกับ GitHub ซึ่งเป็นสิ่งจำเป็นสำหรับการทำงานเป็นทีม