पब्लिश करने की तारीख: 12 मार्च, 2025
ESLint, JavaScript के लिए लंबे समय से पसंदीदा लिंटर है. इसमें कई तरह की सेटिंग और नियम होते हैं. इनसे डेवलपर को अपने प्रोजेक्ट में JavaScript के लिए अच्छी स्टाइल लागू करने में मदद मिलती है. हाल ही में, ESLint ने प्रोजेक्ट में सीएसएस को लिंट करने की सुविधा उपलब्ध कराई है. इसमें स्टाइलशीट के अलग-अलग पहलुओं की जांच करने के लिए, अतिरिक्त नियम दिए गए हैं.
सीएसएस के साथ काम करने की सुविधा लॉन्च करने के तहत, ESLint अब require-baseline नियम ऑफ़र करता है. इस नियम की मदद से, यह तय किया जा सकता है कि आपको अपने प्रोजेक्ट में सीएसएस को लिंट करते समय, बेसलाइन थ्रेशोल्ड का इस्तेमाल करना है या नहीं. इस पोस्ट में, आपको इस नियम का इस्तेमाल करने का तरीका बताया गया है. इससे यह पक्का किया जा सकेगा कि आपकी सीएसएस, नए और बड़े पैमाने पर उपलब्ध थ्रेशोल्ड के आधारभूत मानदंडों को पूरा कर रही है या नहीं.
बेसलाइन सीएसएस सुविधाओं को लागू करने के लिए, ESLint का इस्तेमाल करने का तरीका
अगर आपने पहले कभी ESLint का इस्तेमाल किया है, तो अपने प्रोजेक्ट में सीएसएस लिंटिंग जोड़ने की प्रोसेस तुरंत पूरी हो जाएगी. शुरू करने के लिए, अपने प्रोजेक्ट के लिए @eslint/css पैकेज इंस्टॉल करें:
npm install @eslint/css --save-dev
इंस्टॉल होने के बाद, अपने मौजूदा ESLint कॉन्फ़िगरेशन में @eslint/css पैकेज इंपोर्ट करके, अपने प्रोजेक्ट में CSS लिंटिंग की सुविधा जोड़ी जा सकती है:
// 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"
}]
},
},
];
सीएसएस के लिए लिंटिंग करना अपने-आप में फ़ायदेमंद है. हालांकि, ESLint में लिंटर के require-baseline नियम की मदद से, लिंटिंग करने में ज़्यादा फ़ायदा मिलता है. ऊपर दिए गए कोड स्निपेट में, जब भी कोई ऐसी सुविधा मिलती है जो बेसलाइन के तौर पर सभी के लिए उपलब्ध नहीं है, तब चेतावनियां जनरेट होती हैं. इसकी जानकारी, नियम की available प्रॉपर्टी से मिलती है. यह प्रॉपर्टी "newly" की वैल्यू भी स्वीकार करती है. इससे यह पक्का किया जा सकता है कि इस्तेमाल की गई सभी सीएसएस सुविधाएं, कम से कम बेसलाइन के तौर पर उपलब्ध हों.
कॉन्फ़िगरेशन सेट अप करने के बाद, अपने प्रोजेक्ट की CSS को लिंट करने के लिए, प्रोजेक्ट के रूट में ESLint को इस तरह चलाया जा सकता है:
npx eslint
प्रोसेस पूरी होने के बाद, ESLint आपके प्रोजेक्ट की सीएसएस के बारे में चेतावनियां देगा. ये चेतावनियां कुछ इस तरह दिखती हैं:
/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 का इस्तेमाल किया जाता है, तो 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 नियम का दस्तावेज़ पढ़ें.