Highlighting of JSX is inconsistent

[Kestrer]

I have attatched an image showing a few inconsistenties:

Namely:

• Tags don't highlight if placed on the first line.
• Tags don't highlight if placed with a space after an equals.
• Tags don't highlight if not placed at the start of the line.
• A self-closing tag followed by a cast will cause the next line to incorrectly highlight (e.g. this won't show up as blue).

[arthur-zhuk]

what's the output of :filetype on this file? if it's typescript.tsx then run :filetype detect if it fixes colors check :filetype output and see if it's typescriptreact. if that's the case then make sure you have this line in your .vimrc

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

[Kestrer]

@ug02fast Actually I just realized that I had bothvim-jsx-typescript+typescript-vim and vim-jsx-pretty installed which was causing a few errors. Removing vim-jsx-pretty, I get the same but without blue tags at all, and there's no syntax highlighting whatsoever if I have :se ft=typescriptreact.

[PezCoder]

@Koxiaet @ug02fast I just upgraded the library & facing the same issue here because typescript-vim expects the filetype to be typescript Refer: https://github.com/leafgarland/typescript-vim/blob/master/ftdetect/typescript.vim#L4

while this library expects it to be typescriptreact.. I'm not sure why aren't we relying on the default 'filetype' for a .tsx & .jsx extension rather than overriding it.?

Any solutions you guys know so far.

[eloytoro]

@PezCoder this change introduced the problems https://github.com/peitalin/vim-jsx-typescript/pull/33 made me feel sorry I updated to the recent version

I'm only using typescript-vim and vim-jsx-typescript and it just doesnt work, I'll have to fork one of these to revert it back to the expected behavior

[eloytoro]

Switched to https://github.com/HerringtonDarkholme/yats.vim and its all back to normal

[tony]

I switched to https://github.com/HerringtonDarkholme/yats.vim as in @eloytoro's comment, but also noticed i had multiple typescript plugins fighting each other

Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'
Plug 'HerringtonDarkholme/yats.vim'

Check your own vim config and see which works for you. I ended up removing peitalin/vim-jsx-typescript, keeping leafgarland/typescript-vimand adding HerringtonDarkholme/yats.vim

[PezCoder]

So the thing is VIM & Neovim's latest version has by default added types of typescriptreact & javascriptreact for '.tsx' & '.jsx'. So I realised that the change this library has introduced, is actually correct.

While the typescript-vim is lagging behind on this that is why we're facing issues. You guys are right that yats fixes it, but with my gruvebox theme, the colors just look horrible with it.

I ended up using this fork for now:

Plug 'iwikal/typescript-vim', { 'branch': 'typescriptreact' }

These are the two open PRs in typescript-vim to fix it: ~https://github.com/leafgarland/typescript-vim/pull/167 - Old~ ~https://github.com/leafgarland/typescript-vim/pull/171 - New~ Update: the above PR has been merged.

The saddest part is, after this :PlugUpdate, the whole coc completions have messed up, which is just a pain. Something to explore separately anyways.

[ian-moore]

Also experienced the same issues with highlighting. Setting the highlight colors manually also had no effect. I ended up switching to

Plug 'leafgarland/typescript-vim'
Plug 'maxmellon/vim-jsx-pretty'