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

Question

While playing around with a simple react-native setup, I suddenly stumbled upon some (maybe not so) weird ESLint stuff.

Here is my Javascript file:

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;

The issue comes as the following ESLint error in textStyle: { line:

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

I have installed latest linter (v2.2.0) and linter-eslint (v8.4.1) packages in Atom .

I am using a predefined set of rules from the npm package rally-coding that I have installed as a dev dependency in the project, and here's my .eslintrc file:

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

Any ideas where this might be coming from? None of the workarounds suggested in the (many) Github issues threads helped so far.

Answer 1

Syntax error is caused by a not closed View tag.

<View/> should be </View>

Side note: linter is not always really accurate with these sort of errors. A small suggestion is that always check if you closed all your tags if you had a expected "}" error and already checked all your }