search

peitalin / vim-jsx-typescript

React JSX syntax highlighting for vim and Typescript
The Unlicense
306 stars 29 forks source link

Conflicts with JavaScript JSX #2

Closed BlakeWilliams closed 5 years ago

BlakeWilliams commented 6 years ago

I've been running into weird issues when using JSX in JavaScript files after installing this plugin.

After disabling this plugin JSX in JavaScript files returns to normal. I'm using https://github.com/mxw/vim-jsx for JSX highlighting in JavaScript.

Maybe one solution could be to make the extension typescript.tsx instead of typescript.jsx?

peitalin commented 6 years ago

Hi Blake, I don't actually use vim-jsx for JSX highlighting in Javascript. I have in my vimrc:

autocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescript.jsx
autocmd BufNewFile,BufRead *.ts,*.js set filetype=typescript.jsx

For me vim-jsx-typescript was a replacement for vim-jsx.

BlakeWilliams commented 6 years ago

I don't actually use vim-jsx for JSX highlighting in Javascript.

I work on JS and TS projects so I have to have both. I think the issue is that the project I linked in the comment above sets javascript.jsx as the filetype so I think it and this plugin are conflicting with one another.

peitalin commented 6 years ago

hmmm yes, this project was originally forked from vim-jsx. I only use leafgarland/typescript-vim for syntax highlighting for both .js and .ts. Then vim-jsx-typescript does syntax highlighting for both .jsx and .tsx files. Does it work for both .js and .ts if you use just:

Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'

and set:

autocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescript.jsx
autocmd BufNewFile,BufRead *.ts,*.js set filetype=typescript.jsx
BlakeWilliams commented 6 years ago

Ah yeah, giving that a try.

Looks mostly fine, there's a few edge cases like ternaries in JSX. I believe the : is causing an issues where the closing } is highlighting red as if there was something invalid in the JSX

  View {count} {count === 1 ? 'Thing' : 'Things'}