Backticks with curly braces in JSX break highlighting

[Rob Levy]

I'm using pangloss/vim-javascript as my highlighting dependency. I've read the README.md.

When I'm writing JSX and have ES6-style backticks and ${} in my code, the highlighting breaks from there until the end of the file.

          <Link to={`/news/${post._id}`} key={post._id}>
            <div className='post-card'>
              <h3>{post.title}</h3>
              <ReactMarkdown className='markdown' disallowedTypes={['link', 'heading']} unwrapDisallowed={true} source={post.preview} />
            </div>
          </Link>

This renders as:

Minimal .vimrc

set nocompatible              " be iMproved, required
filetype plugin indent on
syntax on

" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" let Vundle manage Vundle, required
Plugin 'gmarik/Vundle.vim'
Plugin 'pangloss/vim-javascript'
Plugin 'mxw/vim-jsx'

call vundle#end()            " required

" Colour scheme
syntax enable
set t_Co=256
set background=light

[Chris Cowan]

This happens to my source when I have peitalin/vim-jsx-typescript installed.

[Aron Griffis]

FWIW I'm using neovim with pangloss/vim-javascript and mxw/vim-jsx and I'm not seeing this. (I'm also using vim-plug rather than vundle.)

It's probably not related, but you shouldn't enable filetype/syntax above vundle. Instead filetype should be disabled explicitly:

set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

See https://github.com/VundleVim/Vundle.vim#quick-start

[Carlos Nucette]

This happens to me too when using Quramy/vim-js-pretty-template

[Migsar]

It's probably not related, but you shouldn't enable filetype/syntax above vundle. Instead filetype should be disabled explicitly:

I think is related although I don't know why. For me turning filetype off for vundle and on after that solved the issue

filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
...
call vundle#end()
filetype plugin indent on

[Maryam Syed]

Having the same issue, but can't try that solution with spf-13vim because it uses call vundle#rc() :/

[Laurent Savaete]

@roblevy I had the same issue, and using the finish bisection recommended in the README I found the culprit to be these lines in my .vimrc that set different indentation for a specific project I'm working on:

augroup JSProjectSettings
au FileType javascript.jsx setlocal expandtab tabstop=2 shiftwidth=2 autoindent smartindent
autocmd BufNewFile,BufRead,BufEnter <<somePath>>/*.js set ft=javascriptXXXX expandtab tabstop=4 shiftwidth=4 autoindent smartindent
augroup END

where the XXXX is, I added .jsx to match the line above (javascript.jsx), and this fixed the problem. My understanding is that I had inadvertantly disabled vim-jsx by forcing the wrong filetype.

[Maryam Syed]

Not sure if it helps others, but in a similar vein, I had to make sure I explicitly set filetype=javascript.jsx for my .jsx files.

autocmd BufNewFile,BufRead *.jsx set filetype=javascript.jsx

[Joshua Stupplebeen]

^^^ Doing this for typescript files also fixed my highlighting issues

autocmd BufNewFile,BufRead *.tsx set filetype=javascript.jsx