petersendidit / vim-jsx

React JSX syntax highlighting and indenting for vim.

vim-jsx

Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.

vim-jsx is not a JavaScript syntax package, so in order to use it, you will also need to choose a base JS highlighter. pangloss/vim-javascript is the recommended package---it is vim-jsx's "official" dependency, and the only package against which it is regularly tested. However, vim-jsx makes a best effort to support other JavaScript syntax packages, including:

• pangloss/vim-javascript
• jelera/vim-javascript-syntax
• othree/yajs

Notably, the system vim JavaScript syntax is not supported, due to its over-simplicity.

Vim support for inline XML in JS is remarkably similar to the same for PHP, which you can find here.

Troubleshooting

If you're experiencing weird highlighting or indenting throughout your JSX code, please file a GitHub issue which includes the following:

• A brief affirmation that you've read the README and have installed one of the supported dependencies (and which one you're using).

• A minimal ~/.vimrc which repros the issue you're having, as well as both a paste and a screenshot of the issue (a paste alone is insufficient, since it doesn't show me the specific highlighting or indenting problem). To obtain a minimal ~/.vimrc, simply bisect your ~/.vimrc by adding finish at various points in the file. (You can likewise bisect your included plugins by selectively including only half of them, then a quarter, etc.).

Most of the issues filed result from failures to install vim-javascript or conflicts with existing JS syntax or indent files---so failing to indicate that you've ruled those issues out may result in your issue being closed with minimal comment.

(Please feel free to disregard all this for feature requests and more corner-case bugs.)

Usage

By default, JSX syntax highlighting and indenting will be enabled only for files with the .jsx extension. If you would like JSX in .js files, add

let g:jsx_ext_required = 0

to your .vimrc or somewhere in your include path. If you wish to restrict JSX to files with the pre-v0.12 @jsx React.DOM pragma, add

let g:jsx_pragma_required = 1

to your .vimrc or somewhere in your include path.

Please note that this package does not support syntax folding, and has not been tested with either JavaScript or XML folding enabled.

Installation

Pathogen

The recommended installation method is via Pathogen. Then simply execute

cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx.git

(You can install vim-javascript in an analogous manner.)

Vundle

You can also add vim-jsx using Vundle---just add the following lines to your ~/.vimrc:

Plugin 'pangloss/vim-javascript'
Plugin 'mxw/vim-jsx'

To install from within vim, use the commands below.

:so ~/.vimrc
:PluginInstall

Alternatively, use the command below to install the plugins from the command line.

vim +PluginInstall +qall

Manual Installation

If you have no ~/.vim/after directory, you can download the tarball or zip and copy the contents to ~/.vim.

If you have existing ~/.vim/after files, copy the syntax and indent files directly into their respective destinations. If you have existing after syntax or indent files for Javascript, you'll probably want to do something like

mkdir -p ~/.vim/after/syntax/javascript
cp path/to/vim-jsx/after/syntax/jsx.vim ~/.vim/after/syntax/javascript/jsx.vim
mkdir -p ~/.vim/after/indent/javascript
cp path/to/vim-jsx/after/indent/jsx.vim ~/.vim/after/indent/javascript/jsx.vim