💡 왜 Convention Lint를 사용해야 할까요?

😫 이런 경험 있으신가요?

• ❌ 팀원마다 다른 네이밍 스타일로 코드가 혼란스러워요
• ❌ 코드 리뷰에서 "이건 kebab-case로 써주세요"라는 댓글만 수십 개...
• ❌ 프로젝트가 커질수록 네이밍 컨벤션이 무너져요
• ❌ 신입 개발자가 기존 규칙을 몰라서 매번 수정 요청해요

✅ Convention Lint가 해결해드립니다!

• ✨ 실시간 검사: 타이핑하는 순간 규칙 위반을 즉시 표시
• 🚨 명확한 피드백: "공백 포함", "대문자 사용" 등 구체적인 에러 메시지
• 🛡️ 저장 방지: 규칙을 지키지 않으면 저장 자체를 차단
• 🎨 유연한 설정: 프로젝트마다 다른 규칙 적용 가능
• ⚡ 즉시 적용: .convention.json 하나로 팀 전체 규칙 공유

✨ 주요 기능

📝 5가지 네이밍 규칙 지원

🚨 실시간 에러 표시 & 구체적인 피드백

<!-- ❌ 잘못된 예시 -->
<div class="My Button">
<!-- 🔴 kebab-case 규칙 (소문자+숫자, 하이픈(-)으로 구분) 위반: 공백 포함, 대문자 포함 -->

<div id="user-id">
<!-- 🔴 camelCase 규칙 (첫 글자 소문자, 단어마다 대문자) 위반: 구분자(-) 사용 불가 -->

• 빨간 물결 밑줄로 위반 항목 표시
• 라인 전체 배경색 강조
• 마우스 호버 시 구체적인 위반 사유 표시 (공백, 대문자, 잘못된 구분자 등)

💾 저장 시 자동 검증

• Ctrl+S 저장 시 자동 검사
• 규칙 위반 시 저장 차단 + 경고 메시지
• 통과 시에만 저장 허용 → 실수로 잘못된 코드가 커밋되는 것을 방지

🔄 원클릭 토글 기능

• VSCode 하단 상태 표시줄에서 Convention: ON/OFF 클릭
• 임시로 검사를 비활성화하고 싶을 때 유용
• 다시 클릭하면 즉시 활성화

⚛️ Atomic CSS 자동 감지

<!-- ✅ Atomic CSS 클래스는 자동으로 검사 제외 -->
<div class="w100p h50vh mt10px df aic jcc bg007BFF">
  <!-- Tailwind, UnoCSS 스타일의 유틸리티 클래스 모두 지원 -->
</div>

• w100p, mt10px, bg007BFF 같은 Atomic CSS 패턴 자동 감지
• Tailwind CSS, UnoCSS 등 유틸리티 우선 CSS 프레임워크와 호환

🌐 템플릿 엔진 지원

<!-- ✅ PHP, Vue, EJS 등 템플릿 구문은 자동 예외 처리 -->
<div class="<?= $className ?>" id="{{ userId }}">
  <img src="<%= imagePath %>" />
</div>

• PHP (<?php, <?=), Vue/Angular ({{ }}), EJS (<% %>), Jinja ({% %}), Razor (@{ }) 등 모든 주요 템플릿 엔진 지원
• 동적으로 생성되는 값은 검사하지 않음

🚫 SVG 완전 예외 처리

<!-- ✅ SVG 내부는 모든 규칙 무시 -->
<svg>
  <circle class="AnyClassName" id="any-id-format" />
</svg>

• SVG 파일 (.svg) 및 <svg> 태그 내부는 검사하지 않음
• SVG는 표준 속성명이 다르기 때문에 예외 처리

📦 설치 방법

⚡ 빠른 설치 (추천)

VSCode에서 단 3초 만에 설치하세요!

1. VSCode 실행
2. Ctrl+P 입력
3. ext install Drangon-Knight.convention-lint 입력 후 Enter

🔗 다른 설치 방법

Marketplace 웹사이트에서 설치

• VSCode Marketplace 방문
• "Install" 버튼 클릭

VSIX 파일로 설치

code --install-extension convention-lint-0.2.3.vsix

🚀 빠른 시작 가이드

1단계: 설정 파일 생성 (30초 소요)

프로젝트 루트에 .convention.json 파일을 만들어주세요:

{
  "convention": {
    "ignoreAtomicCSS": true,
    "classNamingRule": "kebab-case",
    "idNamingRule": "camelCase",
    "folderNamingRule": "lowercase",
    "fileNamingRule": "snake_case",
    "ignore": ["node_modules", ".git", "dist", "build"]
  }
}

2단계: 코드 작성하고 확인하기

이제 코딩을 시작하면 자동으로 검사가 진행됩니다!

<!-- ✅ 올바른 예시 - 문제 없음 -->
<div class="my-button user-card" id="userId">
  <img src="https://github.com/Drangon-Knight/convention-lint/raw/HEAD/assets/icon_user.png" />
</div>

<!-- ❌ 잘못된 예시 - 빨간 밑줄 표시됨 -->
<div class="My Button UserCard" id="user-id">
  <!-- 🔴 kebab-case 위반: 공백 포함, 대문자 포함 -->
  <img src="https://github.com/Drangon-Knight/convention-lint/raw/HEAD/Assets/IconUser.png" />
  <!-- 🔴 폴더명/파일명 규칙 위반 -->
</div>

3단계: 저장하기

• Ctrl+S를 눌러 저장해보세요
• ✅ 규칙 준수: 정상 저장
• ❌ 규칙 위반: 저장 차단 + 구체적인 에러 메시지 표시

4단계: 필요 시 토글 기능 사용

• VSCode 하단 상태 표시줄에서 Convention: ON 클릭
• 임시로 검사를 끄고 싶을 때 유용해요
• 다시 클릭하면 즉시 활성화됩니다

🎬 실제 사용 예시

시나리오 1: 프론트엔드 프로젝트

{
  "convention": {
    "classNamingRule": "kebab-case",
    "idNamingRule": "camelCase",
    "folderNamingRule": "lowercase",
    "fileNamingRule": "kebab-case",
    "ignoreAtomicCSS": true,
    "ignore": ["node_modules", "dist", "build"]
  }
}

적용 결과:

• 클래스: user-profile, nav-menu ✅
• ID: userId, menuToggle ✅
• 폴더: components, assets ✅
• 파일: user-card.html, main-style.css ✅

시나리오 2: React + TypeScript 프로젝트

{
  "convention": {
    "classNamingRule": "kebab-case",
    "idNamingRule": "camelCase",
    "folderNamingRule": "PascalCase",
    "fileNamingRule": "PascalCase",
    "docExtensions": [".tsx", ".jsx"],
    "ignore": ["node_modules", "build", ".next"]
  }
}

적용 결과:

• 컴포넌트 폴더: Components/, Hooks/ ✅
• 파일명: UserCard.tsx, NavMenu.tsx ✅
• 클래스: user-card, nav-item ✅

시나리오 3: 이미지 중심 프로젝트

{
  "convention": {
    "folderNamingRule": "lowercase",
    "fileNamingRule": "snake_case",
    "assetExtensions": [".png", ".jpg", ".svg", ".webp"],
    "assetFileRule": "snake_case",
    "assetTypes": ["icon", "bg", "thumb", "logo"],
    "ignore": ["node_modules"]
  }
}

적용 결과:

• 폴더: images/, assets/ ✅
• 파일: icon_user.png, bg_header.jpg ✅
• 에셋 타입: icon_, bg_, thumb_ 접두사 인식 ✅

⚙️ 전체 설정 옵션

📋 기본 설정

🔧 고급 설정

{
  "convention": {
    "docExtensions": [".html", ".vue", ".jsx", ".tsx"],
    "docFileRule": "kebab-case"
  }
}

{
  "convention": {
    "assetExtensions": [".png", ".jpg", ".svg", ".webp"],
    "assetFileRule": "snake_case",
    "assetTypes": ["icon", "bg", "thumb", "logo"]
  }
}

📂 프로젝트 전체 검사 기능

단일 파일이 아닌, 프로젝트 전체를 한 번에 검사할 수 있습니다!

사용 방법

1. Ctrl+Shift+P (명령 팔레트 열기)
2. Check Folder Rules 입력 후 실행
3. 검사할 폴더 선택
4. 위반 사항이 발견되면 error-log-[타임스탬프].txt 자동 생성

생성되는 로그 예시

=== Convention Lint 검사 결과 ===
검사 시간: 2024-01-15 14:30:22

[DocClass] /src/components/UserCard.html
  → "MyButton" - kebab-case 규칙 (소문자+숫자, 하이픈(-)으로 구분) 위반: 대문자 포함

[DocId] /src/pages/index.html
  → "user-id" - camelCase 규칙 (첫 글자 소문자, 단어마다 대문자) 위반: 구분자(-) 사용 불가

[FileName] /assets/images/iconUser.png
  → "iconUser" - snake_case 규칙 (소문자+숫자, 언더스코어(_)로 구분) 위반: 대문자 포함

총 3개의 위반 사항 발견

🔧 지원 명령어

💬 자주 묻는 질문 (FAQ)

{
  "convention": {
    "ignoreAtomicCSS": true
  }
}

{
  "convention": {
    "ignore": ["node_modules", "dist", "build", "test"]
  }
}

📝 변경 이력

🎉 v0.2.3 (최신)

• ✅ lowercase 네이밍 규칙 추가 - 폴더명에 적합한 구분자 없는 소문자 규칙
• ✅ 구체적인 에러 메시지 - "kebab-case 위반: 공백 포함, 대문자 포함" 같은 명확한 피드백
• ✅ 템플릿 엔진 지원 - PHP, Vue, EJS, Jinja, Razor 등 7가지 템플릿 자동 감지
• ✅ SVG 완전 예외 처리 - SVG 파일 및 태그 내부 검사 제외
• ✅ Atomic CSS 자동 감지 - Tailwind, UnoCSS 스타일 유틸리티 클래스 지원
• ✅ PascalCase 규칙 지원 - React 컴포넌트 네이밍에 적합
• ✅ 난독화 빌드 시스템 - 소스 코드 보안 강화

v0.2.0

• 실시간 검사 기능
• 토글 기능 (ON/OFF)
• 저장 시 자동 검증

v0.1.0

• 초기 릴리즈
• 기본 네이밍 규칙 검사 (kebab-case, camelCase, snake_case)

🤝 기여하기

Convention Lint를 더 좋게 만들어주세요!

• 🐛 버그 제보: GitHub Issues
• 💡 기능 제안: GitHub Discussions
• ⭐ 별표 주기: 프로젝트가 도움이 되었다면 GitHub에서 별표를 눌러주세요!

📜 라이선스

MIT License - 자유롭게 사용하세요!

👤 제작자

Drangon-Knight

프론트엔드 개발자들의 생산성을 높이기 위해 Convention Lint를 만들었습니다.

• 📦 VSCode Marketplace
• 🐙 GitHub