ESLint의 no-unused-vars 규칙과 Typescript 인터페이스 충돌 해결!

※ ESLint를 Typescript에 맞게 설치하는 것이 궁금하다면 이전 글을 참고해주세요.

 

타입스크립트를 사용한다면 인터페이스에서 임시 변수명을 지어줘야 하는 경우가 있습니다.

다음과 같이 말이죠.

interface InputProps {
  setValue: (value: string) => void
  value: string
}

 

그런데 기본적인 ESLint설정을 해둔 상태라면 다음과 같은 no-unused-vars Lint 에러가 나타납니다.

 

인터페이스니까 사용하는 부분이 없는 것은 당연한데 말이죠.

이 부분은 린트 rules 설정으로 해결 할 수 있습니다.

module.exports = {
  ...
  extends: [
    "eslint:recommended", //
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
  ],
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
  }
}

 

rules의 두 줄이 핵심인데요,

기존의 no-unused-vars는 설정을 off하고, typescript-eslint의 설정을 이용하시면 해결이 됩니다!

이제 에러가 안보이는 것을 확인하실 수 있죠??