Xuất bản: Ngày 12 tháng 3 năm 2025, Cập nhật lần gần đây nhất: Ngày 26 tháng 3 năm 2025
ESLint từ lâu đã là trình kiểm tra cú pháp ưu tiên cho JavaScript, cung cấp nhiều chế độ cài đặt và quy tắc giúp nhà phát triển áp dụng phong cách phù hợp cho JavaScript trong các dự án của họ. Gần đây, ESLint đã hỗ trợ tính năng kiểm tra CSS trong các dự án, cung cấp thêm các quy tắc để kiểm tra các khía cạnh của biểu định kiểu.
Trong quá trình ra mắt tính năng hỗ trợ CSS, ESLint hiện cung cấp quy tắc require-baseline, cho phép bạn chỉ định ngưỡng Cơ sở mà bạn muốn sử dụng khi tìm lỗi CSS trong các dự án của mình. Trong bài đăng ngắn này, bạn sẽ tìm hiểu cách sử dụng quy tắc này để đảm bảo CSS của bạn đáp ứng các ngưỡng Mới và Phổ biến của Đường cơ sở.
Cách sử dụng ESLint để thực thi các tính năng CSS cơ bản
Nếu bạn đã từng sử dụng ESLint, thì quy trình thêm tính năng kiểm tra CSS vào dự án của bạn sẽ diễn ra khá nhanh. Để bắt đầu, hãy cài đặt gói @eslint/css cho dự án của bạn:
npm install @eslint/css --save-dev
Sau khi cài đặt, bạn có thể thêm tính năng hỗ trợ linting CSS vào dự án của mình bằng cách nhập gói @eslint/css vào cấu hình ESLint hiện có:
// 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"
}]
},
},
];
Mặc dù việc linting cho CSS tự nó đã hữu ích, nhưng giá trị gia tăng mà ESLint mang lại khi thực hiện việc này là thông qua quy tắc require-baseline của linter. Trong đoạn mã trước đó, cảnh báo sẽ được tạo bất cứ khi nào gặp phải một tính năng không có sẵn trong Baseline Widely. Bạn có thể chỉ định thông qua thuộc tính available của quy tắc. Thuộc tính này cũng chấp nhận giá trị "newly" để đảm bảo tất cả các tính năng CSS được dùng đều ở mức tối thiểu là Mới ra mắt cơ bản.
Sau khi thiết lập cấu hình, bạn có thể chạy ESLint ở thư mục gốc của dự án như sau để kiểm tra CSS của dự án:
npx eslint
Sau khi hoàn tất, ESLint sẽ đưa ra mọi cảnh báo về CSS của dự án, có dạng như sau:
/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
Một kết quả tuyệt vời của việc ESLint cung cấp chức năng này là bạn có thể sử dụng chức năng này trong mọi quy trình làm việc bằng công cụ sử dụng ESLint. Ví dụ: nếu sử dụng webpack, bạn có thể yêu cầu webpack xuất kết quả của trình kiểm tra trong quá trình tạo dự án bằng cách sử dụng 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"]
})
]
};
Với những bổ sung hữu ích này cho ESLint, giờ đây, bạn có thể đảm bảo rằng các dự án của mình đang sử dụng các tính năng CSS cơ bản mà không cần tốn nhiều công sức. Hãy thử xem sao! Bạn có thể ngạc nhiên khi phát hiện ra một số tính năng của Baseline được dùng trong dự án của mình. Để biết thêm thông tin về cách thức hoạt động này, hãy đọc tài liệu hướng dẫn cho quy tắc require-baseline.