ESLint Ayrıştırma hatası: Beklenmeyen simge

Bu kodla:

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

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

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

Bu eslint hatasını alıyorum:

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

İşte benim eslint yapılandırma:

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

.... .... Sorun ne?

ESLint ayrıştırma işleminde beklenmeyen simge hataları, geliştirme ortamınızla ESLint'in geçerli ayrıştırma özellikleri arasındaki JavaScripts ES6 ~ 7 ile devam eden değişikliklerle uyumsuzluk nedeniyle oluşur.

.Eslintrc dosyanıza "parserOptions" özelliğini eklemek artık kullanmak gibi belirli durumlar için yeterli değildir

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

ESLint sınıflarında ESLint şu anda kendi başına ayrıştıramıyor. Bu özel durum şu hatayı verir:

error Parsing error: Unexpected token =

Çözüm, ESLint'in uyumlu bir ayrıştırıcı tarafından ayrıştırılmasıdır. babel-eslint bu sayfayı okuduktan sonra beni kurtaran bir paket ve bunu daha sonra gelen herkes için alternatif bir çözüm olarak eklemeye karar verdim.

sadece ekle:

"parser": "babel-eslint"

senin için .eslintrc dosya ve çalıştırmak npm install babel-eslint --save-devveya yarn add -D babel-eslint.

Lütfen dikkat ediniz yeni Bağlam API başlayarak React ^16.3bazı önemli değişiklikler var, bakınız resmi rehber .

ESLint 2.x, ObjectRestSpread sözdizimini deneysel olarak destekler, aşağıdakilere ekleyerek etkinleştirebilirsiniz .eslintrc: docs

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

ESLint 1.x, spread operatörünü yerel olarak desteklemez, bunun üstesinden gelmenin bir yolu babel-eslint ayrıştırıcısını kullanmaktır . En son kurulum ve kullanım talimatları proje benioku dosyasındadır.

"parser": "babel-eslint" sorunu düzeltmeme yardımcı oldu

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

Referans

Bu sorunu İlk olarak, babil-eslint'i npm kullanarak yükleyerek çözdüm

npm install babel-eslint --save-dev

İkinci olarak, bu yapılandırmayı .eslintrc dosyasına ekleyin

{
   "parser":"babel-eslint"
}

Benim durumumda (im Firebase Bulut İşlevleri kullanarak) açtım .eslintrc.jsonve değiştirdim:

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

için:

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

Başlangıçta çözüm, deneysel bir özellik olarak kullanılan ve varsayılan olarak desteklenmeyen nesne yok etme olarak aşağıdaki yapılandırmayı sağlamaktı:

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

Sürüm 5'ten beri, bu seçenek kullanımdan kaldırılmıştır .

Şimdi ES'nin yeterince yeni bir sürümünü beyan etmek yeterlidir:

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

Husky koşusu ile ilgili bir ön taahhüt göreviniz varsa eslint, lütfen okumaya devam edin. İle ilgili cevapların çoğunu denedim parserOptionsveparserGerçek sorunumun kullandığım düğüm sürümü ile ilgili olduğu değerlerin .

Geçerli düğüm sürümüm 12.0.0'dı, ancak husky nvm varsayılan sürümümü bir şekilde kullanıyordu ( nvmsistemimde olmasa bile ). Bu husky ile ilgili bir sorun gibi görünüyor . Yani:

1. Daha önce kaldırdığımda silinmeyen $HOME/.nvmklasörü sildim nvm.
2. Doğrulanmış düğüm en sonuncudur ve uygun ayrıştırıcı seçeneklerini gerçekleştirmiştir.
3. Çalışmaya başladı!

Sadece kayıt için, eslint-plugin-vue kullanıyorsanız , eklemek için doğru yer param 'parser': 'babel-eslint'içinde parserOptions.

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

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