ESLint 現已正式支援 CSS 語法檢查

早在 2024 年 7 月，我們 宣布了 我們的計畫，讓 ESLint 成為更通用的語法檢查工具，能夠檢查任何語言。在 2024 年 10 月，我們 宣布了 對 JSON 和 Markdown 的語法檢查支援，實現了該願景。今天，我們很高興透過引入 CSS 支援來擴展支援語言列表。

使用 @eslint/css 進行 CSS 語法檢查

CSS 語法檢查是使用 @eslint/css 外掛程式完成的，這是一個官方支援的語言外掛程式。該外掛程式透過優秀的 CSSTree 專案提供解析，以及 CSS 的規則。要使用此外掛程式，請從 npm 安裝它

npm install @eslint/css -D

然後更新您的設定檔

import css from "@eslint/css";

export default [
    // lint css files
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        rules: {
            "css/no-duplicate-imports": "error",
        },
    },
];

此外掛程式內建了幾個規則

• no-duplicate-imports - 不允許重複的 @import 規則
• no-empty-blocks - 不允許空區塊
• no-invalid-at-rules - 不允許無效的 at-rules（驗證 at-rules）
• no-invalid-properties - 不允許無效的屬性（驗證規則）
• require-baseline - 強制使用 baseline 功能
• use-layers - 強制使用 @layer

我們認為驗證和強制執行 baseline 功能是 2025 年語法檢查器需要支援的最低限度，因此我們花費大量時間使 no-invalid-at-rules、no-invalid-properties 和 require-baseline 規則盡可能全面。

有規則的想法嗎？開啟 issue。

有關設定 CSS 語法檢查的更多資訊，請查看 README。

容錯解析支援

預設情況下，CSS 語法檢查會盡可能嚴格地解析程式碼，突出顯示沿途找到的所有錯誤。但是，瀏覽器中的 CSS 解析具有內建的錯誤恢復功能，可以理解帶有一些語法錯誤的 CSS。如果您想使用與瀏覽器相同的錯誤恢復演算法來檢查 CSS，您可以透過啟用容錯解析來做到這一點

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            tolerant: true,
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

在執行容錯模式時，CSS 解析器僅報告無法恢復的語法錯誤。

自訂語法支援

customSyntax 選項是一個物件，它使用 CSSTree 格式 來定義自訂語法，這允許您指定 at-rules、屬性和某些類型。例如，假設您想定義一個如下所示的自訂 at-rule

@my-at-rule "hello world!";

您可以如下設定該語法

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            customSyntax: {
                atrules: {
                    "my-at-rule": {
                        prelude: "<string>",
                    },
                },
            },
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

如果您使用 Tailwind，您可以使用內建的 tailwindSyntax 物件來設定大多數自訂語法，如下所示

import css from "@eslint/css";
import { tailwindSyntax } from "@eslint/css/syntax";

export default [
    {
        files: ["**/*.css"],
        plugins: {
            css,
        },
        language: "css/css",
        languageOptions: {
            customSyntax: tailwindSyntax,
        },
        rules: {
            "css/no-empty-blocks": "error",
        },
    },
];

注意： Tailwind 語法目前不支援 theme() 函式。這是 CSSTree 的一個限制，我們希望很快能解決。

建立自訂規則並使用程式碼瀏覽器

與 @eslint/json 和 @eslint/markdown 一樣，@eslint/css 允許建立自訂規則。使用 CSSTree AST 格式，您可以像為 JavaScript 建立規則一樣建立自己的規則。程式碼瀏覽器 現在支援 CSS 解析，是開始建立您自己的規則的絕佳資源。

結論

隨著 CSS 支援的加入，ESLint 繼續發展成為一個多功能工具，能夠檢查各種語言。這種新功能讓開發人員能夠在整個程式碼庫（包括樣式表）中保持一致的程式碼品質。@eslint/css 外掛程式利用強大的 CSSTree 專案，為 CSS 提供準確而全面的語法檢查規則。透過強制執行最佳實務並捕獲常見錯誤，它可以幫助開發人員編寫更乾淨、更易於維護的 CSS 程式碼。

容錯解析和自訂語法支援的引入進一步增強了 ESLint 的靈活性，使其能夠適應各種編碼風格和專案需求。無論您是使用標準 CSS 還是使用像 Tailwind 這樣的框架，ESLint 都可以設定為滿足您的需求。建立自訂規則的能力也使開發人員能夠強制執行自己的編碼標準和實務。

我們希望您發現新的 CSS 語法檢查功能很有用，並期待看到您如何將它們整合到您的專案中。感謝您對 ESLint 社群的持續支援和貢獻。共同努力，我們可以為世界各地的開發人員建立一個更好、更可靠的工具。

提醒您，ESLint 是一個獨立的開源專案，由一群志工在閒暇時間維護。如果您喜歡使用 ESLint，請與您的公司談談 贊助該專案。