SCSS Prettier Extension
- SCSS·CSS 파일을 저장할 때 미리 정의한 우선순위대로 속성을 정렬하고 주석·공백을 일관성 있게 정리해 주는 Visual Studio Code 확장
- 가독성·유지보수성을 극대화하도록 설계
특징
| 구분 |
설명 |
| 자동 포맷 |
onWillSaveTextDocument 시점에 코드 구조를 보존하며 속성·공백·주석 정리 |
| 우선순위 기반 정렬 |
.scssPrettier.json → VS Code settings.json → 내장 기본값 순으로 우선순위 적용 |
| 주석 처리 규칙 |
/* … */ block comment, // … line comment 모두 지원·보존 |
| ///minify 지원 |
///minify 주석 바로 뒤 rule 1개를 완전 1-라인으로 축약 |
규칙 요약
설정 (Configuration)
1. .scssPrettier.json — 프로젝트 전용
{
"propsPriority": ["z-index", "position", "display", "width", "height", "min-width", "min-height", "padding", "margin", "border", "border-radius", "background", "opacity", "line-height", "order"]
}
- 배열 순서대로 속성 정렬
- 파일 존재 시 최우선 적용
2. VS Code settings.json — 사용자 / 워크스페이스
{
"scssPrettier.propsPriority": ["position", "display", "margin", "padding", "width", "height"]
}
.scssPrettier.json 부재 시 적용- 없으면 내장 기본값
3. 내장 기본 우선순위
["z-index", "position", "display", "width", "height", "min-width", "min-height", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "border", "background", "opacity", "line-height", "order"]
“///minify” 한 줄 출력 가이드
| 키워드 |
동작 설명 |
///minify |
바로 다음에 등장하는 단 하나의 rule(선택자·중괄호 포함)을 완전 1-라인으로 축약 |
규칙
///minify 문자열이 정확히 일치해야 함- 주석 아래 공백 없이 즉시 rule 배치
사용 예시
///minify
h1,
h2,
h3 {
margin: 0;
padding: 0;
font-weight: 700;
}
⬇ 저장 후 변환
h1,
h2,
h3 {
margin: 0;
padding: 0;
font-weight: 700;
}
- 선택자·중괄호·프로퍼티 모두 공백 제거
- 콤마 앞뒤 공백 삭제 →
h1,h2,h3
- 마지막 프로퍼티 뒤 세미콜론 유지
주의 사항
///minify는 첫 번째로 이어지는 rule 하나에만 적용- 중첩(nesting) 내부에서도 동일하게 동작
- 공백 규칙
///minify 위 : 한 줄 공백///minify 아래 : 공백 없음(바로 rule)
사용법
- 확장 설치
VS Code Extensions 탭 → SCSS Prettier Extension
- 우선순위 설정(선택)
.scssPrettier.json 또는 settings.json에 속성 우선순위 정의
- 저장(Ctrl + S)
속성·주석·공백이 자동 정렬되어 저장
