🎨 SCSS Prettier

---

📋 개요

SCSS Prettier는 저장(Ctrl+S) 한 번으로 CSS 속성을 논리적인 순서로 자동 정렬해주는 도구입니다.

position → display → width → padding → margin → background → color

더 이상 속성 순서 고민하지 마세요. 팀 전체가 동일한 코딩 스타일을 유지할 수 있습니다.

💭 개발 배경

기존 Prettier, Beautify 같은 CSS 포맷터들은 **블록 스타일(속성마다 줄바꿈)**을 강제합니다.

하지만 한국 웹 에이전시 실무에서는 다릅니다. **인라인 스타일(한 줄에 여러 속성)**을 압도적으로 선호합니다. 왜일까요?

/* 외국 포맷터 스타일 - 세로로 길어짐 */
.box {
  display: flex;
  padding: 10px;
  margin: 5px;
  background: blue;
  color: red;
}

/* 한국 에이전시 선호 스타일 - 가로로 간결함 */
.box {
  display: flex; padding: 10px; margin: 5px; background: blue; color: red;
}

코드 밀도가 높아 스크롤 없이 더 많은 코드를 볼 수 있고, 파일 용량도 30% 절약됩니다. 실무에서는 효율이 중요하니까요.

하지만 문제가 있었습니다. 인라인으로 작성하면 속성 순서가 제각각이 되어버립니다. 팀원마다 다르게 작성하면 코드 일관성이 무너집니다.

그래서 만들었습니다. 한국 개발 문화에 딱 맞는 CSS 포맷터를.

인라인 스타일은 유지하되, 속성은 자동으로 정렬. 이것이 SCSS Prettier입니다.

✨ 빠른 예시

/* 정렬 전 */
.box { color: red; padding: 10px; background: blue; display: flex; margin: 5px; }

/* 정렬 후 - Ctrl+S 한 번 */
.box { display: flex; padding: 10px; margin: 5px; background: blue; color: red; }

🎯 이런 분들에게 추천합니다

• ✅ CSS 속성 순서가 제각각이라 코드 읽기 힘드신 분
• ✅ 팀 코딩 컨벤션을 통일하고 싶으신 분
• ✅ 속성 정렬에 시간 낭비하기 싫으신 분
• ✅ 인수인계받은 코드가 엉망이라 정리하고 싶으신 분

---

📖 상세 기능

1. CSS 속성 우선순위 정렬

속성을 논리적 순서로 자동 정렬하여 코드의 일관성을 유지합니다.

정렬 전:

.button{color:white;padding:10px;background:blue;
display:flex;position:relative;margin:20px;}

정렬 후:

.button {
  position: relative; display: flex; padding: 10px; margin: 20px; background: blue; color: white;
}

2. 주석 보존

모든 주석을 완벽하게 보존하며 적절한 위치에 배치합니다.

정렬 전:

.header{background:#fff;/* 간격 */padding:20px;color:#333;display:flex;}

정렬 후:

.header {
  display: flex; /* 간격 */ padding: 20px; background: #fff; color: [#333](https://github.com/Yoodaekyung/SCSS-Prettier/issues/333);
}

인라인 주석(/* */)은 원래 위치에 보존되며, 속성만 우선순위대로 정렬됩니다.

3. 셀렉터 포맷팅

셀렉터를 쉼표 기준으로 개행하여 가독성을 높입니다.

정렬 전:

h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:bold;}

정렬 후:

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0; margin: 0; font-weight: bold;
}

4. Sass Map 포맷팅

Sass Map을 멀티라인으로 포맷팅합니다.

정렬 전:

$colors:(primary:#007bff,secondary:#6c757d,success:#28a745,danger:#dc3545);

정렬 후:

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
  danger: #dc3545
);

5. 특수 지시어

///minify와 ///expand 지시어로 특정 룰의 포맷을 제어합니다.

///minify
.compact {
    display: flex;
    width: 100%;
    height: 50px;
}

///expand
@font-face {
    font-family: "Custom";
    src: url("font.woff2");
}

---

🚀 설치 방법

방법 1: VSCode 마켓플레이스

1. VSCode 실행
2. Extensions 탭 (Ctrl+Shift+X)
3. "SCSS Prettier" 검색
4. Install 클릭

방법 2: 명령줄

code --install-extension Drangon-Knight.scss-prettier

---

⚙️ 설정 방법

기본 우선순위 순서

확장 프로그램은 다음과 같은 논리적 우선순위를 기본으로 사용합니다:

// 1. 레이아웃 구조 (Layout Structure)
"content", "position", "top", "right", "bottom", "left", "z-index", "display", "visibility", "overflow", "flex", "grid", "float", "clear";

// 2. 박스 모델 (Box Model)
"box-sizing", "width", "height", "padding", "border", "margin";

// 3. 타이포그래피 (Typography)
"font", "font-size", "font-weight", "line-height", "text-align";

// 4. 시각적 스타일 (Visual)
"color", "background", "opacity", "box-shadow", "filter";

// 5. 애니메이션 & 전환 (Animation & Transition)
"transition", "animation", "transform";

// 6. 인터랙션 (Interaction)
"cursor", "pointer-events", "user-select";

// 7. 기타 (Others)
"appearance", "outline", "will-change";

커스텀 우선순위 설정

방법 1: 워크스페이스 설정 (.scssPrettier.json)

프로젝트 루트에 .scssPrettier.json 파일 생성:

{
    "propsPriority": ["position", "display", "width", "height", "padding", "margin", "background", "color"]
}

방법 2: VSCode 설정 (settings.json)

{
    "scssPrettier.propsPriority": ["position", "display", "width", "height"],
    "scssPrettier.debugJson": false
}

우선순위 계층 구조

1. 🥇 .scssPrettier.json (프로젝트별 설정 - 최우선)
2. 🥈 settings.json (사용자/워크스페이스 설정)
3. 🥉 Default (내장 기본값)

---

📖 사용 예시

기본 예시

입력 (난잡한 실무 코드):

.container {
color:#333;background:white;padding:40px;width:1200px;
    margin:20px auto;
  display:
flex;position:relative;
}

출력 (Ctrl+S 한 번):

.container {
  position: relative; display: flex; width: 1200px; padding: 40px; margin: 20px auto; background: white; color: [#333](https://github.com/Yoodaekyung/SCSS-Prettier/issues/333);
}

속성들이 우선순위대로 한 줄에 정렬됩니다. position과 display가 최우선!

중첩 규칙 예시

입력:

.card{background:white;display:flex;padding:20px;.title{color:black;font-size:18px;margin-bottom:10px;font-weight:bold;}&:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1);}}

출력:

.card {
  display: flex; padding: 20px; background: white;

  .title {
    font-size: 18px; font-weight: bold; margin-bottom: 10px; color: black;
  }

  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px);
  }
}

주석 보존 예시

입력:

.container{/* 레이아웃 설정 */display:flex;position:relative;/* 박스 크기 */width:100%;padding:20px;margin:0 auto;/* 배경 스타일 */background:#f5f5f5;}

출력:

.container {
  /* 레이아웃 설정 */ position: relative; display: flex; /* 박스 크기 */ width: 100%; padding: 20px; margin: 0 auto; /* 배경 스타일 */ background: #f5f5f5;
}

Sass 기능 예시

// 변수, 믹스인, 루프 모두 정상 작동
$primary-color: #007bff;
$spacing: 20px;

.button {
  @include flex-center; padding: $spacing / 2; background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

// @each 루프도 완벽 지원
@each $size, $value in $sizes {
  .text-#{$size} {
    font-size: $value;
  }
}

---

🎛️ 특수 지시어

///minify - 한 줄 출력

특정 룰을 한 줄로 압축합니다.

///minify
.utility {
    display: flex;
    width: 100%;
    height: auto;
}

// 일반 룰은 정상적으로 포맷팅됨
.normal {
    display: block;
    width: 50%;
}

///expand - 강제 확장

특정 룰을 강제로 확장 모드로 출력합니다.

///expand
@font-face {
    font-family: "CustomFont";
    src: url("font.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

자동 확장: @font-face

@font-face는 자동으로 확장 모드로 포맷됩니다.

@font-face {
    font-family: "MyFont";
    src: url("font.woff2");
}

---

🔧 고급 기능

AST 노드 타입 시스템

확장 프로그램은 정교한 AST(Abstract Syntax Tree) 시스템을 사용합니다:

주석 타입:

• block-comment - 한 줄 블록 주석
• multiline-comment - 여러 줄 블록 주석
• line-comment - // 라인 주석
• directive-comment - ///minify, ///expand

룰 타입:

• css-rule - 일반 CSS 룰 (.class, #id, div)
• at-rule - At-rules (@media, @each, @for, @if)
• nested-rule - 중첩 룰 (&:hover, & > li)
• font-face - @font-face (자동 확장)

변수 타입:

• sass-variable - Sass 변수 ($color: red;)
• css-variable - CSS 변수 (--color: red;)

At-statement 타입:

• import - @import
• include - @include
• extend - @extend
• use - @use
• forward - @forward

디버그 모드

AST를 JSON으로 출력하여 디버깅할 수 있습니다:

{
    "scssPrettier.debugJson": true
}

파일 저장 시 같은 디렉토리에 .json 파일이 생성됩니다.

---

🎨 실전 예시

정렬 전:

// 실무에서 흔히 볼 수 있는 난잡한 코드
.hero-section{background:#f8f9fa;padding:80px 0;
margin-bottom:40px;.hero-content{display:flex;align-items:center;
.hero-title{font-size:48px;font-weight:700;color:#212529;margin-bottom:20px;
line-height:1.2;}&:hover{transform:scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,0.1);}}}

정렬 후:

// 깔끔하고 정돈된 코드 (속성이 한 줄로 정렬됨)
.hero-section {
  padding: 80px 0; margin-bottom: 40px; background: #f8f9fa;

  .hero-content {
    display: flex; align-items: center;

    .hero-title {
      font-size: 48px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: [#212529](https://github.com/Yoodaekyung/SCSS-Prettier/issues/212529);
    }

    &:hover {
      box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: scale(1.02);
    }
  }
}

---

💡 팁 & 모범 사례

1. 일관된 우선순위 사용

팀 전체가 동일한 .scssPrettier.json 설정을 사용하세요.

2. 주석 활용

주석을 활용하여 스타일 섹션을 명확히 구분하세요.

3. Sass 변수는 최상단에

파일 상단에 변수를 모아두면 유지보수가 쉽습니다.

4. Minify는 신중하게

///minify는 유틸리티 클래스나 간단한 룰에만 사용하세요.

---

🛠️ 사용 방법

1. 확장 설치

   • VSCode Extensions 탭에서 "SCSS Prettier" 검색 후 설치

2. 우선순위 설정 (선택사항)

   • .scssPrettier.json 또는 settings.json에 속성 우선순위 정의

3. 파일 저장 (Ctrl + S)

   • 속성, 주석, 공백이 자동으로 정렬되어 저장됩니다

---

🤝 기여하기

버그 리포트나 기능 제안은 eorud0713@gmail.com 으로 보내주세요 !

---

📄 라이선스

MIT License - Created by DragonKnight

---

🔗 링크

• VSCode Marketplace

---