Syntax highlight works for gvim but not for terminal vim

Question

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

Below is the screenshot of the JSX syntax highlight in terminal version Vim

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.

Answer 1

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.

Answer 2

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