ESLint Parsing error: Token yang tidak terduga

Dengan kode ini:

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

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

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

Saya mendapatkan kesalahan eslint ini:

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

Inilah konfigurasi eslint saya:

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

.... .... Apa masalahnya?

Kesalahan token tak terduga dalam penguraian ESLint terjadi karena ketidakcocokan antara lingkungan pengembangan Anda dan kemampuan penguraian ESLint saat ini dengan perubahan yang sedang berlangsung dengan JavaScripts ES6 ~ 7.

Menambahkan properti "parserOptions" ke .eslintrc Anda tidak lagi cukup untuk situasi tertentu, seperti menggunakan

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

di kelas ES6 karena ESLint saat ini tidak dapat menguraikannya sendiri. Situasi khusus ini akan menimbulkan kesalahan:

error Parsing error: Unexpected token =

Solusinya adalah memiliki ESLint diurai oleh parser yang kompatibel. babel-eslint adalah paket yang menyelamatkan saya baru-baru ini setelah membaca halaman ini dan saya memutuskan untuk menambahkan ini sebagai solusi alternatif bagi siapa pun yang datang kemudian.

tambahkan saja:

"parser": "babel-eslint"

ke .eslintrcfile Anda dan jalankan npm install babel-eslint --save-devatau yarn add -D babel-eslint.

Harap perhatikan bahwa karena API Konteks baru mulai dari React ^16.3memiliki beberapa perubahan penting, silakan lihat panduan resmi .

ESLint 2.x secara eksperimental mendukung sintaks ObjectRestSpread, Anda dapat mengaktifkannya dengan menambahkan yang berikut ke .eslintrc: docs Anda

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

ESLint 1.x tidak secara alami mendukung operator penyebaran, salah satu cara untuk mengatasi ini adalah dengan menggunakan parser babel-eslint . Petunjuk instalasi dan penggunaan terbaru ada di readme proyek.

"parser": "babel-eslint" membantu saya memperbaiki masalah ini

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

Referensi

Saya memecahkan masalah ini dengan Pertama, menginstal babel-eslint menggunakan npm

npm install babel-eslint --save-dev

Kedua, tambahkan konfigurasi ini dalam file .eslintrc

{
   "parser":"babel-eslint"
}

Dalam kasus saya (saya menggunakan Firebase Cloud Functions) saya membuka .eslintrc.jsondan mengubah:

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

untuk:

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

Awalnya, solusinya adalah menyediakan konfigurasi berikut sebagai perusakan objek yang digunakan untuk fitur eksperimental dan tidak didukung secara default:

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

Sejak versi 5, opsi ini telah ditinggalkan .

Sekarang cukup dengan mendeklarasikan versi ES, yang cukup baru:

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

Jika Anda mendapat tugas pra-komitmen dengan husky running eslint, silakan lanjutkan membaca. Saya mencoba sebagian besar jawaban tentang parserOptionsdanparser nilai nilai di mana masalah saya yang sebenarnya adalah tentang versi node yang saya gunakan.

Versi node saya saat ini adalah 12.0.0, tetapi husky entah bagaimana menggunakan versi nvm default saya (walaupun saya tidak punya nvmdi sistem saya). Ini tampaknya menjadi masalah dengan husky itu sendiri. Begitu:

1. Saya menghapus $HOME/.nvmfolder yang tidak dihapus ketika saya hapus nvmsebelumnya.
2. Node terverifikasi adalah yang terbaru dan melakukan opsi parser yang tepat.
3. Itu mulai bekerja!

Sebagai catatan, jika Anda menggunakan eslint-plugin-vue , tempat yang benar untuk ditambahkan 'parser': 'babel-eslint'adalah di dalam parserOptionsparam.

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

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