JSX and ES6 template string

Hi!

I have this annoying behavior on webstorm 10.0.4 when I try to use the ES6 template string syntax inside a JSX expression on my react app:
When I use an expression to interpolate a variable it doesn't recognize the 2nd back tick as end of the string. Instead it thinks it is a new start of a back-tick expression.

Please see recordit to see it: http://recordit.co/Vmllw9CbwN

Any ideas on how to configure/workaround this is highly appreciated.

4 comments
Comment actions Permalink

as far as I can see, closing backtick after interpolation is properly recognized. the problem only occurs if you enclose arbitrary part of your JSX code in backticks... WebStorm tries to parse the code in ES6 template, and, if the code is neither a simple string literal nor a valid code fragment, it may break the parsing. Related ticket: https://youtrack.jetbrains.com/issue/WEB-19424

0
Comment actions Permalink

This is an ongoing issue that has been reported several times, and I still have it on 2019.2.4 Ultimate. JetBrains repeatedly claim its fixed but it hasn't been and it continues to be reported.

In my case I have all settings for my React native project, ES6 features all working etc (becuase JB always try and put the issue on the project setup).

If i then have a string in my code such as

const name = "Jo"
const message = `hello ${name}` and I try to surround it with back ticks, INtellij removes them, or if i start from the back and add one to the front, then save the file they dissapear, or if i add them and click anywhere else in the flile they put them there and remove them from the original string. Its very frustrating, and it has certainly NOT been fixed

0
Comment actions Permalink

What keyboard layout do you use? What keys do you use to enter a backtick? can be related to https://youtrack.jetbrains.com/issue/IDEA-205751 and https://youtrack.jetbrains.com/issue/IDEA-156405

0
Comment actions Permalink

I use a Scandinavian (Finnish) Keyboard layout  on my 2018 mbp touch. Back ticks are created by

opt + shift + forward tick key (last key before backspace on the top row)

0

Please sign in to leave a comment.