node version: 18+
stylelint: 15+

Get Started

首先要先安裝 stylelint for styled-components 及 recess order plugin

npm install --save-dev \
  stylelint \
  stylelint-config-recommended \
  stylelint-config-styled-components \
  stylelint-config-recess-order \
  stylelint-processor-styled-components \
  postcss-styled-syntax

在專案的根目錄 /src 中新增一個 .stylelintrc 檔案並加入以下設定

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components",
    "stylelint-config-recess-order"
  ],
  "customSyntax": "postcss-styled-syntax"
}

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    
    //加入這行指令設定
    "lint:css": "stylelint './src/**/*.tsx' --fix"
  },

搜尋 webstorm 的 stylelint 設定（雙擊 shift)

打開後加入以下設定

就可以看到噴錯的樣式了

在終端機輸入設定好的指令

npm run lint:css 

便可以自動透過 stylelint-config-recess-order 排序CSS

而這個套件參考的順序在這裡