發布日期：2025 年 3 月 12 日，上次更新時間：2025 年 3 月 26 日
ESLint 一直是 JavaScript 的首選 Linter，提供各種設定和規則，協助開發人員在專案中強制執行良好的 JavaScript 樣式。最近，ESLint 支援在專案中檢查 CSS，並提供額外規則來檢查樣式表。
為推出 CSS 支援功能，ESLint 現在提供 require-baseline 規則，可讓您在專案中 Lint CSS 時，指定要使用的基準門檻。在這篇短文中，您將瞭解如何使用這項規則，確保 CSS 符合 Baseline 新推出及廣泛支援的門檻。
如何使用 ESLint 強制執行 Baseline CSS 功能
如果您曾使用 ESLint，應該很快就能在專案中加入 CSS 檢查。如要開始使用，請為專案安裝 @eslint/css 套件：
npm install @eslint/css --save-dev
安裝完成後，您只要將 @eslint/css 套件匯入現有的 ESLint 設定，即可為專案新增 CSS 檢查支援：
// 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 的 Linting 本身就很有用，但 ESLint 透過 Linter 的 require-baseline 規則，提供附加價值。在上述程式碼片段中，每當遇到不屬於 Baseline Widely available 的功能時，系統就會產生警告。這是透過規則的 available 屬性指定，該屬性也會接受 "newly" 值，確保使用的所有 CSS 功能至少為「基準新推出」狀態。
設定完成後，您可以在專案根目錄執行 ESLint，如下所示，即可檢查專案的 CSS：
npx eslint
完成後，ESLint 會提供專案 CSS 的任何警告，如下所示：
/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 推出這項功能後，您就能在任何使用 ESLint 的工具工作流程中使用這項功能。舉例來說，如果您使用 webpack，可以透過 eslint-webpack-plugin，在專案建構期間輸出 Linter 結果：
// 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 新增這些實用功能後，您現在就能確保專案使用 Baseline CSS 功能，不必再費心。快來試試看！您可能會驚訝地發現，專案中使用了某些 Baseline 功能。如要進一步瞭解運作方式，請參閱 require-baseline 規則的說明文件。