Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MaxMEllon/vim-jsx-pretty
:flashlight: [Vim script] JSX and TSX syntax pretty highlighting for vim.
https://github.com/MaxMEllon/vim-jsx-pretty
jsx jsx-syntax react-syntax tsx typescript-tsx vim-javascript vim-jsx vim-jsx-pretty
Last synced: about 1 month ago
JSON representation
:flashlight: [Vim script] JSX and TSX syntax pretty highlighting for vim.
- Host: GitHub
- URL: https://github.com/MaxMEllon/vim-jsx-pretty
- Owner: MaxMEllon
- License: mit
- Created: 2016-07-03T21:24:33.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-01-12T07:51:13.000Z (over 3 years ago)
- Last Synced: 2024-06-23T04:56:29.800Z (3 months ago)
- Topics: jsx, jsx-syntax, react-syntax, tsx, typescript-tsx, vim-javascript, vim-jsx, vim-jsx-pretty
- Language: Vim script
- Homepage:
- Size: 173 KB
- Stars: 963
- Watchers: 14
- Forks: 38
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# vim-jsx-pretty
The React syntax highlighting and indenting plugin for vim. Also supports the typescript tsx file.
## Features
- 📦 Support JSX highlighting and indenting out of the box. No dependencies.
- 💯 Fully implemented the JSX syntax specification. [https://github.com/facebook/jsx](https://github.com/facebook/jsx)
- ✨ Support React syntax highlighting and indenting for JSX and typescript TSX files.
- 🏷 Support JSX syntax highlighting and indenting inside the [tagged template](https://github.com/developit/htm) string.
- 🎨 Support highlighting the close tag separately from the open tag (set `let g:vim_jsx_pretty_highlight_close_tag = 1` in your vimrc).
- 💪 Many more [corner test cases](test.jsx) covered.
- 💅 [Reasonable syntax highlight groups](#syntax-group-list), easy for customization.## Demo
### Syntax
|vim-jsx-pretty
(add colorful config)|vim-jsx-pretty|
|---|---|
|![vim-jsx-pretty colorful](https://raw.githubusercontent.com/MaxMEllon/demos/master/vim-jsx-pretty/vim-jsx-pretty-colorful.png)|![vim-jsx-pretty](https://raw.githubusercontent.com/MaxMEllon/demos/master/vim-jsx-pretty/vim-jsx-pretty.png)|### Auto indent
![Auto indent demo](https://raw.githubusercontent.com/MaxMEllon/demos/master/vim-jsx-pretty/auto-indent.gif)
### Support typescript
![typescript demo](https://user-images.githubusercontent.com/9594376/32855974-beb2432a-ca86-11e7-99a4-85c2630aa5d5.png)
## Installation
### vim-plug [https://github.com/junegunn/vim-plug](https://github.com/junegunn/vim-plug)
your `~/.vimrc`:
- No dependencies
```vim
Plug 'maxmellon/vim-jsx-pretty'
```- with: [yuezk/vim-js](https://github.com/yuezk/vim-js) (**Recommended but not required**)
```vim
Plug 'yuezk/vim-js'
Plug 'maxmellon/vim-jsx-pretty'
```- if you want to highlight tsx files.
```vim
Plug 'HerringtonDarkholme/yats.vim'
" or Plug 'leafgarland/typescript-vim'
Plug 'maxmellon/vim-jsx-pretty'
```
- Execute command in vim:```vim
:so ~/.vimrc
:PlugInstall
```### Using Vim8's package manager
```sh
mkdir -p ~/.vim/pack/vim-jsx-pretty/start
cd $_
git clone [email protected]:MaxMEllon/vim-jsx-pretty.git
```#### For Neovim
```sh
mkdir -p ~/.local/share/nvim/site/vim-jsx-pretty/start
cd $_
git clone [email protected]:MaxMEllon/vim-jsx-pretty.git
```## ⚠️ Work with `vim-polyglot`
Since `vim-polyglot` has already embedded this plugin, if you have installed `vim-polyglot`, you don't need to install this plugin anymore. But the bugfix for this plugin may not ship in `vim-polyglot` in time.
If you still want to use this plugin, make sure that you put this plugin **ahead** of `vim-polyglot`, and add `let g:polyglot_disabled = ['jsx']` to your `vimrc`.
## Syntax group list
|name|place|
|---|---|
|jsxElement| `text`
`~~~~~~~~~~~~~~~~~~~~~~~~~~~`|
|jsxTag| ``
`~~~~~~~~~~~~~~~~~`|
|jsxTagName| ``
`_~~~_____________`|
|jsxComponentName| ``
`_~~~~~~~~_` |
|jsxAttrib| ``
`_____~~__________`|
|jsxEqual| ``
`_______~_________`|
|jsxString| ``
`________~~~~~~~~_`|
|jsxCloseTag| ``
`~~~~~~` |
|jsxCloseString| ``
`_____~~` |
|jsxDot| ``
`_______~______` |
|jsxNamespace| ``
`____~____` |
|jsxPunct| ``
`~___~~~___~` |## Configuration
|name|default|description|
|---|---|---|
|`g:vim_jsx_pretty_disable_js`|0|Disable the syntax highlighting for js files|
|`g:vim_jsx_pretty_disable_tsx`|0|Disable the syntax highlighting for tsx files|
|`g:vim_jsx_pretty_template_tags`|`['html', 'jsx']`|highlight JSX inside the tagged template string, set it to `[]` to disable this feature|
|`g:vim_jsx_pretty_highlight_close_tag`|0|highlight the close tag separately from the open tag|
|`g:vim_jsx_pretty_colorful_config`|0|colorful config flag|Colorful style (**vim-javascript only**)
```vim
let g:vim_jsx_pretty_colorful_config = 1 " default 0
```## Inspiration
- [vim-jsx](https://github.com/mxw/vim-jsx)
## LICENSE
[MIT](./LICENSE.txt)