次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 Stylelint 檢查 SCSS

Sam Xiao's Avatar 2025-08-19

Stylelint 可檢查 SCSS，除了安裝 Stylelint 外，還要安裝 Stylelint-scss 與 Stylelint-config-standard-scss。

Version

Stylelint 16.23.1
Sstylelint-scss 6.12.1
Stylelint-config-standard-scss 15.0.1

Stylelint

$ npm install -D stylelint
$ npm install -D stylelint-scss 
$ npm install -D stylelint-config-standard-scss
  • stylelint：檢查 CSS
  • stylelint-scss：檢查 SCSS
  • stylelint-config-standard-scss：標準 SCSS 規則

.stylelintrc

{
  "extends": "stylelint-config-standard-scss",
  "plugins": ["stylelint-scss"]
}
  • extends： 沿用標準 SCSS 規則
  • plugins：設定所 Stylelint 所啟用的 plugin

.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，因此必須先關閉 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

overview01

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