node version: 18+
stylelint: 15+
## Get Started

首先要先安裝 [stylelint for styled-components 及 recess order plugin]([https:/](https://styled-components.com/docs/tooling#stylelint)/)

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

而這個套件參考的順序在[這裡](https://github.com/twitter-archive/recess/blob/29bccc870b7b4ccaa0a138e504caf608a6606b59/lib/lint/strict-property-order.js)