SCSS Prettier Extension

SCSS/CSS 파일을 저장할 때, 사전에 정의된 우선순위대로 속성을 자동 정렬하고, 주석/공백을 일관성 있게 정리해주는 Visual Studio Code 확장 프로그램입니다.
추가로, 코드 정렬 및 중첩 보호, 알파벳 정렬(혹은 우선순위 정렬) 같은 기능을 함께 적용해, SCSS 파일의 가독성과 유지보수성을 높이는 데 초점을 맞춥니다.

특징

1. 자동 포맷

   • 파일 저장 시점(onWillSaveTextDocument)에 SCSS/CSS 코드를 자동 정렬 및 공백 정리
   • 중첩된 선택자, 변수를 보호하여 구조를 깨뜨리지 않고도 속성 정렬 적용

2. 우선순위 기반 정렬

   • .scssPrettier.json 혹은 VSCode 설정(scssPrettier.scssPriority)에서 정의된 속성 순서를 기반으로 재배치
   • 특정 속성(예: position, display 등)을 우선 배치하거나, 알파벳 순 정렬 형태로 확장 가능

3. 주석 스타일

   • /* 주석 내용 */ 형태만 사용을 권장 (// 형태 주석은 자동 변환되지 않음)
   • 한 줄 주석 // 사용 시 포맷 과정에서 배제되거나 호환되지 않을 수 있음

4. 상태 표시줄 토글

   • "SCSS Formatter: On/Off" 버튼을 통해, 포맷 기능을 쉽게 켜거나 끌 수 있음

5. 사용자 정의 규칙

   • 기본적으로 우선순위 배열을 사용하지만, 알파벳 순서 정렬 방식 등 다양한 스타일 규칙과 결합 가능
   • 중첩된 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

1. SCSS/CSS 작성

   • 편집기에서 SCSS/CSS 파일을 작성합니다.

2. 저장(Ctrl + S)

   • 파일을 저장하면, 속성 순서와 주석/공백 등을 자동 정렬

3. 토글

   • 상태 표시줄에 "SCSS Formatter: On"으로 표시되면 활성 상태입니다.
   • 클릭 시 "SCSS Formatter: Off"로 전환되어 포맷 기능을 일시 끌 수 있습니다.