跳至主要內容

入門

您可以透過延伸共用設定快速入門。

檢查 CSS​

您可以延伸我們的 標準設定 來檢查 CSS。

1. 使用 npm 和 我們的 init 工具 來安裝 Stylelint 和設定

npm init stylelint

2. 對專案中的所有 CSS 檔案執行 Stylelint

npx stylelint "**/*.css"

一旦您開始執行，您可以 自訂 Stylelint。

在容器中對類 CSS 語言和 CSS 進行 linting​

您可以延伸社群設定檔來對下列進行 linting

  • 類 CSS 語言，例如 SCSS、Sass 和 Less
  • 容器中的 CSS，例如在 HTML、CSS-in-JS 和 Vue SFC 中

例如，若要對 SCSS 進行 linting，您可以延伸 SCSS 社群設定檔。它包含

1. 使用 npm 安裝 Stylelint 和設定檔

npm install --save-dev stylelint stylelint-config-standard-scss

2. 在專案根目錄中建立一個 .stylelintrc.json 設定檔，其內容如下

{
  "extends": "stylelint-config-standard-scss"
}

3. 對專案中的所有 SCSS 檔案執行 Stylelint

npx stylelint "**/*.scss"

您可以在 Awesome Stylelint 中找到更多社群設定檔。

直接使用自訂語法​

如果沒有針對您偏好的語言或容器提供共用設定檔，您可以安裝適當的自訂語法，然後自行使用 customSyntax 選項。

例如，要在 Lit 元素 內對 CSS 進行 linting。

1. 使用 npm 安裝 Stylelint、我們的 標準設定檔 和 Lit 自訂語法

npm install --save-dev stylelint stylelint-config-standard postcss-lit

2. 在專案根目錄中建立一個 .stylelintrc.json 設定檔，其內容如下

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-lit"
}

3. 對專案中的所有 JavaScript 檔案執行 Stylelint

npx stylelint "**/*.js"

您可以在 Awesome Stylelint 中找到更多自訂語法。

使用多個自訂語法​

如果您想要對多個語言或容器進行 linting，您可以使用 overrides 屬性。

例如，若要檢查 CSS 檔案和 Lit Elements 中的 CSS，您可以將設定更新為

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["*.js"],
      "customSyntax": "postcss-lit"
    }
  ]
}

然後對 CSS 和 JavaScript 檔案執行 Stylelint

npx stylelint "**/*.{css,js}"