ESLint'te CSS ve Baseline desteği kullanıma sunuldu

Jeremy Wagner

Yayınlanma tarihi: 12 Mart 2025, Son güncelleme tarihi: 26 Mart 2025

ESLint, uzun süredir JavaScript için tercih edilen linter olmuştur. Geliştiricilerin projelerinde JavaScript için iyi bir stil uygulamasına yardımcı olan çeşitli ayarlar ve kurallar sunar. ESLint kısa süre önce projelerde CSS linting desteği sunmaya başladı ve stil sayfalarının çeşitli yönlerini kontrol etmek için ek kurallar ekledi.

CSS desteğinin kullanıma sunulması kapsamında ESLint artık require-baseline kuralını sunuyor. Bu kural, projelerinizde CSS'yi lint ederken hangi temel eşiği kullanmak istediğinizi belirtmenize olanak tanır. Bu kısa gönderide, CSS'nizin Yeni ve Geniş Çapta Kullanıma Sunulan Temel Eşikler'i 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ı olmalıdı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 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 tek başına faydalı olsa da ESLint'in bu konuda sunduğu ek değer, linter'ın require-baseline kuralı aracılığıyla sağlanır. Yukarıdaki kod snippet'inde, Baseline Widely Available olmayan bir özellik karşılaşıldığında uyarılar oluşturulur. Bu, kuralın available özelliği aracılığıyla belirtilir. Bu özellik, kullanılan tüm CSS özelliklerinin en az Baseline Newly available olmasını sağlamak için "newly" değerini de kabul eder.

Yapılandırmanızı ayarladıktan sonra projenizin CSS'sini lintlemek için ESLint'i projenizin kök dizininde aşağıdaki gibi çalıştırabilirsiniz:

npx eslint

İşlem tamamlandığında ESLint, projenizin CSS'siyle ilgili uyarıları aşağıdaki gibi gösterir:

/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 iyi sonuçlarından biri, ESLint'in kullanıldığı tüm araç iş akışlarında bu işlevden yararlanabilmenizdir. Örneğin, webpack kullanıyorsanız eslint-webpack-plugin kullanarak proje derlemeleri sırasında linter çıkışını alabilirsiniz:

// 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 özellikler sayesinde, projelerinizde Baseline CSS özelliklerinin kullanılmasını artık çok fazla çaba harcamadan sağlayabilirsiniz. Denemeye ne dersiniz? Projenizde kullanılan bazı Baseline özelliklerini keşfettiğinizde şaşırabilirsiniz. Bu özelliğin nasıl çalıştığı hakkında daha fazla bilgi için require-baseline kuralıyla ilgili dokümanları inceleyin.