[React] ESLint Token Parase Error 해결하기

안녕하세요.

이번에는 React의 Create-react-app으로 프로젝트를 생성한 후 ESLint를 사용할 때 Error가 발생하는 현상을 해결해 보겠습니다.

 

create-react-app으로 생성한 폴더

Components에서 return ( token parase 관련 Error 때문에 빨간 줄이 안 없어지는 현상 확인

 

pacakge.json

"devDependencies": {
    "eslint": "^8.31.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin": "^1.0.1",
    "import": "^0.0.6",
    "prettier": "^2.8.1",
    "typescript": "^4.9.4"
  }

 

1. .eslintrc.js 파일에서 parser: 'babel-eslint'를 추가하면 된다.

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
    parser: 'babel-eslint',
  },
};

 

1-1. 다른 파일 수정 후 저장 하면 Error 발생이 되며, 수정한 파일을 다시 저장하면 다시 정상이 됩니다.

Error 메시지

Compiled with problems:X

ERROR

[eslint] .eslintrc.js:
	Configuration for rule "parser" is invalid:
	Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"babel-eslint"').

 

1-2. 참고 사이트

ESLint Parsing error: Unexpected token

 

 

2. 다른 방법

• 1번 방법으로 설정 후 Error 1번 나오는 거 거슬려서 다른 방법 찾아봤습니다.
• 그런데 1번 방법이랑 같은 증상이 나옵니다. / 해결법 좀…

 

.eslintrc.js

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
    parser: '@babel/eslint-parser',
  },
};

 

2-1. 참고사이트

[React] Eslint 관련 오류 해결하기

 

아직 완벽한 해결법을 못 찾았는데, 해결하면 링크를 걸어두도록 하겠습니다.

감사합니다.