syntax highlighting broken on arrow function implicit return with 'Less than'-operator

[jukkahuuskonen]

This may be related to: Syntax highlighting broken when using ES6 arrow function's implicit return to return JSX #4

How to reproduce:

1. Create react app with: npx create-react-app my-app
2. Edit App.js by adding arrowfunction: checkLessThan = (value) => value < 5;

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  checkLessThan = (value) => value < 5;

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

I'm using the Charcoal Oceanic Next color theme, but the problem seems to affect all VSCode themes #(atleast preinstalled dark themes).

Most of the color-formatting goes away. Strings appear to be fine. Switching the 'Less Than'-operator into 'Greater Than'-operator shows colors correctly.

Putting paranthesis around the implicit return would fix the problem, but that is not a real solution to the bug. Especially, as Eslint/Prettier are often configured to remove those paranthesis.