รองรับ CSS และ Baseline ใน ESLint แล้ว

Jeremy Wagner

เผยแพร่เมื่อวันที่ 12 มีนาคม 2025 อัปเดตล่าสุดเมื่อวันที่ 26 มีนาคม 2025

ESLint เป็นเครื่องมือตรวจสอบโค้ดที่ได้รับความนิยมสำหรับ JavaScript มาอย่างยาวนาน โดยมีตัวเลือกการตั้งค่าและกฎที่หลากหลายซึ่งช่วยให้นักพัฒนาแอปบังคับใช้รูปแบบที่ดีสำหรับ JavaScript ในโปรเจ็กต์ได้ เมื่อไม่นานมานี้ ESLint ได้เปิดตัวการรองรับการตรวจสอบโค้ด CSS ในโปรเจ็กต์ โดยมีกฎเพิ่มเติมสำหรับการตรวจสอบลักษณะของสไตล์ชีต

ESLint ได้เปิดตัวกฎ require-baseline ซึ่งเป็นส่วนหนึ่งของการเปิดตัวการรองรับ CSS โดยกฎนี้ช่วยให้คุณระบุเกณฑ์ Baseline ที่ต้องการใช้เมื่อตรวจสอบโค้ด CSS ในโปรเจ็กต์ได้ ในโพสต์สั้นๆ นี้ คุณจะได้เรียนรู้วิธีใช้กฎนี้เพื่อให้มั่นใจว่า CSS เป็นไปตามเกณฑ์ Baseline ที่เพิ่งเปิดตัวและพร้อมใช้งานในวงกว้าง

วิธีใช้ ESLint เพื่อบังคับใช้ฟีเจอร์ Baseline CSS

หากคุณเคยใช้ ESLint มาก่อน กระบวนการเพิ่มการตรวจสอบโค้ด CSS ลงในโปรเจ็กต์ควรทำได้อย่างรวดเร็ว เริ่มต้นด้วยการติดตั้งแพ็กเกจ @eslint/css สำหรับโปรเจ็กต์

npm install @eslint/css --save-dev

เมื่อติดตั้งแล้ว คุณจะเพิ่มการรองรับการตรวจสอบโค้ด CSS ลงในโปรเจ็กต์ได้โดยการนำเข้าแพ็กเกจ @eslint/css ไปยังการกำหนดค่า ESLint ที่มีอยู่

// eslint.config.js
import css from "@eslint/css";

export default [
  // Lint css files
  {
    files: ["src/css/**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to ensure they are using
      // only Baseline Widely available features:
      "css/require-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
];

แม้ว่าการตรวจสอบโค้ด CSS จะมีประโยชน์ในตัวของมันเอง แต่คุณค่าที่เพิ่มขึ้นที่ ESLint มอบให้ในการดำเนินการดังกล่าวคือผ่านกฎ require-baseline ของเครื่องมือตรวจสอบโค้ด ในข้อมูลโค้ดก่อนหน้า ระบบจะสร้างคำเตือนทุกครั้งที่พบฟีเจอร์ที่ไม่ได้อยู่ใน Baseline ที่พร้อมใช้งานในวงกว้าง ซึ่งระบุผ่านพร็อพเพอร์ตี้ available ของกฎ ซึ่งยังยอมรับค่า "newly" เพื่อให้มั่นใจว่าฟีเจอร์ CSS ทั้งหมดที่ใช้เป็นไปตาม Baseline ที่เพิ่งเปิดตัวอย่างน้อย

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

npx eslint

เมื่อเสร็จแล้ว ESLint จะแสดงคำเตือนเกี่ยวกับ CSS ของโปรเจ็กต์ ซึ่งจะมีลักษณะดังนี้

/var/www/my-cool-web-project/src/css/styles.css
  269:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  427:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  444:12  warning  Value 'contents' of property 'display' is not a widely available baseline feature  css/require-baseline
  500:3   warning  Property 'resize' is not a widely available baseline feature                       css/require-baseline
  573:5   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline

ข้อดีอย่างหนึ่งของการที่ ESLint เปิดตัวฟังก์ชันนี้คือคุณสามารถใช้ฟังก์ชันนี้ในเวิร์กโฟลว์ของเครื่องมือใดก็ได้ที่ใช้ ESLint ตัวอย่างเช่น หากคุณใช้ webpack คุณสามารถทำให้ webpack แสดงเอาต์พุตของ Linter ระหว่างการสร้างโปรเจ็กต์ได้โดยใช้ eslint-webpack-plugin

// Import the ESLint plugin:
import ESLintPlugin from "eslint-webpack-plugin";

// Webpack config:
export default {
  // Prior config code omitted...
  plugins: [
    new ESLintPlugin({
      // Add the `"css"` extension to ensure
      // CSS files are linted as well:
      extensions: ["js", "css"]
    })
  ]
};

การเพิ่มฟีเจอร์ใหม่ที่เป็นประโยชน์เหล่านี้ลงใน ESLint จะช่วยให้คุณมั่นใจได้ว่าโปรเจ็กต์ของคุณใช้ฟีเจอร์ Baseline CSS โดยไม่ต้องเพิ่มความพยายามมากนัก ลองดูเลย คุณอาจประหลาดใจที่ได้พบฟีเจอร์ Baseline บางอย่างที่ใช้ในโปรเจ็กต์ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของฟีเจอร์นี้ได้ใน เอกสารประกอบสำหรับกฎ require-baseline