eslint의 no-unused-vars 규칙과 typescript의 interface 문법 충돌 해결하기

eslint no-unused-vars란?

쓰지않는 변수가 나오면 error을 발생시키는 eslint의 설정중 하나이다.
docs >

no-unused-vars 규칙과 typescript의 interface 문법 충돌을 해결해보자.

eslint no-unused-vars 설정이 "warn"으로 세팅이 되어있는 상황에서
Typescript를 이용해서 밑과 같이 interface를 작성하면,

.eslintrc.json

{
	"extends": [
      "next",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "plugin:@typescript-eslint/recommended"
    ],
  	"plugins": ["@typescript-eslint/eslint-plugin"],
	"rules": {
      "no-unused-vars": "warn",
      ...
    }
}

test.tsx

interface Props {
  onAction: (obj: ObjType) => void;
}

밑처럼 eslint warn이 뜨게 된다.

만약 enum을 작성한다고 해도 warn이 발생하게 된다.

해결 방법

하지만,
interface, enum은 사용하는 부분이 없는 것은 당연한것이다.
그렇기 때문에 이 부분은 eslint의 rules 설정으로 해결할수 있다.

기존의 no-unused-vars 설정을 "off"하고
@typescript-eslint/no-unused-vars의 설정을 이용하면 된다.

.eslintrc.json

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

결과 스크린샷

eslint no-unused-vars error가 발생하지 않는것을 확인할 수 있다.

interface	enum