ESLint 解析錯誤：意外的令牌

Question

使用此代碼：

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

.... .... 有什么問題？

Answer 1

由於您的開發環境與 ESLint 當前的解析能力與 JavaScript ES6~7 的持續變化不兼容，導致 ESLint 解析中出現意外的令牌錯誤。

將“parserOptions”屬性添加到您的 .eslintrc 已不再適用於特定情況，例如使用

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

在 ES6 類中，因為 ESLint 目前無法自行解析它。 這種特殊情況會引發以下錯誤：

error Parsing error: Unexpected token =

解決方案是讓 ESLint 由兼容的解析器解析，即 @babel/eslint-parser 或 babel-eslint 用於 v7 以下的 babel 版本。

只需添加：

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

到您的.eslintrc文件並運行npm install @babel/eslint-parser --save-dev或yarn add -D @babel/eslint-parser 。

請注意，由於從React ^16.3開始的新 Context API有一些重要的變化，請參考官方指南。

Answer 2

ESLint 2.x 實驗性地支持 ObjectRestSpread 語法，您可以通過將以下內容添加到您的.eslintrc來啟用它： docs

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

ESLint 1.x 本身不支持擴展運算符，解決此問題的一種方法是使用babel-eslint 解析器。 最新的安裝和使用說明在項目自述文件中。

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

參考

Answer 4

在我的情況下（我使用 Firebase Cloud Functions）我打開.eslintrc.json並更改：

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

至：

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

Answer 5

我通過首先使用 npm 安裝 babel-eslint 解決了這個問題

npm install babel-eslint --save-dev

其次，將此配置添加到 .eslintrc 文件中

{
   "parser":"babel-eslint"
}

Answer 6

最初，解決方案是提供以下配置，因為對象解構曾經是一項實驗性功能，默認情況下不支持：

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

從版本 5 開始，此選項已被棄用。

現在只需聲明一個足夠新的 ES 版本就足夠了：

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

Answer 7

我將eslint用於雲功能（開發環境：flutter 2.2.3）。

在我的情況下.eslintrc.json不存在，所以我必須通過在文件末尾包含parserOptions: { "ecmaVersion": 2020, },屬性來更新.eslintrc.js文件。 我更新.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,
  },
};

Answer 8

僅作記錄，如果您使用的是eslint-plugin-vue ，則添加'parser': 'babel-eslint'的正確位置在parserOptions參數內。

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

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

Answer 9

我通過在.eslintrc.json文件中設置這個解決了這個問題：

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

Answer 10

在 2021 年 2 月，您可以使用這些值

ecmaVersion - 設置為 3、5（默認）、6、7、8、9、10、11 或 12 以指定您要使用的 ECMAScript 語法的版本。 也可以設置為2015（同6）、2016（同7）、2017（同8）、2018（同9）、2019（同10）、2020（同11）或2021（同 12) 使用基於年份的命名。

https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options

Answer 11

對於React + Firebase 函數

轉到：函數-> .eslintrc.js

添加它 - parserOptions: { ecmaVersion: 8, },

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

Answer 12

如果你有 husky 運行eslint的 pre-commit 任務，請繼續閱讀。 我嘗試了大多數關於parserOptions和parser值的答案，而我的實際問題是關於我正在使用的節點版本。

我當前的節點版本是 12.0.0，但是 husky 以某種方式使用了我的 nvm 默認版本（即使我的系統中沒有nvm ）。 這似乎是哈士奇本身的問題。 所以：

1. 我刪除了之前刪除nvm時沒有刪除的$HOME/.nvm文件夾。
2. 已驗證節點是最新的並且做了正確的解析器選項。
3. 它開始工作了！

Answer 13

盡管實施了上述所有解決方案，我仍然面臨着這個問題。 當我降級 eslint 版本時，它開始工作

Answer 14

我正在使用打字稿，我解決了這個錯誤更改parser

....
"prettier/prettier": [
            "error",
            {
                .....
                "parser": "typescript",
                .....
            }
        ],
....

Answer 15

.
.
{
    "parserOptions": {
    "ecmaVersion": 2020
},
.
.

會成功的。

Answer 16

我必須將ecmaVersion更新為"latest"

"parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    },
    "requireConfigFile": false
  },