VIM How to enable .ts .tsx .js (for front-end) code highlight?

Question

I have .vimrc plugins

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

Plugin 'VundleVim/Vundle.vim'
Plugin 'nanotech/jellybeans.vim'
" Plugin 'vim-airline/vim-airline'
" Plugin 'vim-airline/vim-airline-themes'
Plugin 'scrooloose/nerdtree'
Plugin 'kien/ctrlp.vim'
Plugin 'tpope/vim-surround'
" JavaScript
Plugin 'pangloss/vim-javascript'
Plugin 'leafgarland/typescript-vim'
Plugin 'maxmellon/vim-jsx-pretty'

but highlighting doesn't work.

also, I have a rule

syntax enable      " syntax highlighting

Answer 1

I tried to use

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

and it works.

Answer 2

The best thing to do is enable filetype detection:

filetype on

Vim defaults to setting .tsx files as typescriptreact (8.1.2100 for me at least).

To enable filetype-plugins and indent scripts (recommended):

filetype plugin indent on