Lỗi phân tích cú pháp ESLint: Mã thông báo không mong đợi

Với mã này:

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

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

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

Tôi nhận được lỗi eslint này:

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

Đây là cấu hình eslint của tôi:

{
  "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
    }],
  }
}

.... .... Có vấn đề gì vậy?

Xảy ra lỗi mã thông báo không mong muốn trong phân tích cú pháp ESLint do không tương thích giữa môi trường phát triển của bạn và khả năng phân tích cú pháp hiện tại của ESLint với các thay đổi đang diễn ra với JavaScripts ES6 ~ 7.

Thêm thuộc tính "ParserOptions" vào .eslintrc của bạn không còn đủ cho các tình huống cụ thể, chẳng hạn như sử dụng

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

trong các lớp ES6 vì ESLint hiện không thể tự phân tích nó. Tình huống cụ thể này sẽ gây ra lỗi:

error Parsing error: Unexpected token =

Giải pháp là để phân tích cú pháp ESLint bởi trình phân tích cú pháp tương thích. babel-eslint là một gói đã cứu tôi gần đây sau khi đọc trang này và tôi quyết định thêm nó như một giải pháp thay thế cho bất kỳ ai đến sau.

chỉ cần thêm:

"parser": "babel-eslint"

vào .eslintrctập tin của bạn và chạy npm install babel-eslint --save-devhoặc yarn add -D babel-eslint.

Xin lưu ý rằng API bối cảnh mới bắt đầu React ^16.3có một số thay đổi quan trọng, vui lòng tham khảo hướng dẫn chính thức .

ESLint 2.x thử nghiệm hỗ trợ cú pháp ObjectRestS lan rộng, bạn có thể kích hoạt nó bằng cách thêm các mục sau vào .eslintrc: docs của bạn

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

ESLint 1.x không thực sự hỗ trợ toán tử lây lan, một cách để khắc phục điều này là sử dụng trình phân tích cú pháp babel-eslint . Các hướng dẫn cài đặt và sử dụng mới nhất là trên readme của dự án.

"parser": "babel-eslint" đã giúp tôi khắc phục vấn đề

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

Tài liệu tham khảo

Tôi đã giải quyết vấn đề này trước tiên, cài đặt babel-eslint bằng npm

npm install babel-eslint --save-dev

Thứ hai, thêm cấu hình này trong tệp .eslintrc

{
   "parser":"babel-eslint"
}

Trong trường hợp của tôi (tôi đang sử dụng Chức năng đám mây Firebase) tôi đã mở .eslintrc.jsonvà thay đổi:

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

đến:

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

Ban đầu, giải pháp là cung cấp cấu hình sau dưới dạng phá hủy đối tượng được sử dụng làm tính năng thử nghiệm và không được hỗ trợ theo mặc định:

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

Kể từ phiên bản 5, tùy chọn này đã không được chấp nhận .

Bây giờ chỉ cần khai báo một phiên bản ES là đủ mới:

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

Nếu bạn đã có một nhiệm vụ trước khi cam kết với việc chạy husky eslint, vui lòng tiếp tục đọc. Tôi đã thử hầu hết các câu trả lời về parserOptionsvà parsercác giá trị trong đó vấn đề thực sự của tôi là về phiên bản nút tôi đang sử dụng.

Phiên bản nút hiện tại của tôi là 12.0.0, nhưng husky đã sử dụng phiên bản mặc định nvm của tôi bằng cách nào đó (mặc dù tôi không có nvmtrong hệ thống của mình). Đây dường như là một vấn đề với husky . Vì thế:

1. Tôi đã xóa $HOME/.nvmthư mục không bị xóa khi tôi xóa nvmtrước đó.
2. Nút được xác minh là tùy chọn mới nhất và đã thực hiện phân tích cú pháp thích hợp.
3. Nó bắt đầu làm việc!

Chỉ dành cho bản ghi, nếu bạn đang sử dụng eslint-plugin-vue , vị trí chính xác để thêm 'parser': 'babel-eslint'là bên trong parserOptionsparam.

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

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