安装 ESlint 后 React 中出现意外的令牌答案

【问题标题】：Unexpected token in React after installed ESlint安装 ESlint 后 React 中出现意外的令牌
【发布时间】：2017-09-05 18:35:54
【问题描述】：

在我开始使用 ESlint 后，React.js 中出现意外令牌问题。

这是我的.eslintrc 文件：

{
 parser: "babel-eslint",
  "ecmaFeatures": {
  "jsx": true,
  "modules": true
 },
"rules": {
 "max-len": [1, 120, 2, {ignoreComments: true}],
 "linebreak-style": 0,
 "semi": [2, "never"],
 "jsx-quotes": [2, "prefer-single"],
 "react/jsx-curly-spacing": [2, "always"],
 "react/prefer-stateless-function": [0]
 },
"globals": {
 "document": true,
 "localStorage": true
 },
"extends": ["airbnb-base"]
}

在 index.js 我有这个定义：

ReactDOM.render(<App />, document.getElementById('main'));

Syntax error (unexpected token) 在<App /> 中。如果我在'<App />' 中添加引号，它就可以工作。为什么？我不想在组件调用中使用引号。这个问题在 JSX 语法中无处不在。这里也是：

const App = () => (
<Router>
    <div>
        <Route exact path="/" component={Landing} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
    </div>
</Router>

);

可能我必须向.eslintrc 添加一些规则。你能帮我解决这个问题吗？

谢谢。

【问题讨论】：

您可能需要添加 ESLint 插件，例如这个：npmjs.com/package/eslint-plugin-react
你好，马特，我已经安装了这个插件，但它不工作。
当你写 '' 时它会渲染组件？
你好 gabrielwr。是的，正如你所写。
@ŠtefanOndáš 你需要将它添加到你的配置中，看看：npmjs.com/package/eslint-plugin-react

标签： reactjs eslint

【解决方案1】：

感谢您的所有回复。我已经安装了你写的所有插件。最后，问题出在我的 webpack 配置文件中。我忘了设置查询 - 加载程序中的预设。现在它正在工作。

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ['babel-loader', 'eslint-loader'],
    query: {
        presets: ['es2015', 'react']
    }
}

【讨论】：