[VsCode] 확장 프로그램 PostCssSorting로 Css 정렬하기

VS Code를 다룰 때 유용하게 쓸만 한 확장 프로그램을 하나 더 추천 받았다. 

그 이름하야 'Post Css Sorting'. 사진 참조.

 

말그대로, CSS 태그들 설정을 보기 좋게 후처리로 정렬해주는 확장 프로그램인 듯하다.

 

1. 일단 위 확장 프로그램을 검색해서 내려받는다!

2. 설정 -> 확장-> 위 프로그램에 들어가 postcss-sorting documentation 에서 아래 부분을 긁어온다. 

order: [
				'custom-properties',
				'dollar-variables',
				'declarations',
				'at-rules',
				'rules',
			],

			'properties-order': 'alphabetical',

 

3. 설정창에서 해당 프로그램을 검색, settings.json에서 편집을 클릭한 뒤

"postcssSorting.config": {

의 뒤에 붙여넣는다. 이후 원하는대로 태그 수정을 해주는데 나는 선생님이 쓰시는 설정을 받아서 아래와 같이 수정해두었다. 기본 설정된 alphabetical은 알파벳 순서로 정렬해주는 것이고, 아래처럼 설정하면 보고 싶은 중요한 태그가 먼저 오도록 순서를 바꿀 수 있다. 이렇게 하면 display가 가장 먼저 나오게 될 것이다.

"order": ["custom-properties", "dollar-variables", "declarations", "at-rules", "rules"],
    "properties-order": [
      "display",
      "justify-content",
      "align-items",
      "flex-direction",
      "flex-wrap",
      "flex-basis",
      "flex-grow",
      "flex-shrink",
      "width",
      "height",
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "overflow",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "font",
      "font-family",
      "font-size",
      "font-weight",
      "text-align",
      "color",
      "letter-spacing",
      "line-height",
      "text-transform",
      "border",
      "border-top",
      "border-right",
      "border-bottom",
      "border-left",
      "border-width",
      "border-color",
      "border-style",
      "transform",
      "background",
      "background-image",
      "background-position",
      "background-repeat",
      "background-size",
      "background-attachment",
      "box-shadow",
      "text-shadow",
      "opacity",
      "transition"
    ]

설정을 마친 json을 저장한 뒤, 작업하고 있던 css파일로 돌아간다. 

 

4. 이제 보기 -> 명령 팔레트 -> PostCss Sorting Run을 클릭하면, 프로그램이 실행되면서 위 순서대로 깔끔히 정렬되는 것을 확인할 수 있다. 매번 명령 팔레트를 가기 귀찮을 테니 설정에서 '바로 가기 키' 를 따로 주어 단축키를 통해 정렬하길 추천한다.