highlighting not working for ts tsx files

[alanbo]

I have the following .vimrc and all the plugins are installed:

" https://realpython.com/vim-and-python-a-match-made-in-heaven/
set nocompatible              " required
filetype off                  " required

" jump between matching html/xml/jxs tags
runtime macros/matchit.vim

" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" adds color to commented out code
hi Comment ctermfg=LightBlue

" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')

" let Vundle manage Vundle, required
Plugin 'gmarik/Vundle.vim'

Plugin 'tmhedberg/SimpylFold'
Plugin 'vim-scripts/indentpython.vim'
Plugin 'vim-syntastic/syntastic'
Plugin 'nvie/vim-flake8'
Plugin 'jnurmine/Zenburn'
Plugin 'scrooloose/nerdtree'
Plugin 'kien/ctrlp.vim'
Plugin 'tpope/vim-fugitive'
Plugin 'tomasiser/vim-code-dark'
Plugin 'sheerun/vim-polyglot'
Plugin 'chemzqm/vim-jsx-improve' 
Plugin 'tpope/vim-surround'
Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'

" Typescript support
" Plugin 'Quramy/tsuquyomi'
Plugin 'leafgarland/typescript-vim'
Plugin 'peitalin/vim-jsx-typescript'

" comments out highlighted code with gcc
Plugin 'tpope/vim-commentary'
" add all your plugins here (note older versions of Vundle
" used Bundle instead of Plugin)

" ...

" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required


set encoding=utf-8
 
" Enable folding
set foldmethod=indent
set foldlevel=99

" Enable folding with the spacebar
nnoremap <space> za

let python_highlight_all=1

colorscheme codedark

set nu
set clipboard=unnamed

" Open NERD Tree when no file specified.
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif

" Open NERD Tree when directory is specified.
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 1 && isdirectory(argv()[0]) && !exists("s:std_in") | exe 'NERDTree' argv()[0] | wincmd p | ene | endif

" map Ctrl+n to toggling the NERD Tree
map <C-n> :NERDTreeToggle<CR>

" Close NERD Tree when everything else is closed.
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif

" Keep NERD Tree open in new tabs
autocmd BufWinEnter * NERDTreeMirror

" Sets java script and html indentation to 2 spaces.
autocmd FileType html setlocal ts=2 sts=2 sw=2
autocmd FileType javascript setlocal ts=2 sts=2 sw=2
autocmd FileType json setlocal ts=2 sts=2 sw=2

let g:NERDTreeNodeDelimiter = "\u00a0"

" Preven Ctrlp from searching node modules and git
let g:ctrlp_custom_ignore = 'node_modules\|DS_Store\|git'

filetype plugin on
set omnifunc=syntaxcomplete#Complete


syntax on

The syntax highlighting for ts and tsx files doesn't work.
Is it the issue with the plugin? or some of the settings are wrong?

[alanbo]

Also, I tried disabling all the other plugins. It doesn't help. File is being recognised as typescript or typescript.jsx. If I type :syntax it will show typescript syntax file and :set syntax shows syntax=typescript.tsx. It just doesn't color the text in any other way than default vim colours. It's same for both yats.vim and vim-jsx-typescript. Any other custom file type i.e. jsx, python etc. has proper highlighting. Typescript is the only problem

[JerzySpendel]

@alanbo It doesn't work for me neither. And python / javascript works as well.

[muningis]

Did you manage to figure it out? I'm having same issue with JSX (regular stuff seems to be coloured to some extent)

[sliminality]

In general you can tell Vim to recognize files ending in .tsx as typescript by running

set filetype=typescript

in the buffer, or adding this to your .vimrc:

augroup SyntaxSettings
    autocmd!
    autocmd BufNewFile,BufRead *.tsx set filetype=typescript
augroup END

[exapsy]

This brings a new problem. Typescript language server excepts from a typescript file to not have JSX in it. Which means that <> is considered a type assertion, JSX is not recognized as JSX but as regular Typescript syntax and the list goes on. :( TSX files should normally stay as "filetype=typescriptreact" files, otherwise, you're just asking for bugs and breaking features to happen :/

[PezCoder]

Instead use peitalin/vim-jsx-typescript library for jsx highlighting, it seem to work well along with leafgarland/typescript-vim

[Mofiqul]

I am also having the same issue. All other files work as expected but ts files show only the neovim default syntax

Neovim Version

NVIM v0.5.0-dev
Build type: RelWithDebInfo
Lua 5.1
Compilation: /usr/bin/cc -g -O2 -fdebug-prefix-map=/build/neovim-xtw7k8/neovim-0.5.0+ubuntu1+git202006111321-e786583-00e710e=. -fstack-protector-strong -Wformat -Werror=format-security -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1 -O2 -g -Og -g -Wall -Wextra -pedantic -Wno-unused-parameter -Wstrict-prototypes -std=gnu99 -Wshadow -Wconversion -Wmissing-prototypes -Wimplicit-fallthrough -Wvla -fstack-protector-strong -fno-common -fdiagnostics-color=auto -DINCLUDE_GENERATED_DECLARATIONS -D_GNU_SOURCE -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -DMIN_LOG_LEVEL=3 -I/build/neovim-xtw7k8/neovim-0.5.0+ubuntu1+git202006111321-e786583-00e710e/build/config -I/build/neovim-xtw7k8/neovim-0.5.0+ubuntu1+git202006111321-e786583-00e710e/src -I/build/neovim-xtw7k8/neovim-0.5.0+ubuntu1+git202006111321-e786583-00e710e/.deps/usr/include -I/usr/include -I/build/neovim-xtw7k8/neovim-0.5.0+ubuntu1+git202006111321-e786583-00e710e/build/src/nvim/auto -I/build/neovim-xtw7k8/neovim-0.5.0+ubuntu1+git202006111321-e786583-00e710e/build/include
Compiled by buildd@lcy01-amd64-017

Features: +acl +iconv +tui
See ":help feature-compile"

   system vimrc file: "$VIM/sysinit.vim"
  fall-back for $VIM: "/usr/share/nvim"

Run :checkhealth for more info

[scinscinscin]

For anyone who stumbled upon this from google, here's the snippet i found that makes typescriptreact work

" inside vim-plug or your plugin manager
Plug 'peitalin/vim-jsx-typescript'

" make it so that tsx files use ts syntax highlighting, while the jsx plugin handles the jsx parts
augroup twig_ft
  au!
  autocmd BufNewFile,BufRead *.tsx   set syntax=typescript
augroup END

This sets the syntax highlighting of .tsx files to that of regular typescript's.
This prevents the problem that exapsy mentioned because you're only messing with the syntax highlighting association.
And then you can use peitalin/vim-jsx-typescript to highlight JSX because regular typescript doesn't have highlighting for that.

[srquinn21]

From the peitlan/vim-jsx-typescript README:

Changelog: filetypes were updated from typescript.tsx to typescriptreact Please set filetypes as typescriptreact, not typescript.tsx as in prior versions in your .vimrc if you have any issues

So the following fixed it for me:

Plug 'peitalin/vim-jsx-typescript'

augroup SyntaxSettings
    autocmd!
    autocmd BufNewFile,BufRead *.tsx set filetype=typescriptreact
augroup END