Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make .jsx file extension not required by default #161

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 35 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,39 @@
vim-jsx
=======
# vim-jsx

Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax
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].
objects. It was developed by Facebook alongside [React][1].

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
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
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

* 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
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,
which you can find [here][3].

Troubleshooting
---------------
## Troubleshooting

If you're experiencing incorrect highlighting or indenting in 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
* A brief affirmation that you've read the README and have installed one of the
supported dependencies (and the name of the one you're using).

- A minimal ~/.vimrc which repros the issue you're having, as well as both a
* 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 illustrate the specific highlighting or indenting problem). To
doesn't illustrate 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
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
Expand All @@ -44,17 +43,17 @@ minimal comment.

(Please feel free to disregard all this for feature requests.)

Usage
-----
## 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
By default, JSX syntax highlighting and indenting will be enabled for all
files with the `.js` or the `.jsx` extension.
If you would like JSX only in `.jsx` files, add

```viml
let g:jsx_ext_required = 0
let g:jsx_ext_required = 1
```

to your .vimrc or somewhere in your include path. If you wish to restrict JSX
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
Expand All @@ -63,35 +62,33 @@ let g:jsx_pragma_required = 1

to your .vimrc or somewhere in your include path.

Frequently Asked Questions
--------------------------
## Frequently Asked Questions

- _How come syntax highlighting doesn't work at all?_
* _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?_
* _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
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?_
* _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,
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

### Pathogen

The recommended installation method is via [Pathogen][4]. Then simply execute
The recommended installation method is via [Pathogen][4]. Then simply execute

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

Expand Down Expand Up @@ -121,17 +118,16 @@ 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
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"
[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.vim "VundleVim: Vundle.vim"
[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.vim "VundleVim: Vundle.vim"
2 changes: 1 addition & 1 deletion ftdetect/javascript.vim
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

" Whether the .jsx extension is required.
if !exists('g:jsx_ext_required')
let g:jsx_ext_required = 1
let g:jsx_ext_required = 0
endif

" Whether the @jsx pragma is required.
Expand Down