安装 ESlint 后 React 出现意外令牌

Question

在我开始使用 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 添加一些规则。你能帮我解决这个问题吗？

谢谢。

Answer 1

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

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

安装 ESlint 后 React 出现意外令牌

Unexpected token in React after installed ESlint

reactjs

eslint