VSCode/PostCss Sorting - css auto format

 

Extensions 열기

Code -> Preferences > Extensions

 

PostCSS Sorting Install

PostCSS Sorting

 

단축키 설정

⌘ + Shift + P

위와 같이 단축키 지정을 통해서 사용 가능하지만 필자는 아래 포스팅과 같이 저장시에 포멧팅이 되도록 진행하였다.

VSCode/FormatOnSave 설정

VSCode/FormatOnSave 설정

 

config 설정

프로젝트에 종속되도록 workspace settings.json에 추가

⌘ + Shift + P

 

settings.json

{
  ...
  "postcssSorting.config": {
    "order": [
      "custom-properties"
      // "dollar-variables",
      // "declarations",
      // "at-rules",
      // "rules"
    ],
    "properties-order": [
      "display",
      "list-style",
      "flex-direction",
      "justify-content",
      "align-items",
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "float",
      "clear",
      "width",
      "max-width",
      "min-width",
      "height",
      "max-height",
      "min-height",
      "z-index",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-radius",
      "background",
      "background-color",
      "background-size",
      "color",
      "font",
      "font-weight",
      "font-size",
      "line-height",
      "font-family",
      "letter-spacing",
      "text-decoration",
      "text-align",
      "verticla-align",
      "white-space",
      "content",
      "animation",
      "cursor"
    ]
  }
  ...
}