[ESLint] Parsing error: Unexpected token

ESLint를 돌리는데 Parsing error: Unexpected token 라는 에러가 계속 떴습니다.

알아보니 ESLint의 기본 parser는 Espree로, 기본적으로 ECMA 버전이 5로 설정되어있기 때문에 그 이후 문법이나 Typescript 문법은 parse하면서 에러를 뿜을 수 있다고 합니다.

 

.eslintrc 파일을 만들어서,

 {
   "parser": "babel-parser"
 }

 

위 코드를 작성해 parser를 babel parser로 설정해주면 최신 ECMA 버전을 사용할 수 있습니다. 일반적으로는 이것만 추가하면 해결이 됩니다.

그런데 babel-parser는 Typescript 문법은 해석을 못 하는 것 같습니다. 저같은 경우에는 babel-parser로 parser를 바꾸어도 Typescript에서 타입을 단언하는 'as' 구문에서 오류가 났고 작업 특성상 타입 단언을 사용하지 않을 수 없었기 때문에 한참 검색하다가 typescript-eslint를 발견했습니다.

 

$ npm install --save-dev @typescript-eslint/parser

{
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "overrides": [
    {
      "files": ["*.js", "*.jsx"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}

 

typescript eslint parser를 설치해 준 후 .eslintrc 파일을 위처럼 적어 주면 에러가 뜨지 않습니다.