如何配置 ESLint 以允許粗箭頭類方法

Question

ESLint 拋出Parsing error: Unexpected token = error when I try to lint Es6 classes。 我缺少什么配置參數來啟用 eslint 中的胖箭頭類方法？

示例類：

class App extends React.Component{
    ...
    handleClick = (evt) => {
        ...
    }
}

.eslint

{
  "ecmaFeatures": {
    "jsx": true,
    "modules":true,
    "arrowFunctions":true,
    "classes":true,
    "spread":true,

  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "quotes": [
      2,
      "single"
    ],
  }
}

Answer 1

如果要使用實驗性功能（例如箭頭作為類方法），則需要使用babel-eslint作為解析器。 默認解析器 (Espree) 不支持實驗性功能。

Answer 2

首先安裝babel-eslint ：

npm i -D babel-eslint

然后將以下內容添加到您的.eslintrc.json文件中：

"parser": "babel-eslint"

Answer 3

首先安裝這些插件：

npm i -D babel-eslint eslint-plugin-babel

然后將這些設置添加到您的 eslint 配置文件中：

.eslintrc.json

{
    "plugins": [ "babel" ],
    "parser": "babel-eslint",
    "rules": {
        "no-invalid-this": 0,
        "babel/no-invalid-this": 1,
    }
}

這樣你就可以使用粗箭頭類方法，而且你不會從 eslint 得到任何no-invalid-this錯誤。

快樂編碼

Answer 4

從我在錯誤消息Parsing error: Unexpected token =讀到的內容，它看起來更像是解析器錯誤而不是 linter 錯誤。

假設你使用Babel作為你的 JavaScript 編譯器/轉譯器和babel-eslint作為你的 ESLint 解析器，很可能是 Babel 抱怨語法，而不是 ESLint。

問題不在於箭頭函數，而是一些更具實驗性的（ES7??），我認為它被稱為屬性初始值設定項或類實例字段（或兩者：））。

如果你想使用這個新的語法/特性，你需要在 Babel 中啟用preset-stage-1 。 此預設包括允許該語法的syntax-class-properties插件。

加起來：

1. 安裝 babel 預設：

    npm install babel-preset-stage-1

2. 將此預設添加到您的預設列表中（我想您已經在使用es2015和react預設），無論是在您的.babelrc還是在您使用 webpack 的babel-loader查詢字段中。

    "presets": ["es2015", "stage-1", "react"]

Answer 5

我今天遇到了同樣的問題

@dreyescat 的答案對我有用。

默認情況下，babel 使用 3 個預設： es2015 、 react 、 stage-2

帶有“解析錯誤：意外標記 =”的屏幕截圖

然后，如果您還選擇了stage-1預設，則錯誤消失了

沒有錯誤的截圖

你可以自己在bebeljs.io網站上測試一下

Answer 6

如果其他答案不起作用，請嘗試檢查您的系統是否正在使用全局安裝的 eslint（並將其刪除）。

我的問題是 eslint 使用的是全局安裝的版本而不是我的本地版本，並且全局 eslint 無法訪問我本地安裝的 babel-eslint parser 。 此外，由於我全局安裝的 eslint 安裝在不同版本的節點上，因此刪除它並非易事。

檢查您的系統是使用全局還是本地 eslint。

1. 按照@spencer.sm對本地 eslint的回答安裝babel-eslint eslint。
2. 在終端中，檢查運行eslint .是否得到不同的輸出eslint . 和npx eslint . . 如果你得到不同的輸出，很可能是你的全局 eslint 無法訪問 babel-eslint。

卸載全局 eslint

對於大多數人來說，以下命令應該使用 npm 卸載 eslint（使用 npm卸載全局包）和 yarn（ 使用 yarn 卸載全局包）：

# npm
npm uninstall -g eslint
npm uninstall eslint

# yarn
yarn global remove eslint

接下來，運行npx eslint . 看看事情是否奏效。 如果不是，這對我來說不是，您需要采取額外的步驟來刪除全局安裝的 eslint。

從這個答案中，我了解到我在 Node 的系統版本而不是我當前版本的 Node 上安裝了 eslint（我使用的是 nvm）。 按照這些簡單的步驟刪除全局 eslint，你應該很高興！

Answer 7

您的示例不是有效的 ES6，因此無法配置 eslint 以允許它