코드 컨벤션 (프론트엔드)

[chuuminggg]

스타일링

• 스타일링 컨벤션 (Tailwind CSS) → vsc tailwind class 자동정렬 익스텐션

네이밍 컨벤션

대상	규칙	예시
컴포넌트	PascalCase	SkillCard.tsx
함수 / 변수	camelCase	getUserData
상수	UPPER_SNAKE_CASE	API_BASE_URL
타입 / 인터페이스	PascalCase	UserType

함수 정의

• 화살표 함수로 통일

const MyComponent = () => { ... }

타입 정의

• type 사용을 원칙으로 하되, extends가 필요한 경우에만 예외적으로 interface 사용

type UserProps = { name: string; age: number };

eslint

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "next/core-web-vitals",        // Next.js 기본 룰
    "plugin:tailwindcss/recommended",// Tailwind 클래스 자동 정렬 및 검사
    "prettier", // Prettier와 충돌하는 ESLint 규칙 비활성화
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    // 재할당이 없는 변수는 const 사용 강제
    "prefer-const": "error",
    // 암묵적 타입 변환 방지 (!!value, +value 등)
    "no-implicit-coercion": "warn",

    // 사용하지 않는 변수 체크 (언더스코어로 시작하면 허용)
    "@typescript-eslint/no-unused-vars": [
      "warn",
      { argsIgnorePattern: "^_" },
    ],

    // any 사용 경고
    "@typescript-eslint/no-explicit-any": "warn",
    
    // non-null assertion(!) 사용 경고
    "@typescript-eslint/no-non-null-assertion": "warn",

    // map으로 JSX 렌더링할 때 key 누락 방지
    "react/jsx-key": "warn",

    // useEffect / useCallback 의존성 배열 체크
    "react-hooks/exhaustive-deps": "warn",

    "react/no-unescaped-entities": "warn", // ' 따옴표 에러 무시
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

prettier

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}