You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.5 KiB
Markdown
109 lines
3.5 KiB
Markdown
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][1].
|
|
|
|
This bundle requires pangloss's [vim-javascript][2] syntax highlighting.
|
|
|
|
Vim support for inline XML in JS is remarkably similar to the same for PHP,
|
|
which you can find [here][3].
|
|
|
|
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 installed the appropriate
|
|
dependencies.
|
|
|
|
- A minimal ~/.vimrc which repros the issue you're having, as well as a
|
|
screenshot or gif of the issue (a paste 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 no
|
|
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
|
|
|
|
```viml
|
|
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
|
|
|
|
```viml
|
|
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][4]. Then simply execute
|
|
|
|
cd ~/.vim/bundle
|
|
git clone https://github.com/mxw/vim-jsx.git
|
|
|
|
(You can install [vim-javascript][2] in an analogous manner.)
|
|
|
|
### Vundle
|
|
|
|
You can also add vim-jsx using [Vundle][5]---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
|
|
|
|
|
|
[1]: http://facebook.github.io/react/ "React"
|
|
[2]: https://github.com/pangloss/vim-javascript "pangloss: vim-javascript"
|
|
[3]: https://github.com/mxw/vim-xhp "mxw: vim-xhp"
|
|
[4]: https://github.com/tpope/vim-pathogen "tpope: vim-pathogen"
|
|
[5]: https://github.com/VundleVim/Vundle "VundleVim: Vundle"
|