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

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;

다음과 같은 에러가 표시됩니다.

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 구문 분석에서 예기치 않은 토큰 오류가 발생하는 이유는 개발 환경과 ESLint의 현재 구문 분석 기능이 JavaScript ES6~7에서 계속 변경되기 때문입니다.

.eslintrc에 "parserOptions" 속성을 추가하는 것만으로는 다음과 같은 특정 상황에서 충분하지 않습니다.

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

ESLint는 현재 자체적으로 해석할 수 없기 때문에 ES6 클래스에서 사용됩니다.이 특정 상황에서는 다음과 같은 오류가 발생합니다.

error Parsing error: Unexpected token =

해결책은 ESLint를 호환되는 파서(v7보다 낮은 버전의 babel에서는 @babel/eslint-parser 또는 babel-eslint)로 구문 분석하는 것입니다.

추가:

"parser": "@babel/eslint-parser"

your .eslintrcnpm install @babel/eslint-parser --save-dev ★★★★★★★★★★★★★★★★★」yarn add -D @babel/eslint-parser.

새로운 Context API는 다음부터 시작됩니다.React ^16.3중요한 변경 사항이 있습니다.공식 가이드를 참조해 주세요.

2.구문을 하며 ESLint 2.x의 ObjectRestSpread 구문에 하여 활성화할 수 있습니다.이 구문을 활성화하려면 , 다음의 항목을 에 추가합니다..eslintrc: 문서

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

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

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

언급

경우 Firebase Cloud Functions를 열었습니다(Firebase Cloud Functions (Firebase Cloud Functions) 。.eslintrc.json★★★★

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

대상:

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

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

npm install babel-eslint --save-dev

다음으로 이 설정을 .eslintrc 파일에 추가합니다.

{
   "parser":"babel-eslint"
}

원래 솔루션은 실험적인 기능으로 기본적으로 지원되지 않는 오브젝트 파괴 기능으로 다음 설정을 제공하는 것이었습니다.

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

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

이제 ES 버전을 선언하는 것만으로 충분하며, 이는 충분히 새로운 버전입니다.

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

하고 eslint2.2.3을 평평하게 하다

같은 에는 ★★★★★★★★★★★★★★★★★★★★★★★..eslintrc.json하지 않기 할수 밖에 없었습니다..eslintrc.jsparserOptions: { "ecmaVersion": 2020, },속성을 지정합니다.된 ★★★★★★★★★★★★★★★★.eslintrc.js을 사용하다

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "google",
  ],
  rules: {
    quotes: ["error", "double"],
  },
  
  // Newly added property
  parserOptions: {
    "ecmaVersion": 2020,
  },
};

참고로 eslint-plugin-vue를 사용하고 있는 경우 추가하기 위한 올바른 위치'parser': 'babel-eslint'에 있다parserOptionsPARAM.

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

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

이 문제는 .eslintrc.json 파일로 설정함으로써 해결되었습니다.

"extends": [
    ...,
    "plugin:prettier/recommended"
]

2021년 초에는 시즈 값을 사용할 수 있습니다.

ecmaVersion - 사용할 ECMAScript 구문의 버전을 지정하려면 3, 5(기본값), 6, 7, 8, 9, 10, 11 또는 12로 설정합니다.2015년(6과 동일), 2016년(7과 동일), 2017년(8과 동일), 2018년(9과 동일), 2019년(10과 동일), 2020년(11과 동일), 2021년(12와 동일)으로 설정할 수도 있습니다.

https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options

반응 + Firebase 기능의 경우

functions -> .eslintrc.js로 이동합니다.

추가 - parserOptions: { ecmaVersion: 8, },

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 8,
  },
  extends: ["eslint:recommended", "google"],
  rules: {
    quotes: ["error", "double"],
  },
};

허스키가 실행되고 있는 사전 커밋 작업이 있는 경우eslint, 계속 읽어주세요.저는 그 질문에 대한 대부분의 답을 시도했습니다.parserOptions그리고.parser실제 문제는 사용 중인 노드 버전에 관한 것이었던 값입니다.

현재 노드 버전은 12.0.0이었지만 허스키가 nvm 디폴트버전을 사용하고 있었습니다.nvm내 시스템)에 있습니다.이것은 허스키 자체에 문제가 있는 것 같습니다.그래서:

1. 삭제할 때 삭제되지 않은 폴더를 삭제했습니다.nvm예상보다 일찍.
2. 노드가 최신이며 올바른 파서 옵션을 실행했음을 확인.
3. 작동하기 시작했어!

저는 위의 모든 솔루션을 구현했음에도 불구하고 이 문제에 직면해 있었습니다.eslint 버전을 다운그레이드 했을 때 동작하기 시작했습니다.

타이프 스크립트를 사용하고 있으며, 이 에러 변경을 해결했습니다.parser

....
"prettier/prettier": [
            "error",
            {
                .....
                "parser": "typescript",
                .....
            }
        ],
....

언급URL : https://stackoverflow.com/questions/36001552/eslint-parsing-error-unexpected-token