mxw / vim-jsx

React JSX syntax highlighting and indenting for vim.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Syntax highlight breaks with template strings

arnarthor opened this issue · comments

Hey, I'm not sure what it is that is triggering my syntax highlight to break.
image
In the attached screenshot it randomly breaks in the JSX syntax in a helper function and the rest of the class declaration gets completely broken due too this.

Other javascript plugins I'm using are pangloss/vim-javascript.

This works in some components but in others, where I have template strings it seems to break.

There at least seems to be a pattern of this breaking immediately after using a template string for me.

Another similar example
image

This somehow solved itself when installing syntastic. Which I find odd, but I'll take it

Sorry to open an old issue, please let me know if it's already be addressed elsewhere. I'm still having this problem despite also having syntastic installed, any ideas?

@trevorwhitney just had this problem and #119 had the fix.

awesome, thanks!

@BrennanRoberts and @trevorwhitney #119 ends with a reminder to use .jsx as the file extension or enable this plugin to work with .js files, but it does not address the current issue. I'm able to reproduce it myself in a .jsx file.

@arnarthor I believe that this issue is still valid; I'm able to reproduce it in a .jsx file.

Happy to look into this if someone can provide a minimal repro case in a format which allows me to test without typing every character seen in an image.

const test = "foo"
const jsx = (
  <div>
    <div attr={`bar ${test} baz`} />
  </div>
)

Which highlights bar all the way to the end as a string. I'm guessing it's detecting the closing brace of ${test} and not knowing how to close the string.

Here's what I see, which seems correct to me:

screen shot 2017-11-06 at 1 25 06 pm

Well, I feel dumb. I guess I had commented out this plugin a few months ago while testing something and didn't re-enabled it. Everything is working fine now.

So, @mxw, awesome work, things are 💯