次世代 Hugo

無駄を削ぎ、本質を研ぐ

Stylelint 檢查 SCSS 懶人包

Sam Xiao's Avatar 2025-08-19

Stylelint 可檢查 SCSS，除了安裝 Stylelint 外，還要安裝其他 Plugin 與修改設定檔，才能完成 檢查 BEM、查狀結構 與 樣式排序…等需求。

Version

Stylelint 16.23.1
Stylelint-config-standard 39.0.0
Stylelint-config-clean-order 7.0.0

Stylelint

$ npm install -D stylelint
$ npm install -D stylelint-scss 
$ npm install -D stylelint-config-standard-scss
$ npm install -D stylelint-config-clean-order
  • stylelint：檢查 SCSS
  • stylelint-config-standard-scss：Stylelint plugin：標準 SCSS 規則
  • stylelint-config-clean-order：Stylelint plugin：SCSS 樣式排序規則

.stylelintrc

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-clean-order"
  ],
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "selector-class-pattern": [
      "^[a-z]+(?:__[a-z0-9]+)?(?:--[a-z0-9]+)?$",
      {
        "resolveNestedSelectors": true,
        "message": "Expected class selector to follow BEM"
      }
    ],
    "max-nesting-depth": [
      1,
      {}
    ]
  }
}
  • extends： 沿用規則
    • stylelint-config-standard-scss：標準 SCSS 規則
    • stylelint-config-clean-order：樣式排序規則
  • rules：建立自訂規則
    • max-nesting-depth：巢狀最多只能一層
    • selector-class-pattern：BEM 命名規則

.stylelintignore

node_modules
public
static

設定 Stylelint 忽略的檔案類型與目錄：

  • node_modules：忽略 NPM 套件的目錄
  • public：忽略 Hugo 編譯後檔案的目錄
  • static：忽略 static 目錄下 CSS

VS Code

ext install stylelint.vscode-stylelint
  • 在 VS Code 內使用 Stylelint

settings.json

{
  // VS Code
  "css.validate": false,
  "scss.validate": false,

  // Stylelint
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "always"
  },
  "stylelint.validate": ["css", "scss"]
}
  • 由於 VSCode 與 Stylelint 都可處理 CSS 與 SCSS，因此必須先關閉 VSCode 的處理，再設定 Stylelint 處理 CSS 與 SCSS

Line 3

"css.validate": false,
"scss.validate": false,
  • 關閉 VS Code 對 CSS 與 SCSS 驗證

Line 7

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": "always"
},
  • 存檔執行 Stylelint 並修正錯誤

Line 10

"stylelint.validate": ["css", "scss"],
  • 設定 Stylelint 驗證 CSS 與 SCSS

WebStorm

lazy01

Settings -> Languages & Frameworks -> Style Sheets -> Stylelint

  • Enabled：啟用 Stylelint
  • Stylelint package：指定 node_modules 下的 stylelint
  • Configuration file：自動偵測 .stylelintrc
  • Run for files：**/*.{css,scss}
  • Run stylelint --fix on save：on

NPM Script

package.json

"scripts": {
  "stylelint": "npx stylelint '**/*.{css,scss}' --fix"
},
  • stylelint：一次檢查專案內所有 CSS 與 SCSS

Conclusion

  • VS Code 與 WebStorm 都可搭配 Stylelint 檢查 SCSS

# Sass # Stylelint