Yayınlanma tarihi: 12 Mart 2025
ESLint, uzun süredir JavaScript için tercih edilen bir linter'dir. Geliştiricilerin projelerinde JavaScript için iyi bir stil uygulamasını sağlayan çeşitli ayarlar ve kurallar sunar. Kısa süre önce ESLint, projelerde CSS linting desteğini kullanıma sundu. Bu sayede, stil sayfalarının özelliklerini kontrol etmek için ek kurallar sunuldu.
CSS desteğinin kullanıma sunulması kapsamında ESLint artık require-baseline kuralını sunuyor. Bu kural, projelerinizde CSS'yi kontrol ederken kullanmak istediğiniz temel eşiği belirtmenize olanak tanır. Bu kısa gönderide, CSS'nizin Yeni ve Yaygın olarak kullanılabilir referans eşiklerini karşıladığından emin olmak için bu kuralı nasıl kullanacağınızı öğreneceksiniz.
Temel CSS özelliklerini zorunlu kılmak için ESLint'i kullanma
Daha önce ESLint kullandıysanız projenize CSS linting ekleme işlemi oldukça hızlı olacaktır. Başlamak için projenize @eslint/css paketini yükleyin:
npm install @eslint/css --save-dev
Yüklendikten sonra, @eslint/css paketini mevcut ESLint yapılandırmanıza içe aktararak projenize CSS linting desteği ekleyebilirsiniz:
// 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 için linting işleminin kendi başına faydalı olduğu halde ESLint'in bu işlemde sunduğu katma değer, linterin require-baseline kuralı sayesinde sağlanır. Önceki kod snippet'inde, Temel Geniş Olarak Kullanılabilir olmayan bir özellikle karşılaşıldığında uyarılar oluşturulur. Bu, kuralın available mülkü aracılığıyla belirtilir. Bu mülk, kullanılan tüm CSS özelliklerinin en azından Temel Yeni kullanılabilir düzeyinde olmasını sağlamak için "newly" değerini de kabul eder.
Yapılandırmanızı ayarladıktan sonra, projenizin CSS'sini kontrol etmek için projenizin kökünde ESLint'i aşağıdaki gibi çalıştırabilirsiniz:
npx eslint
İşlem tamamlandığında ESLint, projenizin CSS'siyle ilgili uyarılar sağlar. Bu uyarılar aşağıdaki gibi görünür:
/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'in bu işlevi kullanıma sunmasının en önemli sonuçlarından biri, ESLint kullanan tüm araç iş akışında bu işlevi kullanabilmenizdir. Örneğin, webpack kullanıyorsanız eslint-webpack-plugin kullanarak proje derlemeleri sırasında linter çıkışını yazdırmasını sağlayabilirsiniz:
// 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'e eklenen bu yeni ve kullanışlı özellikler sayesinde artık projelerinizin Baseline CSS özelliklerini fazla çaba harcamadan kullanmasını sağlayabilirsiniz. Denemeye ne dersiniz? Projenizde kullanılan bazı temel özelliklerin sizi şaşırtabileceğini unutmayın. Bunun nasıl çalıştığı hakkında daha fazla bilgi için require-baseline kuralı dokümanlarını okuyun.