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