[การแก้ไขปัญหาทั่วไป] สรุปข้อผิดพลาดที่พบบ่อยใน VSCode และวิธีแก้ไข

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

โดยเฉพาะช่วงที่เพิ่งเริ่มใช้ VSCode (Visual Studio Code) ข้อความแสดงข้อผิดพลาดที่ปรากฏขึ้นมาไม่หยุดหย่อนคงทำให้ท้อใจกันใช่ไหมครับ ทั้งๆ ที่เรา "ก็แค่อยากจะเขียนโค้ดเท่านั้นเอง...!"

ในบทความนี้ ผมจะมาอธิบายข้อผิดพลาดที่พบบ่อยจริงๆ ใน VSCode ที่ผมเคยเจอและก้าวข้ามผ่านมาได้ พร้อมวิธีแก้ไขที่เข้าใจง่ายกว่าใคร โดยจะหลีกเลี่ยงการใช้ศัพท์เทคนิคให้มากที่สุด เป้าหมายมีเพียงหนึ่งเดียวคือเพื่อให้ทุกคนได้สัมผัสกับประสบการณ์ "มันใช้งานได้!" เมื่ออ่านบทความนี้จบแล้ว ข้อผิดพลาดก็จะไม่ใช่เรื่องน่ากลัวอีกต่อไป เรามาค่อยๆ แก้ปัญหากันไปทีละอย่างนะครับ!

[พื้นฐานสุดๆ] สามสิ่งศักดิ์สิทธิ์แห่งการแก้ปัญหาที่ควรลองก่อน!

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

1. อย่างแรกและสำคัญที่สุด "รีสตาร์ท"

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

2. ปิดส่วนขยายทั้งหมดชั่วคราว

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

เพื่อตรวจสอบว่าส่วนขยายเป็นสาเหตุหรือไม่ ฟีเจอร์ "Extension Bisect" นั้นมีประโยชน์มาก

เปิด Command Palette (mac: Cmd + Shift + P, Win: Ctrl + Shift + P)
พิมพ์ >Extensions: Bisect แล้วรัน
ทำตามคำแนะนำบนหน้าจอ VSCode จะทำการปิดส่วนขยายทีละครึ่งโดยอัตโนมัติ เพื่อช่วยให้คุณระบุส่วนขยายที่เป็นปัญหาได้

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

3. แยกแยะปัญหา

ลองนึกย้อนกลับไปว่าข้อผิดพลาดนี้เริ่มปรากฏ "ตั้งแต่เมื่อไหร่" และ "หลังจากทำอะไร"

หลังจากติดตั้งส่วนขยายใหม่ทันที?
เฉพาะตอนเปิดไฟล์บางไฟล์?
ไฟล์ HTML ไม่เป็นไร แต่เกิดข้อผิดพลาดกับไฟล์ JavaScript?

การสามารถระบุเงื่อนไขที่เกิดปัญหาได้ จะเป็นทางลัดในการแก้ไขปัญหา

[แยกตามสถานการณ์] ข้อผิดพลาดที่ทำให้ผมแทบร้องไห้... ปัญหาที่พบบ่อยและวิธีแก้แบบคัดลอกและวาง

จากนี้ไป ผมจะแนะนำข้อผิดพลาดเฉพาะที่ผมเจอจริงๆ ระหว่างการพัฒนาเว็บไซต์และใช้เวลาแก้ไขอยู่พักหนึ่ง ผมมั่นใจว่าคุณจะเจอข้อผิดพลาดที่อยู่บนหน้าจอของคุณตอนนี้แน่นอน

กรณีที่ 1: ภาษาต่างดาว! ข้อผิดพลาด "ตัวอักษรเพี้ยน"

คุณคิดว่าคุณเขียนภาษาไทยในไฟล์ HTML ของคุณ แต่เมื่อเปิดดูในเบราว์เซอร์ มันกลับกลายเป็นสัญลักษณ์ลึกลับ... นี่คือข้อผิดพลาด "ตัวอักษรเพี้ยน" (Mojibake) ซึ่งเป็นเส้นทางที่มือใหม่ทุกคนต้องเจอ

สาเหตุ:
เกิดจากความไม่ตรงกันระหว่าง "การเข้ารหัสตัวอักษร" (character encoding) ที่ไฟล์ถูกบันทึกไว้ กับการเข้ารหัสตัวอักษรที่เบราว์เซอร์คาดเดาว่าไฟล์นั้นใช้อยู่ ในอดีต รูปแบบอย่าง Shift_JIS เป็นที่นิยมในญี่ปุ่น แต่ปัจจุบันมาตรฐานสากลคือ UTF-8

วิธีแก้ไข:
เรามาเปลี่ยนการตั้งค่า VSCode ให้บันทึกไฟล์ทั้งหมดในอนาคตเป็น UTF-8 กันเถอะครับ เมื่อตั้งค่านี้แล้ว คุณจะไม่ต้องกังวลเรื่องตัวอักษรเพี้ยนอีกต่อไป

บน mac กด Cmd + , (จุลภาค) และบน Windows กด Ctrl + , (จุลภาค) เพื่อเปิดการตั้งค่า จากนั้นคลิกไอคอนไฟล์ที่มุมบนขวาเพื่อเปิด settings.json แล้วคัดลอกโค้ดต่อไปนี้ไปวาง

{
  // การตั้งค่าที่เกี่ยวข้องกับไฟล์
  "files.encoding": "utf8", // ตั้งค่าการเข้ารหัสตัวอักษรเริ่มต้นเป็น UTF-8 เมื่อเปิดไฟล์
  "files.autoGuessEncoding": true, // เดาการเข้ารหัสตัวอักษรโดยอัตโนมัติเมื่อเปิดไฟล์
  "files.eol": "\n" // ทำให้การขึ้นบรรทัดใหม่เป็นแบบ LF (\n)
}

ถ้ามีอะไรเขียนอยู่ใน {} อยู่แล้ว ให้เพิ่มเฉพาะรายการตั้งค่า (เช่น "files.encoding": "utf8",) เข้าไปข้างในครับ

กรณีที่ 2: คำสั่งไม่ทำงาน! ข้อผิดพลาด "command not found"

ในการพัฒนาเว็บ เรามักจะใช้คำสั่งอย่าง npm และ git ในเทอร์มินัลที่มากับ VSCode แต่บางครั้งเมื่อพิมพ์คำสั่งลงไป กลับเจอข้อผิดพลาดอย่าง zsh: command not found: npm เหมือนกับมันกำลังบอกเราว่า "ไม่รู้จักคำสั่งนี้"

สาเหตุ:
เกิดจากคำสั่ง (โปรแกรม) นั้นไม่ได้ถูกติดตั้งบนคอมพิวเตอร์ของคุณ หรือติดตั้งแล้วแต่คอมพิวเตอร์ไม่รู้ว่ามันอยู่ที่ไหน (นั่นคือ PATH ไม่ได้ถูกตั้งค่า)

วิธีแก้ไข:
ก่อนอื่น เรามาตรวจสอบกันว่ามันติดตั้งอยู่จริงๆ หรือไม่ ตัวอย่างเช่น สำหรับ Node.js (ซึ่งรวมคำสั่ง npm อยู่ด้วย) ลองพิมพ์คำสั่งต่อไปนี้ในเทอร์มินัล

node -v

ถ้ามีหมายเลขเวอร์ชัน (เช่น v20.11.0) แสดงขึ้นมา แสดงว่าติดตั้งแล้ว แต่ถ้าเจอ command not found แสดงว่ายังไม่ได้ติดตั้งเลย ให้ไปติดตั้งจาก เว็บไซต์ทางการของ Node.js

ถ้ายังเจอข้อผิดพลาดอยู่ทั้งๆ ที่ติดตั้งแล้ว ให้ลองรีสตาร์ท VSCode ดูครับ บางทีหลังจากการติดตั้ง VSCode อาจจะยังไม่รู้จัก PATH ใหม่

กรณีที่ 3: โค้ดไม่จัดรูปแบบ! Prettier / ESLint ไม่ทำงาน

ทันทีที่คุณบันทึกไฟล์ โค้ดที่ยุ่งเหยิงของคุณจะถูกจัดรูปแบบอย่างน่าอัศจรรย์... สิ่งนี้เกิดขึ้นได้ด้วย formatters/linters อย่าง Prettier และ ESLint แต่ปัญหาที่พบบ่อยคือตั้งค่าแล้วแต่มันไม่ทำงานเลย!

สาเหตุ:
มีสาเหตุที่เป็นไปได้หลายอย่าง
1. ส่วนขยาย Prettier หรือ ESLint สำหรับ VSCode ไม่ได้ติดตั้งหรือถูกปิดใช้งาน
2. โปรเจกต์ไม่มีไฟล์การตั้งค่า (.prettierrc, .eslintrc.js)
3. "Format on Save" ไม่ได้เปิดใช้งานในการตั้งค่า VSCode
4. มี formatters หลายตัวขัดแย้งกัน

วิธีแก้ไข:
ลองคัดลอกและวางการตั้งค่าต่อไปนี้ลงในไฟล์ settings.json ที่เราพูดถึงไปก่อนหน้านี้ดูครับ นี่คือการตั้งค่าแบบ "ครบวงจร" ที่ควรจะแก้ปัญหาได้ทุกประเภท การตั้งค่านี้ช่วยผมได้นับครั้งไม่ถ้วนตอนที่ผมสร้างเว็บไซต์

{
  // ----- การตั้งค่าสำหรับการจัดรูปแบบและ Linting -----

  // ตั้งค่า Prettier เป็น formatter เริ่มต้น
  // เพื่อป้องกันการขัดแย้งกับ formatters อื่นๆ
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // จัดรูปแบบอัตโนมัติเมื่อบันทึกไฟล์
  "editor.formatOnSave": true,

  // ระบุประเภทไฟล์ที่ต้องการให้ ESLint ตรวจสอบและแก้ไข
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // ให้ ESLint แก้ไขอัตโนมัติเมื่อบันทึกไฟล์ด้วย
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

【จุดสำคัญ】
ส่วนที่สำคัญที่สุดคือ "editor.defaultFormatter": "esbenp.prettier-vscode" VSCode มีความสามารถในการจัดรูปแบบโค้ดในตัวอยู่แล้ว ดังนั้นเมื่อคุณติดตั้งส่วนขยาย Prettier มันอาจจะสับสนว่าจะต้องทำตามคำสั่งของใคร บรรทัดนี้เป็นการประกาศว่า "เรื่องการจัดรูปแบบ ผมขอมอบให้คุณ Prettier จัดการทั้งหมด!" ซึ่งจะช่วยป้องกันการขัดแย้งกัน

แน่นอนว่านี่อยู่บนพื้นฐานที่ว่าคุณได้ติดตั้งส่วนขยาย Prettier และ ESLint แล้วนะครับ!

กรณีที่ 4: หา import ไม่เจอ! ข้อผิดพลาด "Cannot find module"

เมื่อพัฒนาด้วย JavaScript หรือ TypeScript เราจะใช้ import เพื่อโหลดส่วนประกอบ (modules) จากไฟล์อื่น บางครั้งคุณอาจเจอข้อผิดพลาดอย่าง Cannot find module './components/Button'

สาเหตุ:
นี่เกือบทั้งหมดเป็นข้อผิดพลาดในการระบุ path ง่ายๆ แต่เมื่อโปรเจกต์ซับซ้อนขึ้น path แบบสัมพัทธ์อย่าง ../../../../utils/helper.js อาจจะลึกลงไปเรื่อยๆ ทำให้ผิดพลาดได้ง่าย (ผมเรียกสิ่งนี้ว่า "นรก ('../')")

วิธีแก้ไข:
เพื่อหนีจาก "นรก ('../')" นี้ เรามาสร้างไฟล์การตั้งค่าที่ชื่อว่า jsconfig.json (หรือ tsconfig.json สำหรับ TypeScript) กันเถอะครับ ไฟล์นี้จะบอก VSCode ว่า "นี่คือตำแหน่งพื้นฐาน (root) ของโปรเจกต์"

สร้างไฟล์ชื่อ jsconfig.json ที่ระดับบนสุดของโปรเจกต์ของคุณ (ระดับเดียวกับ package.json) แล้วคัดลอกเนื้อหาต่อไปนี้ไปวาง

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

【จุดสำคัญ】
การตั้งค่านี้ดีอย่างไร? ตัวอย่างเช่น สมมติว่าคุณต้องการ import ไฟล์จาก src/components/ui/Button.jsx ไปยัง src/pages/index.js ซึ่งอยู่ในไดเรกทอรีที่แตกต่างกันโดยสิ้นเชิง

ก่อน: import Button from '../../components/ui/Button'; (ระบุ path ผิดได้ง่าย...)
หลัง: import Button from '@/components/ui/Button'; (@ ชี้ไปที่โฟลเดอร์ src ทำให้คุณสามารถเขียนแบบเดิมได้เสมอ!)

ด้วยวิธีนี้ คุณแทบจะไม่ต้องแก้ไขคำสั่ง import ของคุณอีกเลยแม้ว่าจะย้ายไฟล์ไปมา นี่เป็นการปฏิวัติวงการอย่างแท้จริง!

[ขั้นสูง] ไม่ต้องกลัวอีกต่อไป! วิธีถาม AI เมื่อเจอข้อผิดพลาด

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

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

เทมเพลตคำถามสุดยอด

เมื่อคุณเจอข้อผิดพลาด ลองถาม AI โดยใช้เทมเพลตต่อไปนี้

หัวข้อ: พบ [เนื้อหาข้อผิดพลาด] ใน [เทคโนโลยีที่ใช้]

1. ความเป็นมา/เป้าหมาย:
(เช่น ฉันกำลังพยายาม import component โดยใช้ Next.js และ TypeScript)

2. ปัญหาที่เกิดขึ้น:
(เช่น เมื่อฉันรัน npm run dev ข้อความแสดงข้อผิดพลาดต่อไปนี้จะปรากฏในเทอร์มินัล)

วางข้อความแสดงข้อผิดพลาดที่นี่ตามที่เป็นจริง

3. โค้ดที่เกี่ยวข้อง:
(เช่น นี่คือส่วนของโค้ดที่เกี่ยวข้องจากไฟล์ที่เกิดข้อผิดพลาด)

วางโค้ดที่นี่

4. สิ่งที่ได้ลองทำไปแล้ว:
(เช่น ฉันได้ลองรัน npm install ใหม่และรีสตาร์ท VSCode แล้ว แต่ปัญหายังไม่ได้รับการแก้ไข)

5. คำถาม:
โปรดบอกสาเหตุที่แท้จริงของข้อผิดพลาดนี้และขั้นตอนที่เฉพาะเจาะจงในการแก้ไข

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

สรุป

ในบทความนี้ ผมได้อธิบายข้อผิดพลาดที่มือใหม่มักจะสะดุดใน VSCode และวิธีแก้ไขที่เฉพาะเจาะจง โดยอิงจากประสบการณ์ของผมเอง

ข้อผิดพลาดเป็นส่วนหนึ่งที่หลีกเลี่ยงไม่ได้ของการเรียนรู้การเขียนโปรแกรม แต่ทุกข้อผิดพลาดล้วนมีสาเหตุและวิธีแก้ไข ข้อความแสดงข้อผิดพลาดไม่ใช่ศัตรูของคุณ แต่มันเป็นสัญญาณที่เป็นมิตรที่บอกคุณว่า "ตรงนี้ผิดนะ!"

ผมจะดีใจมากหากบทความนี้ช่วยเปลี่ยน "ไม่เข้าใจ" ของคุณให้เป็น "เข้าใจแล้ว!" ทุกครั้งที่คุณก้าวข้ามข้อผิดพลาดไปได้ คุณกำลังเก่งขึ้นอย่างแน่นอน ขอให้มั่นใจและสนุกกับการเขียนโค้ดนะครับ!