ESLint Parsing error: Token yang tidak terduga


169

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?


dapatkah Anda memposting konfigurasi eslint Anda?
azium

terima kasih saya sudah mengunggah ~
DongYao

3
Anda perlu menggunakan parser yang mendukung proposal properti penyebaran objek.
Felix Kling

Apakah "Impor" Token Tak Terduga? Itu masalah saya .
Lonnie Best

Jawaban:


253

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 .


4
yarn add -D babel-eslintuntuk mereka yang menggunakan Benang.
Neurotransmitter

8
Bagi mereka yang tidak tahu di mana menambahkan "parser": "babel-eslint"pernyataan config, ada di .eslintrc.json. Dalam kasus saya, ini adalah file JSON, tetapi pada dasarnya, file .eslintrc Anda
Avid Programmer

2
Catatan * Jika Anda telah "mengeluarkan" app-react-app Anda dan Anda menambahkan eslint-ing ke IDE Anda, babel-eslint sudah diterapkan. Cukup tambahkan parser dan barang Anda untuk pergi.
Wes Duff

1
Saya menemukan artikel ini juga membantu: grantnorwood.com/...
gurun8

Saya menambahkannya "parser": "babel-eslint"ke file eslintrc saya tetapi mendapat beberapa kesalahan. Saya bekerja dengan reaksi dan memberi tahu saya bahwa komponen yang diimpor saya dipanggil tetapi tidak pernah digunakan. Mana yang aneh?
David Essien

61

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.


2
Itu tidak benar. Pengurai default ESLint Espree mendukung penyebaran, dan bahkan penyebaran rest objek (itulah satu-satunya fitur eksperimental yang mendukung espree). Untuk informasi lebih lanjut, lihat ini: eslint.org/docs/user-guide/…
Ilya Volodin

1
ecmaFeaturestelah ditinggalkan. GunakanecmaVersion
Richard Ayotte

7
ecmaVersion: 2018bekerja tanpa peringatan dengan ESLint 5
Tomasz Racia

1
Solusi terbaik jika saya bisa mengatakannya.
Ansjovis86

1
Saya tidak melihat masalah dengan solusi ini - itu bekerja dengan baik untuk saya. Lebih baik daripada harus menginstal paket baru juga!
Steam gamer

49

"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


3
Jawaban ini tidak menambahkan apa pun ke jawaban @ JaysQubeXon.
cs01

7
Sebenarnya tidak - Anda mendapatkan contoh config (dengan parserOptions termasuk)
kriskodzi

Bagus untuk memiliki contoh lengkap ++. Ini membantu saya untuk memperbaiki kesalahan petunjuk TamperMonkey JS.
brasofilo

@brasofilo di mana Anda mengubah eslint di tamper monyet?
Metin Dagcilar

22

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

Terima kasih, ini memperbaiki masalah linting saya
Deejers

21

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

8

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

1

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!

1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.