mirrors/vim-jsx-typescript
1
0
Fork 0
mirror of https://github.com/peitalin/vim-jsx-typescript.git synced 2025-12-21 10:43:09 +00:00
Code Issues Projects Releases Packages Wiki Activity
React JSX syntax highlighting for vim and Typescript
112 commits 1 branch 0 tags 7.5 MiB
Find a file
Exact
Peita Lin 22df470d92
 Update README.md
2020-12-03 16:34:59 +10:00
after Bring in typescript indentation file as base 2020-10-29 09:26:50 -07:00
ftdetect Change typescript.tsx to typescriptreact 2020-10-29 08:40:33 -07:00
.gitignore gitignore ds_store 2018-10-10 16:37:57 +10:00
LICENSE Create License 2018-08-19 19:08:14 -07:00
README.md Update README.md 2020-12-03 16:34:59 +10:00
screen1.jpg new screenshots 2018-09-09 16:46:42 +10:00
screen2.jpg update screenshots + JSX generics colors 2019-03-06 14:56:22 +10:00
screen4.jpg screenshots 2018-09-09 16:20:45 +10:00
screen5.jpg update generics for more exotic type signatures 2019-09-27 23:27:27 +10:00
screen9.jpg update generics for more exotic type signatures 2019-09-27 23:27:27 +10:00

README.md

vim-jsx-typescript

Syntax highlighting and indentation for JSX in Typescript (typescriptreact filetypes).

vim-jsx-typescript works with the built-in typescript syntax highlighter and indentation engine for recent versions of Vim/Neovim.

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

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

alt tag alt tag

Installation

You need to install [Vundle] or [vim-plug]: https://github.com/junegunn/vim-plug --- just add the following lines to your ~/.vimrc:

Vundle:

Plugin 'leafgarland/typescript-vim'
Plugin 'peitalin/vim-jsx-typescript'

Vim-plug:

Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'

To install from within vim, use the commands below.

:so ~/.vimrc
:PluginInstall

" OR for vim-plug:
:so ~/.vimrc
:PlugInstall

Note you can include .jsx files as typescriptreact files for syntax highlighting.

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

Set jsx-tag colors in vimrc, for example:

" dark red
hi tsxTagName guifg=#E06C75
hi tsxComponentName guifg=#E06C75
hi tsxCloseComponentName guifg=#E06C75

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

" yellow
hi tsxAttrib guifg=#F8BD7F cterm=italic

alt tag

There is support for JSX Generics (Typescript 2.9). You can set the colors by adding this to your .vimrc settings

" light-grey
hi tsxTypeBraces guifg=#999999
" dark-grey
hi tsxTypes guifg=#666666

alt tag alt tag

Other keywords you can change coloring:

hi ReactState guifg=#C176A7
hi ReactProps guifg=#D19A66
hi ApolloGraphQL guifg=#CB886B
hi Events ctermfg=204 guifg=#56B6C2
hi ReduxKeywords ctermfg=204 guifg=#C678DD
hi ReduxHooksKeywords ctermfg=204 guifg=#C176A7
hi WebBrowser ctermfg=204 guifg=#56B6C2
hi ReactLifeCycleMethods ctermfg=204 guifg=#D19A66