I am writing a React application using JSX in WebStorm. My team's codebase has become quite complex in terms of the control flow, and there are several deeply nested ternary boolean expressions in order to avoid nested if statements before the return statement.
Is there a feature, plugin or setting that would allow me to see what the corresponding ? or : symbol is that matches with the other symbol as there is with curly brackets?
Even a solution in VSCode or Atom would be fine, as I would try to find something similar in WebStorm. It would vastly improve my quality of life during this project, since I wouldn't have to spend a minute or so to find the original condition. I couldn't find anything in the plugins marketplace or online.
The expression works one-to-one, I believe, so the matching operator is not ambiguous, correct?
return (
<TouchableOpacity key={index} onPress={() => setActivePlayer(index)} style={
[styles.streamContainer, index % 2 === 0 ?
fullscreen === true && (secondaryPlayer === index || quaternaryPlayer === index) ?
{right: 0} : {}
:
fullscreen === true && (activePlayer === index || tertiaryPlayer === index) ?
{}
:
{right: 0},
\\...
Something like this would be amazing:
