جافاسكريبت - خطأ تحليل 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 الخاصة بي:

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

.... .... ما المشكلة؟

الإجابة رقم 1

تحدث أخطاء الرموز غير المتوقعة في تحليل ESLint بسبب عدم التوافق بين بيئة التطوير الخاصة بك وقدرات التحليل الحالية لـ ESLint مع التغيرات الجارية في JavaScript من ES6 إلى ES7.

إضافة الخاصية "parserOptions" إلى ملف .eslintrc لم يعد كافياً للحالات الخاصة، مثل الاستخدام

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

في فئات ES6 حيث أن ESLint غير قادر حاليًا على تفسيرها بمفرده. هذه الحالة الخاصة ستؤدي إلى ظهور خطأ:

error Parsing error: Unexpected token =

الحل هو أن يتم تحليل ESLint بواسطة محلل متوافق، أي @babel/eslint-parser أو babel-eslint لإصدار بابل أقل من الإصدار 7.

فقط أضف:

"parser": "@babel/eslint-parser"

إلى ملف .eslintrc الخاص بك وقم بتشغيل npm install @babel/eslint-parser --save-dev أو yarn add -D @babel/eslint-parser. إذا كنت تستخدم pnpm، يمكنك بدلاً من ذلك تشغيل pnpm add -D @babel/eslint-parser.

يرجى ملاحظة أنه بما أن واجهة برمجة التطبيقات للسياق الجديدة بدءًا من React ^16.3 تحتوي على بعض التغييرات المهمة، يرجى الرجوع إلى الدليل الرسمي.

الإجابة رقم 2

في حالتي (أنا أستخدم Firebase Cloud Functions) فتحت .eslintrc.json وغيّرت:

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

إلى :

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

الإجابة رقم 3

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

مرجع

الإجابة رقم 4

ESLint 2.x يدعم تجريبياً تركيب ObjectRestSpread، يمكنك تمكينه عن طريق إضافة ما يلي إلى .eslintrc الخاص بك: docs

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

ESLint 1.x لا يدعم عامل الانتشار (spread operator) بشكل أصلي، وإحدى الطرق لتجاوز ذلك هي استخدام محلل babel-eslint. تعليمات التثبيت والاستخدام الأحدث موجودة في ملف README الخاص بالمشروع.

الإجابة رقم 5

لقد حليت هذه المشكلة أولاً عن طريق تثبيت babel-eslint باستخدام npm

npm install babel-eslint --save-dev

ثانياً، أضف هذا الإعداد في ملف .eslintrc

{
   "parser":"babel-eslint"
}

الإجابة رقم 6

في الأصل، كان الحل هو تقديم التكوين التالي كمختصر كائن حيث كان استخدام التفكيك كميزة تجريبية ولم يكن مدعومًا بشكل افتراضي:

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

منذ الإصدار 5، تم إهمال هذا الخيار.

الآن يكفي فقط الإعلان عن نسخة من ES، تكون جديدة بما فيه الكفاية:

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

الإجابة رقم 7

أنا أستخدم eslint لوظائف السحابة (بيئة التطوير: flutter 2.2.3).

في حالتي، لا يوجد ملف .eslintrc.json لذلك كان عليّ تحديث ملف .eslintrc.js عن طريق إضافة الخاصية parserOptions: { "ecmaVersion": 2020, }, في نهاية الملف. يبدو ملف .eslintrc.js المحدث الخاص بي هكذا:

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "google",
  ],
  rules: {
    quotes: ["error", "double"],
  },
  
  // Newly added property
  parserOptions: {
    "ecmaVersion": 2020,
  },
};

الإجابة رقم 8

لقد حللت هذه المشكلة عن طريق ضبط هذا في ملف .eslintrc.json:

"extends": [
    ...,
    "plugin:prettier/recommended"
]

الإجابة رقم 9

فقط للسجل، إذا كنت تستخدم eslint-plugin-vue، المكان الصحيح لإضافة 'parser': 'babel-eslint' هو داخل معامل parserOptions.

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

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