ข้อผิดพลาดในการแยกวิเคราะห์ 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 config ของฉัน:

{
  "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 ด้วยการเปลี่ยนแปลงอย่างต่อเนื่องกับ JavaScripts ES6 ~ 7

การเพิ่มคุณสมบัติ "parserOptions" ใน. eslintrc ของคุณไม่เพียงพอสำหรับสถานการณ์เฉพาะเช่นการใช้

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

ในคลาส ES6 เนื่องจาก ESLint ไม่สามารถแยกวิเคราะห์ได้ด้วยตนเอง สถานการณ์เฉพาะนี้จะทำให้เกิดข้อผิดพลาด:

error Parsing error: Unexpected token =

การแก้ปัญหาคือการแยกวิเคราะห์ ESLint โดย parser ที่เข้ากันได้ babel-eslint เป็นแพ็คเกจที่ช่วยฉันเมื่อไม่นานมานี้หลังจากอ่านหน้านี้และฉันตัดสินใจที่จะเพิ่มสิ่งนี้เป็นทางเลือกสำหรับทุกคนที่มาในภายหลัง

เพียงเพิ่ม:

"parser": "babel-eslint"

ที่คุณ.eslintrcไฟล์และเรียกใช้หรือnpm install babel-eslint --save-devyarn add -D babel-eslint

โปรดทราบว่าเป็นบริบทใหม่ APIเริ่มต้นจากReact ^16.3มีการเปลี่ยนแปลงที่สำคัญบางโปรดดูที่คู่มืออย่างเป็นทางการ

ESLint 2.x สนับสนุนการทดสอบ ObjectRestSpread ไวยากรณ์คุณสามารถเปิดใช้งานได้โดยเพิ่มสิ่งต่อไปนี้ใน.eslintrc: docs

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

ESLint 1.x ไม่รองรับผู้ประกอบการแพร่กระจายวิธีหนึ่งที่จะได้รับรอบนี้คือการใช้parser 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"
        }
    }
}

การอ้างอิง

ฉันแก้ไขปัญหานี้โดยขั้นแรกติดตั้ง babel-eslint โดยใช้ npm

npm install babel-eslint --save-dev

ประการที่สองเพิ่มการกำหนดค่านี้ในไฟล์. eslintrc

{
   "parser":"babel-eslint"
}

ในกรณีของฉัน (ฉันใช้ฟังก์ชัน Firebase Cloud) ฉันเปิด.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
  }
}

หากคุณมีภาระผูกพันล่วงหน้ากับฮัสกี้ที่กำลังทำงานอยู่eslintโปรดอ่านต่อไป ฉันลองคำตอบส่วนใหญ่เกี่ยวกับparserOptionsและparserค่าที่ปัญหาที่แท้จริงของฉันเกี่ยวกับรุ่นโหนดที่ฉันใช้อยู่

รุ่นโหนดปัจจุบันของฉันคือ 12.0.0 แต่แหบแห้งใช้รุ่นเริ่มต้น nvm ของฉันอย่างใด (แม้ว่าฉันจะไม่ได้nvmอยู่ในระบบของฉัน) นี่ดูเหมือนจะเป็นปัญหากับฮัสกี้เอง ดังนั้น:

1. ฉันลบ$HOME/.nvmโฟลเดอร์ที่ไม่ถูกลบเมื่อฉันลบไปnvmก่อนหน้านี้
2. โหนดที่ตรวจสอบแล้วเป็นตัวเลือกวิเคราะห์คำที่เหมาะสมและล่าสุด
3. มันเริ่มทำงาน!

สำหรับบันทึกถ้าคุณใช้eslint-plugin-vueสถานที่ที่ถูกต้องในการเพิ่ม'parser': 'babel-eslint'อยู่ในparserOptionsพารามิเตอร์

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

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