React & TypeScript/TypeScript

[ESLint] naming-convention 설정방법

yoonjong Park 2023. 11. 23.

작성한 코드

  rules: {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    "@typescript-eslint/naming-convention": [
      "warn",
      {
        selector: "typeAlias",  // 타입선언
        format: ["PascalCase"],
      },
      {
        selector: "memberLike",  // Property 멤버
        format: ["camelCase"],
      },
      {
        selector: "function",  // exported function (컴포넌트 명)
        format: ["PascalCase"],
        modifiers: ["exported"],
      },
      {
        selector: "function",  // function
        format: ["camelCase"],
      },
    ],
  },

selector는 naming convention을 적용하고자 하는 target을 말한다.

format은 convention format을 말한다. 여러가지를 설정하게 할 수도 있다.

modifiers는 특정 영역만 설정하고자 할 때 적용한다. 위에서는 컴포넌트의 가장 최상단에 export function ComponentName 형태로 할때만 Pascal 형태로 먹히게 하고자 설정하였다.

하단에 하나 function에 대해 camelCase로 해두어서, 내부에서 사용하는 function은 모두 소문자가 가능하도록 설정함.

 

참고 : 

https://typescript-eslint.io/rules/naming-convention/#selector-options

 

naming-convention | typescript-eslint

Enforce naming conventions for everything across a codebase.

typescript-eslint.io

 

댓글