เผยแพร่: 12 มีนาคม 2025
ESLint เป็นโปรแกรมตรวจสอบโค้ด JavaScript ที่ได้รับความนิยมมาอย่างยาวนาน โดยมีการตั้งค่าและกฎต่างๆ ที่ช่วยนักพัฒนาแอปบังคับใช้รูปแบบที่ดีสำหรับ JavaScript ในโปรเจ็กต์ เมื่อเร็วๆ นี้ ESLint ได้รองรับการตรวจสอบ CSS ในโปรเจ็กต์ ซึ่งนำเสนอกฎเพิ่มเติมในการตรวจสอบแง่มุมต่างๆ ของสไตลชีต
ในการเปิดตัวการรองรับ CSS ตอนนี้ ESLint มีกฎ require-baseline ซึ่งช่วยให้คุณระบุเกณฑ์พื้นฐานที่ต้องการใช้เมื่อตรวจหาข้อบกพร่อง CSS ในโปรเจ็กต์ได้ ในบทความสั้นๆ นี้ คุณจะได้เรียนรู้วิธีใช้กฎนี้เพื่อให้มั่นใจว่า CSS ของคุณเป็นไปตามเกณฑ์ "ใหม่" และ "พร้อมใช้งานในวงกว้าง" ของเกณฑ์พื้นฐาน
วิธีใช้ ESLint เพื่อบังคับใช้ฟีเจอร์ 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 ของโปรแกรมตรวจสอบ ในข้อมูลโค้ดด้านบน ระบบจะสร้างคำเตือนทุกครั้งที่พบฟีเจอร์ที่ไม่ใช่ "เวอร์ชันพื้นฐานที่พร้อมให้บริการในวงกว้าง" ซึ่งระบุผ่านพร็อพเพอร์ตี้ 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 แสดงผลลัพธ์ของโปรแกรมตรวจสอบไวยากรณ์ระหว่างการสร้างโปรเจ็กต์ได้โดยใช้ 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 โดยไม่ต้องทำอะไรเพิ่มเติมมากนัก ลองดูเลย คุณอาจประหลาดใจเมื่อพบว่ามีการใช้ฟีเจอร์พื้นฐานบางอย่างในโปรเจ็กต์ของคุณ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทํางานนี้ได้ที่เอกสารประกอบสําหรับกฎ require-baseline