CSS 코딩 컨벤션(스타일 가이드)이 없는 회사에선 CSS를 작성할 때 스타일 순서 지정 없이 한 줄 코딩이나 여러 줄 코딩(모든 속성 줄 바꿈)으로 규칙을 정해놓고 해당 규칙을 따르는 방법으로 작업을 진행합니다(그림1 참고).
이런 프로젝트는 작업 인원 변동과 실시간 수정 사항 반영이 있을 때 minor 한 수정을 위해서 모든 스타일을 읽어야 하는 문제에 직면하게 됩니다.
코딩 컨벤션의 필요성을 느낀 회사는 급하게 코딩 컨벤션 작업을 하지만, 작업자와 협의 및 설득, 그리고 새로운 작업환경에 적응할 시간이 필요합니다.
하지만 작업자는 짧은 시간 내 신규 프로젝트와 추가 수정 사항을 대응하느라 시간이 없습니다😢
이럴 때 커스텀 CSS 자동 정렬 도구를 사용하면 개발 효율성을 높일 수 있습니다🎉
settings.jsonc
내 원하는cssPrettierType
과cssPrettierFormat
을 설정 후 CSS 파일 저장 시 ❗️폴더 내 모든 CSS 파일이 아닌❗️ 해당 파일만 적용 됩니다.
-
cssPrettierType
single
: 모든 스타일 선언을 한 줄에 배치합니다. 스타일 시트를 간결하게 유지하려는 경우에 적합합니다.multi
: 각 스타일 선언을 새로운 줄에 배치하고, 들여쓰기를 추가하여 시각적 구분을 강화합니다. 복잡한 스타일 블록에 유용합니다.mixed
: 줄바꿈을 선택적으로 삽입하여, 일부 선언은 강조하고 나머지는 간결하게 처리합니다.
-
cssPrettierFormat
- 스타일 정렬 순서를 지정합니다.
- 지정되지 않은 스타일은 마지막에 배치됩니다.
mixed
타입에서는 줄바꿈을 위해\n
을 추가하세요. (single
/multi
타입에서는\n
정상 동작 하지 않습니다 🙅♀️ )
settings.jsonc
파일 내 가이드에 따라 원하는 스타일을 지정해주세요.
- 자동 정렬을 원하는 CSS 파일에서
Ctrl+S
/Cmd+S
키를 사용하여 파일 자동 정렬 및 저장해주세요.
- CSS 파일만 변환되지만 SCSS 파일도 적용 대상에 추가할 예정입니다🙆♀️