@ -5,7 +5,18 @@ Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax
transformer which translates inline XML document fragments into JavaScript
transformer which translates inline XML document fragments into JavaScript
objects. It was developed by Facebook alongside [React][1].
objects. It was developed by Facebook alongside [React][1].
This bundle requires pangloss's [vim-javascript][2] syntax highlighting.
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][2] 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. However, the system XML syntax package is an implicit
dependency.
Vim support for inline XML in JS is remarkably similar to the same for PHP,
Vim support for inline XML in JS is remarkably similar to the same for PHP,
which you can find [here][3].
which you can find [here][3].
@ -13,26 +24,25 @@ which you can find [here][3].
Troubleshooting
Troubleshooting
---------------
---------------
If you're experiencing weird highlighting or indenting throughout your JSX
If you're experiencing incorrect highlighting or indenting in your JSX code,
code, please file a GitHub issue which includes the following:
please file a GitHub issue which includes the following:
- A brief affirmation that you've read the README and installed the appropriat e
- A brief affirmation that you've read the README and have installed one of th e
dependencies.
supported dependencies (and the name of the one you're using) .
- A minimal ~/.vimrc which repros the issue you're having, as well as a
- A minimal ~/.vimrc which repros the issue you're having, as well as both a
screenshot or gif o f the issue (a paste is insufficient, since it doesn't
paste and a screenshot of the issue (a paste alon e is insufficient, since it
show m e the specific highlighting or indenting problem). To obtain a minimal
doesn't illustrat e the specific highlighting or indenting problem). To
~/.vimrc, simply bisect your ~/.vimrc by adding `finish` at various points in
obtain a minimal ~/.vimrc, simply bisect your ~/.vimrc by adding `finish` at
the file. (You can likewise bisect your included plugins by selectively
various points in the file. (You can likewise bisect your included plugins
including only half of them, then a quarter, etc.).
by selectively including only half of them, then a quarter, etc.).
Most of the issues filed result from failures to install vim-javascript or
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
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
you've ruled those issues out may result in your issue being closed with
comment.
minimal comment.
(Please feel free to disregard all this for feature requests and more
(Please feel free to disregard all this for feature requests.)
corner-case bugs.)
Usage
Usage
-----
-----
@ -53,8 +63,28 @@ let g:jsx_pragma_required = 1
to your .vimrc or somewhere in your include path.
to your .vimrc or somewhere in your include path.
Please note that this package does not support syntax folding, and has not been
Frequently Asked Questions
tested with either JavaScript or XML folding enabled.
--------------------------
- _How come syntax highlighting doesn't work at all?_
This is the only question I'll answer with another question---Which do you
think is more likely: (a) this package fails completely and utterly in serving
its most fundamental purpose, or (b) user error?
- _Why are my end tags colored differently than my start tags?_
vim-jsx is basically the glue that holds JavaScript and XML syntax packages
together in blissful harmony. This means that any XML syntax defaults carry
over to the XML portions of vim, and it's common for many colorschemes to
highlight start and end tags differently due to the system XML syntax defaults.
- _Syntax highlighting seems to work, but breaks highlighting and indenting
further down in the file. What's wrong?_
This often results from trying to enable XML folding in one's `~/.vimrc` (i.e.,
via `let g:xml_syntax_folding = 1` ). vim-jsx does not support syntax folding,
and is not tested with either JavaScript or XML folding enabled.
Installation
Installation
------------
------------
@ -63,8 +93,7 @@ Installation
The recommended installation method is via [Pathogen][4]. Then simply execute
The recommended installation method is via [Pathogen][4]. Then simply execute
cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx.git ~/.vim/bundle/vim-jsx
git clone https://github.com/mxw/vim-jsx.git
(You can install [vim-javascript][2] in an analogous manner.)
(You can install [vim-javascript][2] in an analogous manner.)
@ -105,4 +134,4 @@ or indent files for Javascript, you'll probably want to do something like
[2]: https://github.com/pangloss/vim-javascript "pangloss: vim-javascript"
[2]: https://github.com/pangloss/vim-javascript "pangloss: vim-javascript"
[3]: https://github.com/mxw/vim-xhp "mxw: vim-xhp"
[3]: https://github.com/mxw/vim-xhp "mxw: vim-xhp"
[4]: https://github.com/tpope/vim-pathogen "tpope: vim-pathogen"
[4]: https://github.com/tpope/vim-pathogen "tpope: vim-pathogen"
[5]: https://github.com/VundleVim/Vundle "VundleVim: Vundle "
[5]: https://github.com/VundleVim/Vundle.vim "VundleVim: Vundle.vim "