Dipublikasikan: 12 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 mengirimkan dukungan untuk 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 nilai minimum Dasar Pengukuran yang ingin digunakan saat melakukan linting CSS dalam project Anda. Dalam postingan singkat ini, Anda akan mempelajari cara menggunakan aturan ini untuk memastikan CSS Anda memenuhi nilai minimum Dasar Pengukuran yang Baru dan Tersedia secara Luas.
Cara menggunakan ESLint untuk menerapkan fitur CSS Dasar Pengukuran
Jika Anda telah menggunakan ESLint sebelumnya, proses untuk menambahkan lint 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 bermanfaat 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 Dasar Pengukuran ditemukan. Hal ini ditentukan melalui properti available aturan, yang juga menerima nilai "newly" untuk memastikan semua fitur CSS yang digunakan setidaknya adalah Dasar Pengukuran yang Baru tersedia.
Setelah menyiapkan konfigurasi, Anda dapat menjalankan ESLint di root project seperti ini untuk melakukan lint pada CSS project:
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 ESLint yang mengirimkan fungsi ini adalah Anda dapat menggunakannya dalam alur kerja alat apa pun yang menggunakan ESLint. Misalnya, jika menggunakan webpack, Anda dapat membuatnya menampilkan output linter selama build project 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 baru yang berguna ini ke ESLint, Anda kini dapat memastikan bahwa project Anda menggunakan fitur CSS Dasar Pengukuran tanpa banyak upaya tambahan. Coba saja. Anda mungkin terkejut saat menemukan beberapa fitur Dasar Pengukuran yang digunakan dalam project Anda. Untuk informasi selengkapnya tentang cara kerjanya, baca dokumentasi untuk aturan require-baseline.