ESlint：解析错误：意外的令牌<答案

【问题标题】：ESlint: Parsing error: Unexpected token <ESlint：解析错误：意外的令牌<
【发布时间】：2017-08-17 06:08:25
【问题描述】：

我有这个功能：

import React from 'react';
import FilterList from './Filter/FilterList';

export default function Sidebar() {
  return (
    <div>
      <FilterList />
    </div>
  );
}

并包含这些包：

  "dependencies": {
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"i18n-react": "^0.4.0",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-dom": "^15.6.1",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.1.2",
"rxjs": "^5.4.3",
"superagent": "^3.5.2",
"webpack": "^3.5.4"},

"devDependencies": {
"eslint": "^4.4.1",
"eslint-config-airbnb-base": "^11.3.1",
"eslint-plugin-import": "^2.7.0",
"nwb": "0.18.x",
"nwb-less": "^0.6.0",
"yaml-loader": "^0.5.0"},

但是在运行 lint 时出现此错误： error 解析错误：Unexpected token

我的 .eslintrc 文件：

module.exports = {
"extends": "airbnb-base",
"plugins": [
  "import"
]};

我做错了什么？

【问题讨论】：

请添加更多关于你的预设插件的信息，你能分享你的.babelrc吗？你在用 eslint-babel 吗？
Q 用我的 eslint 文件更新。
这似乎更像是你的 .babelrc 或 webpack 配置然后 ESlint 产生的错误
可能是。我并没有真正设置 webpack。如果我删除 webpack 包，我会得到同样的错误。我猜webpack被nwb使用了。
这个链接应该可以帮助你：eslint-plugin-react issue #447

标签： reactjs eslint

【解决方案1】：

你收到这个错误是因为 eslint 不知道如何处理 JSX 语法，你需要 eslint-plugin-react 来解决这个问题。

但是您还缺少 airbnb-eslint-config 工作所需的其他插件。做他们在文档中所说的：

npm info "eslint-config-airbnb@latest" peerDependencies

并安装打印的依赖项（作为开发依赖项）。

截至今天，我得到了这份清单：

{ eslint: '^3.19.0 || ^4.3.0',
  'eslint-plugin-jsx-a11y': '^5.1.1',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-react': '^7.1.0' }

【讨论】：

如果使用 Vue 而不是 React，这个答案是否也适用？
@JayBienvenu for Vue 你可能会使用这个：eslint.vuejs.org

【解决方案2】：

如果您使用nmp5+，则一种快捷方式是：

npx install-peerdeps --dev eslint-config-airbnb

-peerdeps 指的是所有的依赖。

【讨论】：