Tool/VSCode&Cursor
VSCode/PostCss Sorting - css auto format
건담아빠
2022. 10. 19. 10:35
Extensions 열기
PostCSS Sorting Install
단축키 설정
위와 같이 단축키 지정을 통해서 사용 가능하지만 필자는 아래 포스팅과 같이 저장시에 포멧팅이 되도록 진행하였다.
VSCode/FormatOnSave 설정
VSCode/FormatOnSave 설정
저장과 동시에 css 및 js 등의 포멧을 잡기위해 설정 Format On Save 설정 Format On Save 체크 config 확인 프로젝트에 종속되도록 workspace settings.json 추가되어 있다. settings.json { ... "editor.formatOnSave": true, ...
dchkang83.tistory.com
config 설정
프로젝트에 종속되도록 workspace settings.json에 추가
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"
]
}
...
}