Closed AnatoleLucet closed 3 years ago
Are you using a jsx/tsx filetype plugin? If so which one?
Yes, I'm using vim-jsx-improve https://github.com/neoclide/vim-jsx-improve
And does other colorschemes work with JSX? Can you tell me the output of echom &filetype
? Is it set to javascript.jsx
, and if not does setfiletype javascript.jsx
solves the issue?
And does other colorschemes work with JSX?
I've used rakr/vim-one for a long time, and it's working without any issue for jsx.
Can you tell me the output of echom &filetype
typescriptreact
Is it set to javascript.jsx, and if not does setfiletype javascript.jsx solves the issue?
No, unfortunately it doesn't.
With your cursor over one of the non-highlighted groups, run the folllowing command.
com! SynStack call SyntaxStack()
fu! SyntaxStack() " {{{
let synNames = []
let lastID = 0
for id in synstack(line("."), col("."))
call add(synNames, synIDattr(id, "name"))
let lastID = id
endfor
if lastID == 0 | return | end
echohl synIDattr(synIDtrans(lastID), "name")
echon synIDattr(synIDtrans(lastID), "name")
echon ' ' . string(synNames)
echohl None
endfu " }}}
With my cursor on one of the non-highlighted jsx element:
And is the highlighting issue fixed if you open an html
file before opening a typescriptreact
file? (in the same neovim instance)
yes
If I apply another scheme before this one, the jsx syntax is going to be from the other scheme.
From what I understand, this issue belongs to https://github.com/neoclide/vim-jsx-improve. The typescriptreact
syntax expects other highlight groups to be defined, but those are not defined. The javascript.jsx
syntax from the same repository doesn't seem to have the issue. For example jsxComponentName
is correctly linked to Statement
, while tsxIntrisicTagName
is linked to htmlTagName
. I 100% understand that they want it colored as HTML is, but they should be doing the loading if required.
It's definitely not the colorscheme's job to link htmlTagName
or tsxIntrisicTagName
to Statement
, that's the filetype/syntax plugin's job. This should be fixed in the syntax plugin.
Open the issue with that repository to get their opinion, I might consider fixing it here if they provide a convincing reason to.
Also I don't understand why your JSX doesn't work. Mine does, I use the same plugin.
Provide more details with the above command about the jsx groups. Use verbose hi jsxXxxx
to print more details where those groups were defined.
Right, do you think I should open an issue on vim-jsx-improve's repo?
Provide more details with the above command about the jsx groups. Use verbose hi jsxXxxx to print more details where those groups were defined.
Not sure if I correctly understand what you mean. But:
This one is only there once I've opened an html file and the highlighting is working:
Totally unrelated question: what font / terminal are you using? Everything look so good and smooth compared to my vim :smile:
Right, do you think I should open an issue on vim-jsx-improve's repo?
Yes, open an issue with them let's see what they think.
font / terminal are you using
Roxterm with "SauceCodePro Nerd Font" which is the patched version of "Source Code Pro" from the nerd fonts repo.
hey lads -- I have the same issue, but for me, the following advice works:
@romgrk
And does other colorschemes work with JSX? Can you tell me the output of
echom &filetype
? Is it set tojavascript.jsx
, and if not doessetfiletype javascript.jsx
solves the issue?
(setting the filetype to javascript.jsx) solves the issue. Also, just renaming the file from .tsx
to .jsx
also works.
I tried looking for typescript-related issues in the vim-jsx-improve repo, but didn't find much:
https://github.com/neoclide/vim-jsx-improve/issues?q=is%3Aissue+sort%3Aupdated-desc+typescript
The https://github.com/neoclide/vim-jsx-improve/issues/16 issue suggested some fixes, but they don't seem to help either. Any ideas?
Sorry I'm not sure I understand, is there still an issue after you set the filetype to javascript.jsx
? If not, why isn't that enough?
The issue does indeed disappear when I set the filetype to javascript.jsx
.
How would I do that automatically for all .tsx
files, and should I do that in the first place?
I have something like this to auto-switch the filetype to what I want:
" $config_dir/after/ftplugin/javascript.vim
if &ft ==# 'javascript.jsx'
finish
end
function! s:set_jsx()
if &ft ==# 'javascript'
setfiletype javascript.jsx
end
endfunc
call timer_start(0, {->s:set_jsx()})
Note that typescriptreact
is the correct FT for typescript files.
For the typescript highlights not being shown due to HTHML groups not loaded, maybe you should add something like in after/ftplugin/typescript.vim
:
# pseudo-code
if not(html_is_loaded()):
load_runtime('syntax/html.vim')
I'll close the issue because I don't see any of the behavior above being the responsability of the colorscheme, but you can re-open if you see something that should be done here.
Hi, this color scheme is great. But it doesn't seem to work well with jsx / tsx files:
jsx:
tsx:
While it's working on html files: