I am new to vim and I want to code in vim. I have installed the necessary plugins for syntax highlighting JSX in TypeScript and everything works fine for GUI version of Vim but not for terminal-based Vim. Please help me figure out the issue. Below are the plugins that I am using for syntax highlighting:

  1. For TypeScript: https://github.com/leafgarland/typescript-vim
  2. For JSX in TypeScript: https://github.com/peitalin/vim-jsx-typescript

I am using Vundle to install plugins. I tried to make some customizations in the colors as given in the README section of the second plugin mentioned above. According to that when I used the hi command, it did not have any effect on terminal-based Vim but it worked perfectly fine on GUI based Vim. I am trying to setup syntax highlight for JSX in TypeScript for React Development and I have installed above plugins to achieve that. Below is the content of my .vimrc file.

set nocompatible                " choose no compatibility with legacy vi syntax enable
set encoding=utf-8
set showcmd                     " display incomplete commands
set t_Co=256
filetype plugin indent on       " load file type plugins + indentation

"" monkai theme
syntax enable
colorscheme monokai

set nu
set guifont=monacob\ bold\ 9

highlight ColorColumn ctermbg=gray
set colorcolumn=80

"" Whitespace
set nowrap                      " don't wrap lines
set tabstop=2 shiftwidth=2      " a tab is two spaces (or set this to 4)
set expandtab                   " use spaces, not tabs (optinal)
set backspace=indent,eol,start  " backspace through everything in insert mode

"" Searching
set hlsearch                    " highlight matches
set incsearch                   " incremental searching
set ignorecase                  " searches are case insensitive...
set smartcase                   " ... unless they contain at least one capital letter

" set the runtime path to include Vundle and initialize
set rtp +=~/.vim/bundle/Vundle.vim
call vundle#begin()
" 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 'tpope/vim-fugitive.git'
Plugin 'tpope/vim-rails'
Plugin 'leafgarland/typescript-vim'
Plugin 'peitalin/vim-jsx-typescript'
" The following are examples of different formats supported.
" Keep Plugin commands between vundle#begin/end.

" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required
" autocmd FileType typescript.tsx setlocal commentstring={/*\ %s\ */}
autocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescript.tsx
autocmd BufNewFile,BufRead *.ts,*.js set filetype=typescript.jsx

" dark red
hi tsxTagName guifg=#E06C75

" orange
hi tsxCloseString guifg=#F99575
hi tsxCloseTag guifg=#F99575
hi tsxAttributeBraces guifg=#F99575
hi tsxEqual guifg=#F99575

" yellow
hi tsxAttrib guifg=#F8BD7F cterm=italic

Below is the screenshot of the JSX syntax highlight in GUI version of Vim enter image description here

Below is the screenshot of the JSX syntax highlight in terminal version Vim enter image description here

As we can see in the .vimrc and screenshots, the JSX tag colors etc.. declared at the end of the file are working fine for Gvim but not working for terminal-based vim. Please help me understand what wrong I am doing here.

  • 1
    Welcome to this site! tivn's answer is very probably the correct one. On a totally different topic but which might still be useful: You don't need set nocompatible since is it off by default if you have a vimrc and it is generally a good idea to use the complete form of the commands and options in your vimrc (like set number and highlight instead of set nu and hi) it is much more readable – statox Sep 19 '18 at 9:15
  • 1
    I know saying thanks is not allowed in the community but being new to vim these kinds of suggestion really helps so Thank you for the suggestion. I have made the suggested changes. :) – Bhasky93 Sep 19 '18 at 14:31

guifg or guibg only works for GUI vim. For terminal version you will need to add other attributes: ctermfg, ctermbg.

Type :highlight without any attributes in your vim to show currenly set color settings.

  • 1
    Or termguicolors if your term supports it – D. Ben Knoble Sep 19 '18 at 12:52
  • termguicolors worked for me. – Bhasky93 Sep 19 '18 at 14:25

Try maxmellon/vim-jsx-pretty. The best React JSX/TSX syntax plugin for vim I have ever used.

  • Welcome to this site! Your answer would be much more useful for other people if you explained why this is the best plugin you used and how it solves OP's problem. – statox Jan 13 at 17:52

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.