ESLint React解析错误

Question

So I followed the instructions at guide.meteor.com to set up my package.json eslintConfig.

"eslintConfig": {
  "plugins": [
    "meteor"
  ],
  "extends": [
    "airbnb/base",
    "plugin:meteor/recommended"
  ],
  "rules": {
    "meteor/eventmap-params": [
      2,
      {
        "templateInstanceParamName": "instance"
      }
    ],
    "import/no-unresolved": [
      2,
      {
        "ignore": [
          "^meteor/"
        ]
      }
    ],
    "semi": [
      "error",
      "never"
    ]
  }
}

It works fine until I try and use React.

main.js:

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'))
})

That throws the error: [eslint] Parsing error: Unexpected token <

I have the react plugin:

"devDependencies": {
  "eslint": "^2.9.0",
  "eslint-config-airbnb": "^8.0.0",
  "eslint-plugin-import": "^1.6.1",
  "eslint-plugin-jsx-a11y": "^1.0.4",
  "eslint-plugin-meteor": "^3.5.2",
  "eslint-plugin-react": "^5.0.1"
}

I've tried following examples from Google but none of them helped. I've tried adding 'react' and 'eslint-plugin-react' to the plugins bit and nothing changed. I'm gobsmacked the solution wasn't provided in the ESLint section of the meteor guide. Any assistance would be appreciated.

Answer 1

You don't need to install babel-eslint . Espree (native ESLint parser) fully supports ES6, ES7 and Object Rest/Spread. The reason ESLint stopped parsing your file is because you haven't enabled jsx , so it will consider it as an incorrect syntax.

{
  "ecmaFeatures": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "jsx": true
  }
}

Add the above snippet to your config file and it should start working. For more information, you can read Specifying Parser Options

Answer 2

Install babel-eslint and to your .eslintrc add "parser": "babel-eslint" . You're missing the ES6 transpiling so eslint just crashes.