Dipublikasikan: 12 Maret 2025, Terakhir diperbarui: 26 Maret 2025
ESLint telah lama menjadi linter pilihan untuk JavaScript, yang menawarkan berbagai setelan dan aturan yang membantu developer menerapkan gaya yang baik untuk JavaScript dalam project mereka. Baru-baru ini, ESLint meluncurkan dukungan untuk melakukan linting CSS dalam project, yang menawarkan aturan tambahan untuk memeriksa aspek stylesheet.
Sebagai bagian dari peluncuran dukungan CSS, ESLint kini menawarkan aturan require-baseline, yang memungkinkan Anda menentukan ambang batas Baseline mana yang ingin Anda gunakan saat melakukan linting CSS di proyek Anda. Dalam postingan singkat ini, Anda akan mempelajari cara menggunakan aturan ini untuk memastikan CSS Anda memenuhi nilai minimum yang Baru dan Tersedia Luas.
Cara menggunakan ESLint untuk menerapkan fitur CSS Dasar
Jika Anda pernah menggunakan ESLint sebelumnya, proses penambahan linting CSS ke project Anda akan cukup cepat. Untuk memulai, instal paket @eslint/css untuk project Anda:
npm install @eslint/css --save-dev
Setelah diinstal, Anda dapat menambahkan dukungan linting CSS ke project dengan mengimpor paket @eslint/css ke konfigurasi ESLint yang ada:
// 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"
}]
},
},
];
Meskipun linting untuk CSS berguna dengan sendirinya, nilai tambah yang ditawarkan ESLint dalam melakukannya adalah melalui aturan require-baseline linter. Dalam cuplikan kode sebelumnya, peringatan akan dihasilkan setiap kali fitur yang tidak tersedia secara Luas di Baseline ditemukan. Hal ini ditentukan melalui properti available aturan, yang juga menerima nilai "newly" untuk memastikan semua fitur CSS yang digunakan setidaknya tersedia di Baseline Baru.
Setelah konfigurasi Anda selesai diatur, Anda dapat menjalankan ESLint di direktori root proyek Anda seperti ini untuk memeriksa CSS proyek Anda:
npx eslint
Setelah selesai, ESLint akan memberikan peringatan tentang CSS project Anda, yang terlihat seperti berikut:
/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
Salah satu hasil yang bagus dari pengiriman fungsi ini oleh ESLint adalah Anda dapat menggunakannya dalam alur kerja alat apa pun yang menggunakan ESLint. Misalnya, jika Anda menggunakan webpack, Anda dapat membuatnya mengeluarkan output linter selama build project dengan menggunakan 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"]
})
]
};
Dengan penambahan fitur-fitur baru yang bermanfaat pada ESLint ini, Anda sekarang dapat memastikan bahwa proyek Anda menggunakan fitur Baseline CSS tanpa banyak usaha tambahan. Coba saja. Anda mungkin terkejut saat menemukan beberapa fitur Dasar yang digunakan dalam project Anda. Untuk mengetahui informasi selengkapnya tentang cara kerjanya, baca dokumentasi untuk aturan require-baseline.