JSONC to JSON Converter: ลบ Comment ให้เป็น JSON แบบ Strict

ใครที่เขียน TypeScript หรือใช้ VS Code เป็นประจำ คงคุ้นเคยกับไฟล์ config ที่เขียน comment ไว้เตือนความจำอย่าง tsconfig.json หรือ settings.json อยู่แล้ว ไฟล์แบบนี้เรียกว่า JSONC (JSON with Comments) ซึ่ง tsc และ VS Code เข้าใจและยอมรับดี แต่พอต้องนำข้อมูลชุดเดียวกันไปใช้กับ JSON parser แบบ strict, API หรือเครื่องมืออื่น ๆ ปัญหาก็เริ่มขึ้นทันที เพราะ comment และ trailing comma จะถูกปฏิเสธเสมอ

ตัว JSONC to JSON Converter ถูกออกแบบมาเพื่อแก้ปัญหานี้โดยเฉพาะ วาง JSONC ลงไปเท่านั้น ตัว stripper แบบ scanner ที่เดินทีละตัวอักษรจะลบ comment ทั้งแบบบรรทัดเดียวและหลายบรรทัด พร้อมตัด trailing comma ให้เหลือ JSON ที่สะอาดและผ่านการ validate แบบ strict ทันทีใน browser โดยทำงาน 100% ฝั่ง client ฟรีและไม่ต้องสมัครสมาชิก

ที่สำคัญ หากไฟล์มี syntax ผิดพลาดตรงไหน เครื่องมือจะรายงาน error พร้อมระบุ line และ column แม่นยำ ไม่ต้องเดาว่าโค้ดพังตรงจุดไหน บทความนี้จะพาไปดูว่า JSONC ต่างจาก JSON อย่างไร มีกับดักอะไรบ้าง และวิธีแปลงที่ถูกต้องทำได้ง่ายแค่ไหน

ทำไมต้องใช้ JSONC to JSON Converter?

• ต้องการ JSON แบบ strict จริง ๆ — JSON parser มาตรฐานอย่าง JSON.parse ไม่ยอมรับ comment หรือ trailing comma เลย ไฟล์ที่มีสิ่งเหล่านี้จะ fail ทันทีเมื่อส่งต่อไปให้ API หรือเครื่องมือที่เข้มงวด
• ไม่ต้องลบ comment ด้วยมือ — ไฟล์ config ขนาดใหญ่มี comment กระจายอยู่ทั่ว การลบเองเสี่ยงลบผิดหรือลบขาด ตัว converter ทำแทนครั้งเดียวจบ
• ต่างจาก regex ทั่วไปตรงความแม่นยำ — stripper แบบ scanner เดินทีละตัวอักษรพร้อมติดตามสถานะ string ทำให้ลำดับที่ "ดูเหมือน" comment แต่จริง ๆ คือเนื้อหาใน string (อย่าง URL หรือ glob pattern) ไม่ถูกลบผิด
• Debug syntax ได้เร็วขึ้น — เมื่อไฟล์พัง เครื่องมือรายงาน error line และ column ตรงจุดช่วยให้แก้ได้ภายในไม่กี่วินาที
• ความเป็นส่วนตัวสูงสุด — ทุกอย่างประมวลผลใน browser ไฟล์ config ที่อาจมี path หรือค่า internal ไม่เคยถูกส่งขึ้น server
• ฟรีและเริ่มใช้ได้ทันที — ไม่ต้องติดตั้ง ไม่ต้องสมัคร เปิดหน้าเครื่องมือแล้ววางโค้ดได้เลย

ฟีเจอร์หลัก

รายละเอียดที่ควรรู้เพิ่มเติม:

• เอาต์พุตที่ได้คือ strict JSON ที่ผ่าน JSON.parse ได้ทันที พร้อมก๊อปไปใช้ต่อได้เลย
• เหมาะกับไฟล์ที่มาจาก tsconfig.json, settings.json, .eslintrc.json หรือ config ในระบบต่าง ๆ ที่อนุญาต comment
• กรณีไฟล์พังจาก syntax จริง ๆ (เช่น comma หาย) ตัวเครื่องมือจะไม่เดาและไม่ลองแก้เอง แต่ชี้ตำแหน่งปัญหาให้เราตัดสินใจเอง

วิธีแปลง JSONC เป็น JSON

1. เปิดหน้า JSONC to JSON Converter ใน browser
2. คัดลอกเนื้อหาไฟล์ JSONC ทั้งหมด เช่น tsconfig.json หรือ settings.json ของคุณ
3. วางลงในช่อง input ผลลัพธ์จะปรากฏทันทีโดยไม่ต้องกดปุ่มใดเพิ่ม
4. ตรวจผลลัพธ์ฝั่ง JSON ที่สะอาดแล้ว หากมี error ให้ดู line และ column ที่ระบุ แล้วไปแก้ต้นฉบับตามตำแหน่งนั้น
5. คัดลอก JSON ที่ได้ไปใช้งาน เช่น แปะลงสคริปต์ ส่งให้ API หรือเซฟเป็น fixture สำหรับ test

JSONC ต่างจาก JSON อย่างไร

JSON มาตรฐาน (RFC 8259) เป็น format ที่เรียบง่ายและเข้มงวด: ไม่มี comment, ไม่มี trailing comma, และ key ต้องอยู่ใน double quote เสมอ ส่วน JSONC คือส่วนขยายที่ทีม TypeScript และ VS Code นำมาใช้เพื่อให้ไฟล์ config อ่านง่ายขึ้น โดยอนุญาตสองอย่างนี้เพิ่มเข้ามา

หนึ่งคือ comment ซึ่งมีสองแบบ: // สำหรับ comment บรรทัดเดียว และ /* ... */ สำหรับ comment หลายบรรทัด สองคือ trailing comma ที่วางไว้หลังสมาชิกตัวสุดท้าย เพื่อให้เวลาเพิ่มหรือลด key ไม่ต้องมาไล่แก้ comma ทุกครั้ง แต่ strict parser อย่าง JSON.parse จะ throw error ทันทีที่เจอทั้งสองอย่างนี้ นั่นคือเหตุผลว่าทำไม tsc และ VS Code อ่านไฟล์ได้ แต่เครื่องมืออื่นปฏิเสธ

{
  // ตัวอย่างก่อนแปลง
  "target": "ES2022" /* มาตรฐาน JS */,
  "baseUrl": "https://example.com/api", // URL มี //
}

สังเกต "baseUrl" ที่มี // อยู่ข้างใน string — นี่คือกับดักคลาสสิก เพราะ script แบบ regex ธรรมดาที่หาแค่ // แล้วตัดทิ้งจะทำให้ URL เสียหาย ตัว stripper ใน jsonc-to-json-converter ใช้ scanner เดินทีละตัวอักษรพร้อมติดตามว่าขณะนี้อยู่ใน string หรือไม่ เมื่ออยู่ใน string จะไม่ตีความ // เป็น comment จึงลบได้เฉพาะ comment จริงเท่านั้น หลังแปลงแล้วจะได้ strict JSON ที่ JSON.parse ยอมรับทันที และหากไฟล์มี syntax ผิดจริง ๆ เครื่องมือจะรายงาน error พร้อม line และ column เป๊ะ ๆ เช่น "Unexpected token ที่ line 4 column 3" ซึ่งช่วยได้มากกว่า error จาก JSON.parse ที่มักกำกวม

กรณีใช้งานจริง

ส่งค่า tsconfig ให้สคริปต์หรือ CI

สมมติคุณเขียนสคริปต์อ่านค่า compilerOptions จาก tsconfig.json ไปใช้ต่อ แต่ไฟล์ดังกล่าวมี comment ประจำทุกบรรทัด วิธีง่าย ๆ คือวางไฟล์เข้า jsonc-to-json-converter แล้วให้สคริปต์อ่านผลลัพธ์ strict JSON แทน ทำให้ CI pipeline ไม่พังเพราะ parser ไม่ยอมรับ comment

ทำความสะอาด settings ของ VS Code สำหรับ API

ไฟล์ settings.json ของทีมมักมี comment อธิบายเหตุผลของแต่ละค่า เวลาต้องอัปโหลด config ชุดเดียวกันขึ้น internal API หรือระบบจัดการ environment ที่รับเฉพาะ strict JSON แปลงผ่านเครื่องมือนี้ก่อนหนึ่งรอบ ก็ได้ไฟล์สะอาดที่ใช้ได้ทันทีโดยไม่ต้องเขียน comment ใหม่ด้วยมือ

เตรียม fixture สำหรับ test

Unit test มักต้องการไฟล์ JSON fixture ที่ parse ได้เป๊ะ แต่นักพัฒนาชอบเขียน fixture เดิมแบบมี comment และ trailing comma ไว้ให้คนอ่านเข้าใจง่าย แทนที่จะเขียนสองเวอร์ชัน ให้เก็บต้นฉบับแบบ JSONC แล้วแปลงเป็น strict JSON ตอนเตรียม test data ทุกครั้ง

เทียบ diff ของ config

เวลาต้องเทียบไฟล์ config สองเวอร์ชันด้วย diff tool ถ้ามี comment ต่างกันแต่ค่าจริงเหมือนกัน diff จะดูเลอะเทอะเต็มไปหมด การลบ comment ออกก่อนทำให้ diff โฟกัสเฉพาะการเปลี่ยนแปลงของค่า config จริง ๆ ซึ่งช่วยมากใน code review หรือการตรวจสอบ audit

แนวทางปฏิบัติที่ดี

• เก็บต้นฉบับแบบ JSONC ไว้เสมอ — comment ในไฟล์ config มีคุณค่า แปลงเฉพาะตอนที่ต้องใช้ strict JSON อย่าลบ comment ออกจากต้นฉบับถาวร
• แปลงก่อนส่งต่อทุกครั้งที่ปลายทางเป็น strict parser — อย่าสมมติว่าปลายทางอ่าน JSONC ได้ ให้ถือว่า JSON มาตรฐานคือรูปแบบสากลสำหรับการแลกเปลี่ยนข้อมูล
• ตรวจ error line และ column ก่อนลงมือแก้ — เวลาเครื่องมือรายงานตำแหน่งปัญหา ให้ไปดูจุดนั้นในต้นฉบับทันที มักเป็น comma หายหรือ quote ไม่ปิด
• ระวังไฟล์ที่มี string ซับซ้อน — ถ้า config มี glob, URL หรือ regex ที่มี / เยอะ ให้เลือกเครื่องมือที่เข้าใจสถานะ string อย่างเครื่องมือนี้ ไม่ใช่ regex ลอย ๆ
• ใช้ converter เพื่อ validate ด้วย — ถ้าแปลงแล้วได้ผลลัพธ์สะอาดโดยไม่มี error แปลว่า syntax ต้นฉบับถูกต้อง ใช้เป็นการ smoke test ไฟล์ config ได้
• หลีกเลี่ยงการ commit ไฟล์ JSON ที่แปลงแล้วทับต้นฉบับ — จะทำให้สูญเสีย comment ต้นทาง แยกไฟล์ output ไว้คนละชื่อหรือ generate ตอน build

พร้อมเปลี่ยนไฟล์ JSONC ที่มี comment เต็มไปหมดให้เป็น strict JSON ที่ทุก parser ยอมรับแล้วใช่ไหม เข้าไปที่ JSONC to JSON Converter วางโค้ดแล้วรับผลลัพธ์ได้ในไม่กี่วินาที ฟรี ทำงานในเบราว์เซอร์ 100% และไม่ต้องสมัครอะไรทั้งสิ้น

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• JSON Formatter — จัดรูปแบบและ validate JSON ให้อ่านง่ายด้วย indentation ที่สวยงาม
• JSON to CSV Converter — แปลงข้อมูล JSON เป็นตาราง CSV สำหรับใช้ใน Excel หรือรายงาน
• JSON to YAML Converter — แปลง JSON เป็น YAML ที่อ่านง่ายสำหรับไฟล์ config แบบ hierarchical

ขอให้แปลงไฟล์อย่างสนุก!

คำถามที่พบบ่อย

ถ: JSONC คืออะไร ต่างจาก JSON ตรงไหน?

ตอบ: JSONC คือ JSON ที่อนุญาตให้มี comment (ทั้งแบบบรรทัดเดียวและหลายบรรทัด) และ trailing comma เพิ่มเข้ามา นิยมใช้ในไฟล์ config อย่าง tsconfig.json และ settings.json ของ VS Code ส่วน JSON มาตรฐานไม่ยอมรับสองอย่างนี้เลย

ถ: เครื่องมือจะลบ // ใน URL หรือ glob pattern ด้วยหรือไม่?

ตอบ: ไม่ลบครับ stripper ทำงานแบบ scanner เดินทีละตัวอักษรโดยติดตามสถานะ string อยู่ตลอด ลำดับ // ที่อยู่ข้างใน string ถูกมองว่าเป็นเนื้อหาของ string ไม่ใช่ comment จึงไม่ถูกเข้าใจผิดหรือถูกตัดทิ้ง

ถ: ถ้าไฟล์มี syntax ผิด เครื่องมือจะทำอย่างไร?

ตอบ: เครื่องมือจะรายงาน error พร้อมระบุ line และ column ที่พบปัญหาอย่างแม่นยำ เพื่อให้คุณกลับไปแก้ต้นฉบับตรงจุดได้ทันที โดยไม่ต้องไล่หาด้วยตาเปล่าทั้งไฟล์

ถ: ข้อมูลของฉันถูกส่งขึ้น server หรือไม่?

ตอบ: ไม่ครับ การแปลงทั้งหมดประมวลผลในเบราว์เซอร์ของคุณ 100% ไม่มีการอัปโหลดไฟล์ไปที่ใด เหมาะกับไฟล์ config ที่มี path หรือค่า internal ขององค์กร

ถ: ควรเก็บไฟล์แบบไหนไว้ใน repository?

ตอบ: แนะนำให้เก็บต้นฉบับแบบ JSONC ที่มี comment เอาไว้เพื่อการดูแลรักษา และแปลงเป็น strict JSON เฉพาะตอนที่ต้องส่งต่อให้ parser, API หรือเครื่องมือที่เข้มงวด เช่น ตอน build หรือเตรียม test fixture