peitalin / vim-jsx-typescript

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

No effect; errors on new lines #27

Open gronka opened 4 years ago

gronka commented 4 years ago

Sorry, this will be a bit crude

From vimrc:

Plugin 'MaxMEllon/vim-jsx-pretty'       
Plugin 'leafgarland/typescript-vim'  " highlight TS                                                               
Plugin 'peitalin/vim-jsx-typescript'  " highlight TSX; requires typescript-vim

Typescript blocks of code do not highlight, and newline indentations have an error. If I start a new line after a component block is closed with '>', it will be given 0 indentation and a closing bracket '>'. The filetype is correctly set to typescript.tsx.

I'm using function components in the spirit of react hooks (my example should be the same as pure components I believe).

This issues were observed in this simple file. The bracket error occurs when I create a new line at the closing '>' for Sidebar.

import { Link } from "react-router-dom"; 
import { Sidebar } from "./Sidebar";                                 

export const AppSidebar = () => (                                               
    <Sidebar                                                                    
        visible={true}                                                          
        activeItem='executive'                                                  
        //size='mini'                                                           
       //color='indigo'                                                        
    >                                                                           
       <Link to="/">Home</Link>                                                
       <Link to="/one">One</Link>                                              
       <Link to="/two">Two</Link>                                              

    </Sidebar>                                                                  
)          

Workaround: I'm using these packages in vimrc and highlighting works as expected (albeit a bit slower as some users have noted):

Plugin 'yuezk/vim-js'  " recommended by vim-jsx-pretty                          
Plugin 'HerringtonDarkholme/yats.vim'  " recommended by vim-jsx-pretty                                
Plugin 'MaxMEllon/vim-jsx-pretty'
unphased commented 3 years ago

Sorry my comment is a little bit of a non-sequitur, but I have been having weird issues with tsx highlighting lately. Will try to summarize:

On Ubuntu 18.04:

neovim 0.4.4 stable: These plugins don't work. I get massive swathes of missing highlighting and incorrect highlighting. Without any of these plugins, I get absolutely zero syntax highlighting in tsx files. neovim v0.5.0-828-g0a95549d6: No plugins needed for decent tsx highlighting vim 8.2 patches 1-2071: No plugins needed for decent tsx highlighting

Conclusion: I am not using any jsx/tsx highlighting vim plugins anymore, and hoping that neovim nightly improves in stability. Trying to work out the correct set of plugins to use with neovim 0.4.4 seems pointless if I can just run vim instead. I tend to bounce back and forth between vim and neovim in the course of testing various capabilities.