Highlighting with Template literals in JSX is broken with junegunn/rainbow_parentheses.vim

[eedrah]

Why I'm writing this here?

I think this isn't a problem in this repo, but I'm writing it here to document a solution for other people that encounter the problem. I'm closing this issue immediately after posting.

Issue:

The combination of mxw/vim-jsx and junegunn/rainbow_parentheses.vim, with a custom g:rainbow#pairs list, breaks syntax highlighting.

Minimal .vimrc to replicate:

set nocompatible
filetype indent plugin on
syntax on

call plug#begin($VIM_PLUGINS_DIR)
    Plug 'pangloss/vim-javascript'
    Plug 'mxw/vim-jsx'
    Plug 'junegunn/rainbow_parentheses.vim' " Breaks highlighting for template
call plug#end()
let g:jsx_ext_required = 0
let g:rainbow#pairs = [['(', ')'], ['[', ']'], ['{', '}'], ['<', '>']]

and then call the command :RainbowParentheses after, to toggle.

Solution

Disable the custom g:rainbow#pairs line.

[mxw]

Thanks!

[eedrah]

Example file:

import React from 'react'
import gql from 'graphql-tag'
import { Query } from 'react-apollo'

export default ({ match }) => (
  <Query
    query={gql`
      {
        project(id: ${match.params.id}) {
          id
          owner {
            id
            name
          }
          title
          fields
          projectSchema {
            id
            name
            version
            draftLayer
            presentationLayer
          }
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>
      if (error) return <p>Error :(</p>
      return JSON.stringify(data.project)
    }}
  </Query>
)

[eedrah]

Associated issue in other repo: https://github.com/junegunn/rainbow_parentheses.vim/issues/22