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"
}

필자의 경우 (Firebase Cloud Functions를 사용하고 있음) 열리고 .eslintrc.json변경되었습니다.

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

에:

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

원래 솔루션은 다음과 같은 구성을 객체 파괴로 실험 기능으로 사용했으며 기본적으로 지원되지 않았습니다.

{
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

버전 5부터이 옵션은 더 이상 사용되지 않습니다 .

이제 ES 버전을 선언하는 것으로 충분합니다.

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

husky running으로 사전 커밋 작업을 수행 한 eslint경우 계속 읽으십시오. 나는 실제 문제가 내가 사용하고있는 노드 버전에 관한 대부분의 답변 parserOptions과 parser값을 시도했다 .

내 현재 노드 버전은 12.0.0이지만 허스키는 nvm내 시스템에 없는 경우에도 어떻게 든 내 VM 기본 버전을 사용하고있었습니다 . 이것은 거친 자체 의 문제 인 것 같습니다 . 그래서:

1. 나는 삭제 된 $HOME/.nvm폴더 나 제거 할 때 삭제되지 않은 nvm이전을.
2. 확인 된 노드는 최신이며 적절한 파서 옵션을 수행했습니다.
3. 작동하기 시작했습니다!

레코드를 위해 eslint-plugin-vue 를 사용하는 경우 추가 할 올바른 위치 'parser': 'babel-eslint'는 parserOptionsparam 안에 있습니다.

  'parserOptions': {
    'parser': 'babel-eslint',
    'ecmaVersion': 2018,
    'sourceType': 'module'
  }

https://eslint.vuejs.org/user-guide/#faq