developer tip

ESLint 구문 분석 오류 : 예기치 않은 토큰

optionbox 2020. 7. 28. 08:27
반응형

ESLint 구문 분석 오류 : 예기치 않은 토큰


이 코드로 :

import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';

import * as Pages from '../components';

const {  Home, ...Components } = Pages;

이 eslint 오류가 발생합니다.

7:16  error  Parsing error: Unexpected token .. Why?

내 eslint 구성은 다음과 같습니다.

{
  "extends": "airbnb",
  "rules": {
    /* JSX */
    "react/prop-types": [1, {
      "ignore": ["className", "children", "location", "params", "location*"]
    }],
    "no-param-reassign": [0, {
      "props": false
    }],
    "prefer-rest-params": 1,
    "arrow-body-style": 0,
    "prefer-template": 0,
    "react/prefer-stateless-function": 1,
    "react/jsx-no-bind": [0, {
      "ignoreRefs": false,
      "allowArrowFunctions": false,
      "allowBind": true
    }],
  }
}

.... .... 뭐가 문제 야?


ESLint 구문 분석에서 예기치 않은 토큰 오류는 JavaScript ES6 ~ 7에서 지속적으로 변경되는 개발 환경과 ESLint의 현재 구문 분석 기능 간의 비 호환성으로 인해 발생합니다.

.eslintrc에 "parserOptions"속성을 추가하는 것만으로는 더 이상 사용할 수 없습니다.

static contextTypes = { ... } /* react */

ESLint는 현재 자체적으로 구문 분석 할 수 없으므로 ES6 클래스에서. 이 특정 상황은 다음과 같은 오류를 발생시킵니다.

error Parsing error: Unexpected token =

해결책은 호환 가능한 구문 분석기로 ESLint를 구문 분석하는 것입니다. babel-eslint는이 페이지를 읽은 후 최근에 저를 구한 패키지이며 나중에 오는 사람을위한 대안 솔루션으로 추가하기로 결정했습니다.

그냥 추가하십시오 :

"parser": "babel-eslint"

.eslintrc파일에 넣고 npm install babel-eslint --save-dev또는을 실행 하십시오 yarn add -D babel-eslint.

는 AS 있습니다 새로운 상황에 맞는 API 시작은 React ^16.3몇 가지 중요한 변경 사항이의를 참조하십시오 공식 가이드 .


ESLint 2.x에서 실험적으로 당신이 당신에 다음을 추가하여 사용할 수 있습니다, ObjectRestSpread 구문을 지원 .eslintrc: 문서를

"parserOptions": {
  "ecmaVersion": 6,
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  }
},

ESLint 1.x는 기본적으로 스프레드 연산자를 지원하지 않습니다.이 문제를 해결하는 한 가지 방법은 babel-eslint 파서를 사용하는 것 입니다. 최신 설치 및 사용 지침은 프로젝트 추가 정보에 있습니다.


"parser": "babel-eslint" 문제를 해결하는 데 도움이되었습니다.

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "comma-dangle": 0,
        "react/jsx-uses-vars": 1,
        "react/display-name": 1,
        "no-unused-vars": "warn",
        "no-console": 1,
        "no-unexpected-multiline": "warn"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "15.6.1"
        }
    }
}

참고


먼저 npm을 사용하여 babel-eslint를 설치 하여이 문제를 해결했습니다.

npm install babel-eslint --save-dev

둘째,이 구성을 .eslintrc 파일에 추가하십시오.

{
   "parser":"babel-eslint"
}

In my case (im using Firebase Cloud Functions) i opened .eslintrc.json and changed:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2017
},

to:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2018
},

참고URL : https://stackoverflow.com/questions/36001552/eslint-parsing-error-unexpected-token

반응형