https://github.com/neoclide/vim-jsx-improve

Syntax and indent plugin for React jsx.
https://github.com/neoclide/vim-jsx-improve

jsx vim

Last synced: 5 days ago
JSON representation

Syntax and indent plugin for React jsx.

• Host: GitHub
• URL: https://github.com/neoclide/vim-jsx-improve
• Owner: neoclide
• License: mit
• Created: 2016-12-06T09:22:35.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-02-28T18:28:46.000Z (almost 3 years ago)
• Last Synced: 2024-12-31T14:14:51.295Z (12 days ago)
• Topics: jsx, vim
• Language: Vim script
• Homepage:
• Size: 85 KB
• Stars: 285
• Watchers: 9
• Forks: 23
• Open Issues: 3
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGES.markdown
  • License: LICENSE

Awesome Lists containing this project

README

        
# vim-jsx-improve

[![](http://img.shields.io/github/issues/neoclide/vim-jsx-improve.svg)](https://github.com/neoclide/vim-jsx-improve/issues)

[![](http://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

Makes your javascript files support React jsx correctly.

Javascript syntax from [pangloss/vim-javascript](https://github.com/pangloss/vim-javascript)

Jsx highlight and indent code changed from [MaxMEllon/vim-jsx-pretty](https://github.com/MaxMEllon/vim-jsx-pretty)

- Fixed syntax highlighting and indentation for React jsx files.

- Works well with xml.vim

This plugin have no dependency, all the code you need for jsx and javascript is

included.

**Note:** you need to disable **vim-javascript** plugin if have installed, I have to

change some highlight group to make it works with jsx.

### Installation

Use pathogen or vundle is recommended. Vundle:

    Plugin 'neoclide/vim-jsx-improve'

This plugin support `javascriptreact` filetype which is introduced on newer

version of vim8 and neovim.

Use `let g:jsx_improve_javascriptreact = 0` to disable javascriptreact support.

### Quick jump to function braces

You can use `[[` `]]` `[]` `][` to quick jump to `{` `}` position of functions, set `g:jsx_improve_motion_disable` to `1` to disable it.

### New Syntax group

this is a new syntax group .if you want highlight it ,your colorscheme should  add `jsxEndComponentName` color.

|name|place|

|---|---|

|jsxEndComponentName| ``
`__~~~~~~~~_` |

### GIF

![2016-12-10 01_27_59](https://cloud.githubusercontent.com/assets/251450/21058283/26d3b946-be78-11e6-8b1e-78e146ec3496.gif)

The colorscheme is [gruvbox](https://github.com/morhetz/gruvbox)

The keystroke visualizer is [keycastr](https://github.com/sdeken/keycastr)

### Feed back welcome

Feel free to open a ticket if your have problem with this plugin.