Ngày xuất bản: 12 tháng 3 năm 2025
ESLint từ lâu đã là trình tìm lỗi mã nguồn được ư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 thực thi phong cách tốt cho JavaScript trong dự án của họ. Gần đây, ESLint đã hỗ trợ tìm lỗi mã nguồn 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 các tệp đị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. Quy tắc này cho phép bạn chỉ định ngưỡng Cơ sở mà bạn muốn sử dụng khi tìm lỗi mã nguồn CSS trong dự án. Trong bài đăng nhanh 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 mình đáp ứng các ngưỡng Mới và Phổ biến trong cơ sở.
Cách sử dụng ESLint để thực thi các tính năng CSS cơ sở
Nếu bạn đã từng sử dụng ESLint, thì quy trình thêm tính năng tìm lỗi mã nguồn CSS vào dự án sẽ diễn ra nhanh chóng. Để 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ợ tìm lỗi mã nguồn CSS vào dự án 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 tìm lỗi mã nguồn cho CSS tự nó đã hữu ích, nhưng giá trị gia tăng mà ESLint cung cấp khi thực hiện việc này là thông qua quy tắc require-baseline của trình tìm lỗi mã nguồn. Trong đoạn mã trước, cảnh báo sẽ được tạo bất cứ khi nào gặp một tính năng không có sẵn trên nhiều thiết bị. Điều này được 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 sử dụng đều có ít nhất là Đường cơ sở mới.
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 để tìm lỗi mã nguồn 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 phân phối chức năng này là bạn có thể sử dụng chức năng này trong bất kỳ quy trình công cụ nào sử dụng ESLint. Ví dụ: nếu sử dụng webpack, bạn có thể yêu cầu công cụ này trả về kết quả của trình tìm lỗi mã nguồn trong quá trình tạo bản dựng 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 tính năng mới hữu ích này trong 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ơ sở mà không cần tốn nhiều công sức. Hãy thử xem sao! Bạn có thể sẽ ngạc nhiên khi khám phá một số tính năng của Baseline được sử dụng trong dự án của mình. Để biết thêm thông tin về cách hoạt động của quy tắc này, hãy đọc tài liệu về quy tắc require-baseline.