[JS] ESLint 트러블슈팅

💡 ESLint를 사용하면서 경험한 오류들을 정리해보자!

목표

• ESLint가 무엇인지 설명할 수 있다.
• ESLint를 사용하면서 발생한 문제들을 파악하고 해결할 수 있다.
• ESLint 트러블슈팅 공간으로 활용할 수 있다.

 

트러블슈팅

Parsing error...

Unexpected token '?'

샘플코드를 작성 중에 ES6 클래스를 구현할, "Parsing error: Unexpected token ;"을 경험했다.

문법적으로 오류는 없었으며 브라우져 콘솔에서 실행시켜도 정상적으로 작동했다.

위와 같은 이슈에 대한 해결 방법과 오류의 원인을 살펴보자.

export default class Item extends Component {
	$id; // "Parsing error: Unexpected token ;"
	$name;
}

위 문제에 대한 해결방법은 아주 간단했다. "ecmaVersion"을 지정해주면 된다.

'.eslintrc.json'의 파서 옵션을 수정해주었다.

// .eslintrc.json
{
	"env": {
		"es2022": true
	},
	"parserOptions": {
		"ecmaVersion": 13
	},
	...
}

ESLint 공식에 관한 한 다음과 같이 작성되어 있다.

es2022 - 모든 ECMAScript 2022 전역을 추가하고 ecmaVersion 파서 옵션을 자동으로 13으로 설정합니다.

공식 페이지에서 위와 같이 설정하기 때문에 "ecmaVersion" 옵션은 생략 가능하다.

 

이 구현은 공용 클래스 필드라는 구문 기능으로, ECMAScript 6 호환성 표에 설명된 대로 es2022부터 사용할 수 있습니다.

따라서 13을 지정하지 않으면 (es2022는 ESLint에서 13 임) ESLint의 파서 옵션의 ecmaVersion (공식 에" 기본적으로 ESLint는 ECMAScript 5 구문을 예상합니다." ESLint는 ES5 구문이라고 가정합니다.)

 

*@babel 파서/eslint-parser 지정에 설명된 대로 이와 같이 "구문 분석 오류 :"를 해결하는 방법도 있지만 @babel / eslint-parser 노트에 설명 된대로 ECMAScript 사양 (이 경우 인스턴스 클래스 필드의 공용 인스턴스 클래스 필드)으로 이미 구현 된 경우 ( 특별한 사정이 없는 한), ESLint의 파서Options 를 사용하여 오류를 해결합니다(아래 @babel/eslint-parser 인용).

 

기본 파서는 JSX뿐만 아니라 모든 비 실험적 구문을 지원합니다 (기본 파서는 JSX뿐만 아니라 모든 비 실험적 구문을 지원합니다)

 

출처

• ESLint 구문 분석 오류, SHIFT 그룹 기술 블로그(저자, '카타야마'), 2022-06-13
• ECMAScript 2016+ compatibility table, Juriy Zaytsev, 2022-12-17

 

Last Updated. 2023. 01. 12.