SCSS Prettier Extension
SCSS/CSS 파일을 저장할 때, 사전에 정의된 우선순위대로 속성을 자동 정렬하고, 주석/공백을 일관성 있게 정리해주는 Visual Studio Code 확장 프로그램입니다.
추가로, 코드 정렬 및 중첩 보호, 알파벳 정렬(혹은 우선순위 정렬) 같은 기능을 함께 적용해, SCSS 파일의 가독성과 유지보수성을 높이는 데 초점을 맞춥니다.
특징
자동 포맷
- 파일 저장 시점(
onWillSaveTextDocument
)에 SCSS/CSS 코드를 자동 정렬 및 공백 정리
- 중첩된 선택자, 변수를 보호하여 구조를 깨뜨리지 않고도 속성 정렬 적용
우선순위 기반 정렬
.scssPrettier.json
혹은 VSCode 설정(scssPrettier.scssPriority
)에서 정의된 속성 순서를 기반으로 재배치
- 특정 속성(예:
position
, display
등)을 우선 배치하거나, 알파벳 순 정렬 형태로 확장 가능
주석 스타일
/* 주석 내용 */
형태만 사용을 권장 (//
형태 주석은 자동 변환되지 않음)
- 한 줄 주석
//
사용 시 포맷 과정에서 배제되거나 호환되지 않을 수 있음
상태 표시줄 토글
- "SCSS Formatter: On/Off" 버튼을 통해, 포맷 기능을 쉽게 켜거나 끌 수 있음
사용자 정의 규칙
- 기본적으로 우선순위 배열을 사용하지만, 알파벳 순서 정렬 방식 등 다양한 스타일 규칙과 결합 가능
- 중첩된 SCSS 구조를 보호하면서 속성 재정렬
- 들여쓰기, 줄 바꿈 규칙,
breakBefore
등 다양한 옵션 확장 가능
Configuration
1. .scssPrettier.json
(Project-Level)
프로젝트 루트 경로에 .scssPrettier.json
파일을 생성해 우선순위 배열을 정의할 수 있습니다:
{ "scssPriority": [ "position", "visibility", "display", "margin", "padding", "opacity", "width", "height", "line-height", "border", "border-radius" ] }
"scssPriority"
배열에 나열된 순서대로 SCSS/CSS 속성이 재정렬됩니다.
- 배열에 없는 속성은 배열 뒤쪽(
Infinity
우선순위)으로 배치됩니다.
2. VSCode Settings (User or Workspace)
VSCode 설정(settings.json
)에서 scssPrettier.scssPriority
키를 통해 프로젝트 전체 혹은 사용자 전역 설정을 적용할 수도 있습니다:
{ "scssPrettier.scssPriority": [ "position", "display", "margin", "padding", "width", "height" ] }
.scssPrettier.json
파일이 존재하면 이를 우선 적용
- 설정 파일이 없으면 VSCode 설정값을 참조
- 둘 다 없으면 확장 내부의 기본 우선순위를 사용
Default Priority
설정 파일이나 사용자 설정에 정의가 없으면, 다음 배열을 기본값으로 사용합니다:
[ "position", "visibility", "display", "margin", "padding", "opacity", "width", "height", "line-height", "border", "border-radius" ]
Usage
SCSS/CSS 작성
- 편집기에서 SCSS/CSS 파일을 작성합니다.
저장(Ctrl + S)
- 파일을 저장하면, 속성 순서와 주석/공백 등을 자동 정렬
토글
- 상태 표시줄에 "SCSS Formatter: On"으로 표시되면 활성 상태입니다.
- 클릭 시 "SCSS Formatter: Off"로 전환되어 포맷 기능을 일시 끌 수 있습니다.