Atom 和 React Native 的 ESLint 意外解析错误

Question

在尝试简单的 react-native 设置时，我突然发现了一些（也许不是）奇怪的 ESLint 东西。

这是我的 Javascript 文件：

import React from 'react';
import { Text, View } from 'react-native';

const Header = () => {
  const { textStyle } = styles;
  return (
    <View>
      <Text style={textStyle}>App Header!</Text>
    <View/>
  );
};
const styles = {
  textStyle: {
    fontSize: 20
  }
};
export default Header;

问题出现在 textStyle: { 行中的以下 ESLint 错误：

Parsing error: Unexpected token, expected "}" (Fatal)

我已经在 Atom.

中安装了最新的 linter (v2.2.0) 和 linter-eslint (v8.4.1) 软件包

我正在使用 npm 包 rally-coding 中的一组预定义规则，我已将其作为开发依赖项安装在项目中，这是我的 .eslintrc 文件：

{
  "extends": "rallycoding",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "jsx": true
  }
}

知道这可能来自哪里吗？ None 在（许多）Github 个问题线程中建议的变通办法到目前为止有所帮助。

Answer 1

语法错误是由未关闭的 View 标记引起的。

<View/> 应该是 </View>

旁注： linter 对于此类错误并不总是非常准确。一个小建议是，如果出现 expected "}" 错误并且已经检查了所有 }

，请始终检查是否关闭了所有标签

Atom 和 React Native 的 ESLint 意外解析错误

ESLint Unexpected Parsing error with Atom & React Native

eslint

atom-editor

react-native