[eslint] is defined but never used

개발 환경 : typescript + React 
eslint 설정을 해뒀는데, 자꾸 에러가 떠서 뭐지 하고 찾다가 해결하여 작성함

발생 이유

에러를 미리 작성해놓고 적용하지 않았을 때 등장, 이외에도 선언만 하고 사용, 호출하지 않은 변수나 함수들도 no-unused-vars 규칙에 걸리게 됨

기존에 있던 eslint

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": "error",
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "comma-dangle": ["warn", "never"],
    "no-unused-vars": ["error", { "vars": "local", "args": "none" }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

저게 왜 동작을 안하지 하다가 아래방식대로 다시 작성했더니 적용되어 에러가 안남

해결방법

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": "error",
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "comma-dangle": ["warn", "never"],
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "warn"
    // "no-unused-vars": ["error", { "vars": "local", "args": "none" }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}