CSS 코드 정렬 및 가독성 향상을 위한 VS Code 확장 프로그램: Old Fashioned CSS Formatter 출시

Old Fashioned CSS Formatter: CSS 코드 정렬의 새로운 기준

핵심 기술

프론트엔드 개발에서 CSS 속성 관리에 대한 지속적인 필요성을 해소하기 위해 개발된 Visual Studio Code 확장 프로그램입니다. CSSComb와 같이 유지보수가 중단된 도구의 공백을 메우고, 현대적인 기능과 함께 논리적인 속성 정렬을 제공합니다.

기술적 세부사항

• CSSComb 대체 및 개선: 유지보수가 중단된 CSSComb의 역할을 대체하며, 더 나은 사용자 경험과 기능을 제공합니다.
• 세 가지 정렬 전략:
  • Alphabetical: 단순성과 일관성을 추구하는 팀에 적합합니다.
  • Concentric: 시각적 영향에 따라 외부 레이아웃에서 내부 타이포그래피 순서로 정렬합니다.
  • Idiomatic: SMACSS나 대형 프레임워크의 가이드라인과 같은 업계 표준 규칙을 따릅니다.
• 유연한 전략 적용: 개별 CSS 블록에 다른 정렬 전략을 적용할 수 있습니다.
• SCSS 지원 강화: PostCSS를 활용하여 SCSS를 깊이 지원합니다.
• 논리적 그룹화 및 시각적 구분: 관련 속성을 논리적으로 그룹화하고 시각적인 분리선(visual separation)을 추가합니다.
• 기존 VS Code 포맷팅 연동: VS Code의 기존 포맷팅 설정을 존중하며, 정렬 전에 포맷팅을 수행합니다.
• 다양한 문법 처리: @media, @property, 사용자 정의 문법 등을 네이티브처럼 처리합니다.

개발 임팩트

• 코드 품질 및 유지보수성 향상: 팀 내 코드의 일관성을 높이고 가독성을 개선하여 유지보수성을 크게 향상시킵니다.
• 생산성 증대: 수동 정렬의 번거로움을 줄이고, 효율적인 코드 관리를 통해 개발 생산성을 높입니다.
• 현대적 프론트엔드 개발 지원: 최신 CSS 트렌드와 개발 워크플로우에 맞춰 설계되었습니다.

커뮤니티 반응

개발자가 직접 경험한 필요성에 의해 제작되었으며, VS Code Marketplace 및 GitHub를 통해 오픈소스로 공개되어 커뮤니티의 피드백과 기여를 장려하고 있습니다.

톤앤매너

개발자의 입장에서 직접 겪은 불편함을 해결하기 위해 만들어진 실용적인 도구이며, 코드 품질과 개발 생산성 향상에 대한 개발자의 노력을 보여줍니다.