প্রকাশিত: ১২ মার্চ, ২০২৫, সর্বশেষ হালনাগাদ: ২৬ মার্চ, ২০২৫
ESLint দীর্ঘদিন ধরে জাভাস্ক্রিপ্টের জন্য পছন্দের লিন্টার হিসেবে ব্যবহৃত হয়ে আসছে। এটি বিভিন্ন ধরনের সেটিংস ও নিয়ম প্রদান করে যা ডেভেলপারদের তাদের প্রোজেক্টে জাভাস্ক্রিপ্টের জন্য সঠিক স্টাইল প্রয়োগ করতে সাহায্য করে। সম্প্রতি, ESLint প্রোজেক্টে CSS লিন্টিংয়ের জন্য সাপোর্ট যুক্ত করেছে এবং স্টাইলশীটের বিভিন্ন দিক পরীক্ষা করার জন্য অতিরিক্ত নিয়ম প্রদান করছে।
CSS সাপোর্ট চালু করার অংশ হিসেবে, ESLint এখন require-baseline রুলটি অফার করছে, যা আপনাকে আপনার প্রোজেক্টে CSS লিন্ট করার সময় কোন বেসলাইন থ্রেশহোল্ড ব্যবহার করতে চান তা নির্দিষ্ট করার সুযোগ দেয়। এই সংক্ষিপ্ত পোস্টে, আপনি শিখবেন কীভাবে এই রুলটি ব্যবহার করে আপনার CSS-কে বেসলাইন নিউলি এবং ওয়াইডলি অ্যাভেইলেবল থ্রেশহোল্ডের আওতায় আনা যায়।
বেসলাইন CSS বৈশিষ্ট্যগুলি প্রয়োগ করতে ESLint কীভাবে ব্যবহার করবেন
আপনি যদি আগে ESLint ব্যবহার করে থাকেন, তাহলে আপনার প্রজেক্টে CSS লিন্টিং যোগ করার প্রক্রিয়াটি বেশ দ্রুত হবে। শুরু করার জন্য, আপনার প্রজেক্টে @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"
}]
},
},
];
যদিও CSS-এর জন্য লিন্টিং নিজে থেকেই বেশ দরকারি, তবে ESLint এই কাজে যে বাড়তি সুবিধাটি দেয়, তা হলো এর ' require-baseline রুলটি। পূর্ববর্তী কোড স্নিপেটটিতে, যখনই এমন কোনো ফিচার পাওয়া যায় যা 'Baseline Widely available' নয়, তখনই ওয়ার্নিং তৈরি হয়। এটি রুলটির ' available ' প্রপার্টির মাধ্যমে নির্দিষ্ট করা হয়, যা "newly" ভ্যালুটিও গ্রহণ করে, যাতে ব্যবহৃত সমস্ত CSS ফিচার অন্তত 'Baseline Newly available' হয়।
একবার আপনার কনফিগারেশন সেট আপ হয়ে গেলে, আপনার প্রোজেক্টের CSS লিন্ট করার জন্য আপনি প্রোজেক্টের রুটে এইভাবে ESLint চালাতে পারেন:
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 ব্যবহার করেন, তাহলে 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-এর এই দরকারি নতুন সংযোজনগুলোর সাহায্যে, আপনি এখন খুব বেশি বাড়তি পরিশ্রম ছাড়াই নিশ্চিত করতে পারবেন যে আপনার প্রজেক্টগুলোতে বেসলাইন CSS ফিচারগুলো ব্যবহৃত হচ্ছে। একবার চেষ্টা করে দেখুন! আপনার প্রজেক্টে ব্যবহৃত কিছু বেসলাইন ফিচার দেখে আপনি হয়তো অবাক হয়ে যাবেন। এটি কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য, require-baseline রুলটির ডকুমেন্টেশন পড়ুন।