eslint & prettier ~is not defined 오류 해결

오류가 발생한 환경

1. 프로젝트에 ESlint와 Prettier를 설치했다. (플러그인은 모두 설치 완료상태)

   npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

1. .eslintrc.json, .prettierrc.json을 생성하고 아래 코드처럼 기본설정 적용

   // .eslintrc.json
   {
     "env": {
       "browser": true,
       "es2021": true
     },
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:import/recommended",
       "plugin:jsx-a11y/recommended",
       "plugin:prettier/recommended"
     ],
     "parserOptions": {
       "ecmaFeatures": {
         "jsx": true
       },
       "ecmaVersion": "latest",
       "sourceType": "module"
     },
     "rules": {
       "react/react-in-jsx-scope": 0,
       "react/jsx-uses-react": 0
     }
   }

   // .prettierrc.json
   {
     "singleQuote": true
   }

1. VSCode 설정으로 이동하여 editor.codeActionsOnSave설정을 아래와 같이 조정

   

// settings.json에 다음 코드 추가
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true 
},

오류 내용

~ is defined but never used
~ is assigned a value but never used

오류나는 코드 옆에 주석 // eslint-disable-line no-unused-vars 이걸 달아주면 사라지긴 하는데 근본적인 해결 방법이 아닌 것 같다.

App.test.js 파일에도 오류가 났다.

// App.test.js
'test' is not defined
'expect' is not defined

오류 해결

.eslintrc.json 파일을 수정하고 컴퓨터를 재부팅했더니 해결!

// .eslintrc.json

{
"env": {
    "browser": true,
    "es2021": true,
    "node": true, // never used 오류 해결
    "jest/globals": true // is not defined 오류 해결
  },
"extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended" // never used 오류 해결
  ],
...

.