2

I'm trying to set up syntax highlighting for typescript ts and tsx files. None of it works. Default vim highlighting is being applied instead. I tried both 'leafgarland/typescript-vim' and 'HerringtonDarkholme/yats.vim' plugins and nothing works. That's my .vimrc file:

set nocompatible              " required
filetype off                  " required

" set filetypes as typescript.tsx
autocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescript.tsx
autocmd BufNewFile,BufRead *.ts set filetype=typescript

" 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 'HerringtonDarkholme/yats.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

Is it some missing option or some conflict? Jsx and js syntax highlighting works perfectly.

5
  • You've commented out the required plugin: " Plugin 'leafgarland/typescript-vim'. Why do you expect it to work? Commented Feb 18, 2019 at 2:44
  • I doesn't work when it is on either. I tried every option, switching on and off all the plugins in case something is in conflict. I think something doesn't connect typescript type file to the leafgarland/typescript-vim plugin but I can't figure out what it is. Commented Feb 18, 2019 at 4:12
  • I'll update the code sample so that it doesn't confuse people. Commented Feb 18, 2019 at 4:12
  • Comment out every other Plugin and check. If typescript highlighting works uncomment plugins in groups. Commented Feb 18, 2019 at 12:24
  • 1
    I tried it. It doesn't help. Also, 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 Commented Feb 18, 2019 at 19:31

1 Answer 1

1

I had the same issue. Swapping these two:

Plugin 'leafgarland/typescript-vim'
Plugin 'HerringtonDarkholme/yats.vim'

Like so:

Plugin 'HerringtonDarkholme/yats.vim'
Plugin 'leafgarland/typescript-vim'

seems to do it for me.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.