প্রকাশিত: মার্চ 12, 2025
ESLint দীর্ঘকাল ধরে জাভাস্ক্রিপ্টের জন্য পছন্দের লিন্টার, বিভিন্ন ধরনের সেটিংস এবং নিয়ম অফার করে যা ডেভেলপারদের তাদের প্রকল্পে জাভাস্ক্রিপ্টের জন্য ভাল শৈলী প্রয়োগ করতে সাহায্য করে। সম্প্রতি, ESLint প্রকল্পগুলিতে CSS লিন্ট করার জন্য সমর্থন পাঠিয়েছে , স্টাইলশীটের দিকগুলি পরীক্ষা করার জন্য অতিরিক্ত নিয়ম অফার করে।
CSS সমর্থন চালু করার অংশ হিসাবে, ESLint এখন require-baseline নিয়ম অফার করে, যা আপনাকে নির্দিষ্ট করতে দেয় যে আপনার প্রকল্পগুলিতে CSS লিন্ট করার সময় আপনি কোন বেসলাইন থ্রেশহোল্ড ব্যবহার করতে চান। এই দ্রুত পোস্টে, আপনি শিখবেন কীভাবে এই নিয়মটি ব্যবহার করবেন তা নিশ্চিত করতে আপনার CSS বেসলাইন নতুন এবং ব্যাপকভাবে উপলব্ধ থ্রেশহোল্ড পূরণ করছে।
বেসলাইন সিএসএস বৈশিষ্ট্যগুলি প্রয়োগ করতে কীভাবে ESLint ব্যবহার করবেন
আপনি যদি আগে ESLint ব্যবহার করে থাকেন, তাহলে আপনার প্রোজেক্টে CSS linting যোগ করার প্রক্রিয়াটি যুক্তিসঙ্গতভাবে দ্রুত হওয়া উচিত। শুরু করতে, আপনার প্রকল্পের জন্য @eslint/css প্যাকেজ ইনস্টল করুন:
npm install @eslint/css --save-dev
একবার ইনস্টল হয়ে গেলে, আপনি আপনার বিদ্যমান ESLint কনফিগারেশনে @eslint/css প্যাকেজ আমদানি করে আপনার প্রকল্পে CSS linting সমর্থন যোগ করতে সক্ষম হবেন:
// 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-এর জন্য linting নিজে থেকেই উপযোগী, ESLint এটি করার ক্ষেত্রে অতিরিক্ত মূল্য প্রদান করে লিন্টারের require-baseline নিয়মের মাধ্যমে। পূর্ববর্তী কোড স্নিপেটে, বেসলাইন ব্যাপকভাবে উপলব্ধ নয় এমন একটি বৈশিষ্ট্যের সম্মুখীন হলে সতর্কতা তৈরি করা হয়। এটি নিয়মের available সম্পত্তির মাধ্যমে নির্দিষ্ট করা হয়েছে, যা "newly" এর একটি মানও গ্রহণ করে যাতে ব্যবহৃত সমস্ত সিএসএস বৈশিষ্ট্যগুলি কমপক্ষে বেসলাইন নতুনভাবে উপলব্ধ রয়েছে তা নিশ্চিত করতে।
একবার আপনার কনফিগারেশন সেট আপ হয়ে গেলে, আপনি আপনার প্রোজেক্টের সিএসএস লিন্ট করতে আপনার প্রোজেক্টের রুটে 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 ব্যবহার করে এমন যেকোনো টুলিং ওয়ার্কফ্লোতে এটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি যদি ওয়েবপ্যাক ব্যবহার করেন, তাহলে আপনি 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 নিয়মের জন্য ডকুমেন্টেশন পড়ুন।