Highlighting with Template literals in JSX is broken with junegunn/rainbow_parentheses.vim
eedrah opened this issue · comments
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.
Thanks!
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>
)
Associated issue in other repo: junegunn/rainbow_parentheses.vim#22