Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting breaks inside typescript files when type casting #114

Closed
pbondoer opened this issue Dec 19, 2019 · 9 comments
Closed
Labels

Comments

@pbondoer
Copy link

When using <Foo>bar type casts, syntax highlighting and indentation completely break.

https://uplr.it/3aca0.png

I initially thought this might be an issue with typescript-vim but upon further investigation I can confirm this only happens when both vim-jsx-pretty and typescript-vim are enabled.

Minimal .vimrc to reproduce (with vim-plug)

call plug#begin()
Plug 'leafgarland/typescript-vim'
Plug 'MaxMEllon/vim-jsx-pretty'
call plug#end()

Additional discussion

See leafgarland/typescript-vim#134 for previous discussion which prompted me to create this issue.


Please let me know if I'm missing something obvious or if you need any extra info 👍

@yuezk
Copy link
Collaborator

yuezk commented Dec 19, 2019

Thanks for your reporting. This is a known issue and it's difficult to fix, but I'll try it later.

@yuezk yuezk added the syntax label Dec 19, 2019
@yuezk
Copy link
Collaborator

yuezk commented Dec 19, 2019

@pbondoer For now, I recommend you to use the as syntax to cast the type. That is:

const foo = bar as string 

https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator

@pbondoer
Copy link
Author

I looked into vim-jsx-typescript as an alternative but it seems to suffer from the same issue. I've opened an issue on their tracker:

peitalin/vim-jsx-typescript#21

However, I've chosen to use that plugin instead for now, as vim-jsx-pretty with TypeScript support on (using g:vim_jsx_pretty_disable_tsx = 1) breaks even non JSX files, whereas the other plugin is scoped to files with the .tsx extension.

Perhaps it should be considered doing the same, as it seems the extension is required, as per TypeScript docs.

@yuezk
Copy link
Collaborator

yuezk commented Dec 19, 2019

@pbondoer I came up with a solution for this issue, you can update this plugin and test it.

For the extension problem, I will update it soon.

@pbondoer
Copy link
Author

@yuezk It seems to work on my simple test case and on complex files that used to have issues. I'll let you know if anything weird pops up.

However, brackets are not getting any highlight. Though I'm willing to live with that:

https://uplr.it/44b8b.png

Thank you! ❤️

@yuezk
Copy link
Collaborator

yuezk commented Dec 19, 2019

I noticed that and just committed a change, you can update it again.

@pbondoer
Copy link
Author

@yuezk It now highlights string, none on the brackets though. Is it intentional? I would expect them to stand out in the same way as stands out or parametric angle brackets stand out in Promise<FooBar>.

@yuezk
Copy link
Collaborator

yuezk commented Dec 19, 2019

@pbondoer Added the highlight for brackets. Update it again.

@pbondoer
Copy link
Author

Seems to work good on a large test file! I'll close this issue. Feel free to re-open if needed 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants