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)