https://github.com/peitalin/vim-jsx-typescript

React JSX syntax highlighting for vim and Typescript
https://github.com/peitalin/vim-jsx-typescript

jsx tsx typescript typescript-vim vim vim-jsx vim-tsx

Last synced: about 14 hours ago
JSON representation

React JSX syntax highlighting for vim and Typescript

• Host: GitHub
• URL: https://github.com/peitalin/vim-jsx-typescript
• Owner: peitalin
• License: unlicense
• Created: 2017-02-16T03:46:02.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-01-26T19:11:45.000Z (almost 4 years ago)
• Last Synced: 2024-12-17T11:06:56.656Z (8 days ago)
• Topics: jsx, tsx, typescript, typescript-vim, vim, vim-jsx, vim-tsx
• Language: Vim script
• Size: 7.27 MB
• Stars: 306
• Watchers: 4
• Forks: 29
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](./screen1.jpg)

![alt tag](./screen2.jpg)

## 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](./screen4.jpg)

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](./screen5.jpg)

![alt tag](./screen9.jpg)

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

```