ตอนนี้ Visual Studio Code รองรับ Baseline แล้ว

Rick Viscomi

เผยแพร่: 20 พฤษภาคม 2025

เครื่องมือแก้ไขโค้ดยุคใหม่ช่วยเพิ่มประสิทธิภาพการทำงานได้อย่างมากด้วยการรวบรวมเครื่องมือและเอกสารอ้างอิงที่คุณต้องใช้เพื่อสร้างสิ่งต่างๆ อย่างมีประสิทธิภาพ ซึ่งก็คือตัว "I" ใน IDE การปรับปรุงประสิทธิภาพอย่างหนึ่งใน IDE หลายรายการ เช่น Visual Studio Code (VS Code) คือการแสดงข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เว็บขณะที่คุณวางเมาส์เหนือฟีเจอร์เหล่านั้นในตัวแก้ไข ข้อมูลนี้มีคำอธิบายฟีเจอร์ เบราว์เซอร์ที่รองรับ คู่มือไวยากรณ์ และลิงก์สำหรับดูข้อมูลเพิ่มเติมใน MDN

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

VS Code เวอร์ชันก่อนหน้าแสดงข้อมูลนี้ในรูปแบบหมายเลขเวอร์ชันของเบราว์เซอร์ ซึ่งคล้ายกับสิ่งที่คุณอาจเคยเห็นในตารางความเข้ากันได้บนเว็บไซต์ต่างๆ เช่น MDN, Can I Use หรือที่นี่ใน web.dev แต่สิ่งที่เว็บไซต์เหล่านี้มีเหมือนกันคือเว็บไซต์เหล่านี้ได้เริ่มสรุปภาพรวมที่ซับซ้อนของการรองรับเบราว์เซอร์โดยใช้ Baseline ดังนั้น เพื่อให้ VS Code สอดคล้องกับวิธีที่แหล่งข้อมูลอื่นๆ เหล่านี้สื่อสารข้อมูลความเข้ากันได้ของเบราว์เซอร์ ตอนนี้ VS Code จึงรองรับ Baseline ด้วย

หากต้องการใช้ UI พื้นฐานใหม่ ให้อัปเกรดเป็น VS Code เวอร์ชัน 1.100 ขึ้นไป ทุกอย่างทำงานได้ทันทีโดยไม่ต้องใช้ส่วนขยายหรือการกำหนดค่าเพิ่มเติม

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

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

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

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

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

Popover API เป็นอีกตัวอย่างหนึ่งของฟีเจอร์ HTML ที่เป็น Baseline ด้วยเช่นกัน แต่เป็นตั้งแต่ปี 2024 เท่านั้น จึงยังถือว่าเป็นฟีเจอร์ที่เพิ่งพร้อมใช้งาน ซึ่งหมายความว่าแม้ว่าเบราว์เซอร์หลักทั้งหมดจะรองรับ แต่ก็ยังไม่ถึง 2.5 ปีตามที่กำหนดไว้เพื่อให้พร้อมใช้งานอย่างแพร่หลาย ดังนั้นคุณอาจต้องดำเนินการด้วยความระมัดระวังมากขึ้นก่อนที่จะเปิดตัวฟีเจอร์นี้ให้กับผู้ใช้ทั้งหมด

การมีข้อมูลนี้พร้อมใช้งานใน VS Code จะช่วยเพิ่มประสิทธิภาพการทำงานได้เป็นอย่างดี แต่จะเกิดอะไรขึ้นหากคุณไม่จำเป็นต้องวางเมาส์เหนือฟีเจอร์เพื่อดูว่าฟีเจอร์นั้นเป็นฟีเจอร์พื้นฐานหรือไม่ ซึ่งเป็นไปได้ด้วยเครื่องมือที่แยกต่างหากแต่เกี่ยวข้อง นั่นคือ Linter

เช่น ส่วนขยาย ESLint สำหรับ VS Code สามารถตรวจสอบไฟล์ HTML และ CSS และเพิ่มขีดเส้นใต้หยึกๆ ให้กับฟีเจอร์ที่ยังไม่ใช่ Baseline ฟีเจอร์นี้ทำงานโดยใช้use-baselineกฎที่เพิ่งเพิ่มจากปลั๊กอิน HTML ESLint และ ESLint สำหรับ CSS นอกจากนี้ ยังมีกฎที่คล้ายกันสำหรับ Stylelint ด้วย หากคุณสนใจ แน่นอนว่านี่เป็นเพียงประโยชน์อย่างหนึ่งจากหลายๆ อย่างของ Linter แต่ก็แสดงให้เห็นว่า Linter ช่วยเสริมการ์ดวางเมาส์ที่เปิดใช้ Baseline ใหม่ได้ดีเพียงใด

หากคุณเป็นผู้ใช้ VS Code เราหวังว่าคุณจะลองใช้โฮเวอร์การ์ดใหม่นี้ และหากคุณไม่ได้ใช้ VS Code เราก็มีข่าวดีมาบอก IDE หลายรายการแยกมาจาก Code - OSS (เวอร์ชันโอเพนซอร์สของ VS Code) หรือใช้เซิร์ฟเวอร์ภาษาเดียวกันที่ขับเคลื่อนการ์ดแบบลอยของ HTML และ CSS IDE ปลายทางเหล่านี้อาจใช้เวลาหลายสัปดาห์หรือหลายเดือนในการอัปเกรดเป็นเวอร์ชันล่าสุด แต่เมื่ออัปเกรดแล้ว IDE เหล่านี้ควรจะรับช่วง UI พื้นฐานใหม่โดยอัตโนมัติ

• VSCodium
• Firebase Studio
• เคอร์เซอร์
• วินด์เซิร์ฟ
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• พื้นที่ทำงาน GitLab
• Replit
• StackBlitz (Bolt)

นอกจากนี้ JetBrains ยังพยายามผสานรวม Baseline กับ IDE ทั้งหมดที่ใช้ IntelliJ โดยเริ่มจาก WebStorm เราจะพูดถึงเรื่องนี้เพิ่มเติมในบล็อกโพสต์แยกต่างหาก โปรดติดตาม

เครื่องมือและแหล่งข้อมูลสำหรับนักพัฒนาซอฟต์แวร์จำนวนมากขึ้นเรื่อยๆ กำลังเพิ่มการรองรับ Baseline และการผสานรวม IDE ใหม่ๆ เหล่านี้ที่นำโดย VS Code นั้นน่าตื่นเต้นเป็นพิเศษ เราใช้เวลาใน IDE เป็นอย่างมาก และการมีข้อมูลพื้นฐานนี้อยู่เพียงปลายนิ้วจะช่วยให้เวิร์กโฟลว์การพัฒนาของเรามีความชัดเจนและสอดคล้องกันในเครื่องมือต่างๆ มากยิ่งขึ้น หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ Baseline และการผสานรวมเครื่องมืออื่นๆ เช่นนี้ โปรดไปที่คู่มือ Baseline เพื่อดูแหล่งข้อมูลเพิ่มเติม