Currently vim-jsx seem to be turned on for any JavaScript file. Is it possible to detect the presence of

/** @jsx [whatever] */

pragma and only enable jsxRegion when it's present?

Thanks!

On my system, grep doesn't provide any -P or -z option, hence, grep -Pz '(?s)/\*(?:.(?!\*\*/))*jsx.*?\*/' always fails (on a side note: maybe React.DOM should be matched against?).

I would recommend not to use grep, vim can handle this by itself:

autocmd BufNewFile,BufRead * if getline(1) =~ 'REGEX' | SUCCESS | endif

Before turning on vim-jsx

After turning on vim-jsx

Hey,

Is it me and my setup or does the simplest example not work?

var React = require("react")

React.createClass({
  render: function() {
    return <div>{this.renderMore()}</div>
  },

  renderMore: function() {
    return <strong>Hello</strong>
  }
})

I see renderMore and its function keyword colored incorrectly. Further inspection tells that function is still in the jsxRegion context, which I presume should've ended at the </div> above.

In Vim, you can set multiple filetypes by separating them with a .. This would allow you to have special configuration that applies to only JSX files while inheriting all of the configuration for JavaScript files.

Would you be open to a pull request that sets the filetype to javascript.jsx instead of just javascript, and also moves the other files to only work on jsx filetypes?

Is there a way to set the syntax in a blank file, for example using

:set syntax=jsx

to turn on highlighting? Or is this planned in the future?

I know that only pangloss/vim-javascript is officially supported, but this could be a simple fix, depending on what you stance on cross-compatibility is:

syn cluster javascriptNoReserved add=jsxRegion

I've filed a similar issue on the other side: othree/yajs.vim#76

Before

After

auto-indent doesn't work in jsx files for me currently
specifically, chunks of code get un-indented automatically

For example, the "handleUserInput" function on line 36

Consider this fragment:

render() {
   return (
      <div>
         {this.props.children}
      </div>
   );
}

The children props section isn't highlighted.
Thanks for writing this bundle, really helpful!

So I use this plugin along with pangloss/vim-javascript and I noticed that it breaks parts of the syntax highlighting when writing jsx:

omitting the jsx part seems to fix it

can anyone confirm this?

In https://github.com/tcoopman/react-es6-browserify there's no @jsx pragma, the files have .jsx extension. This plugin doesn't recognize them propertly.

for example:

var About = React.createClass({
  render() {/*cursor is here*/}
});

when I typed 'enter',

var About = React.createClass({
 render() {
 }
 });

Seeing some very strange behavior now where JSX isn't highlighted inside of any kind of JS block. For example:

Works fine for JSX outside of a block. Don't really know how to test this any further; happy to provide more information. Both vim-jsx and vim-javascript are up-to-date.

For the above fragment, the <div> and its corresponding </div> around the Hello World string don't match.

Hello,

I'm using react with babeljs transpiler and .es6 extensions. In such files JSX is not highlighted. In .jsx files everything is ok. Any ideas? Thanks.

osx
vim 4.7.712
all plugins are up to date.
vimrc

I'd like to use vim-jsx for the syntax highlighting and indentation features it provides, but it is clobbering my local ftdetect file which I rely on for other things in Vim. I think this is happening because everything in this plugin is nested in an after directory. Would you be open to a pull request that un-nests everything from the after directory?

I prefer this style of indenting components, with the closing bracket of the opening tag on its own line, at the same indentation level as the opening bracket:

<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Spazz />
</Foo>

(See https://github.com/airbnb/javascript/tree/master/react#alignment for more details)

However, by default using this plugin the closing bracket is indented one level more than the start of the opening tag, like so:

<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
  >
  <Spazz />
</Foo>

Self-closing tags already work as expected:

<Foo
  hello="world"
  bar="baz"
/>

For some reason, when this plugin is included, the rest of vim-javascript's syntax highlighting is effectively broken in the .jsx file. Functions, globals, etc all lose their highlighting.

I have noticed that this is fixed when changing https://github.com/mxw/vim-jsx/blob/master/after/syntax/javascript.vim#L30 to include @jsAll instead of the other Javascript syntax types, but this may not be desired for some reason or another.

Thanks for this useful plugin. Is it normal that opening and closing tags are colorised with different colours ?

It seemed like after the first region of JSX in my file, the highlighting would break and believe it's inside of a jsx region.

The culprit for me was " let g:xml_syntax_folding=1.

Throwing this in the knowledge base here because I spent an hour tracking this down ;)

Greetings,

I used pathogen to install the vim-javascript plugin first and then this plugin, but I'm not seeing any of the highlighting. I have Vim 7.2 and have tried new shell sessions. Any help would be much appreciated. Thanks -Dennis

The indentation breaks when used with Harmony.

I workarounded the issue by changing the indentation script to this one, in my fork.

I didn't have time to take a further look and find the exact cause.

https://github.com/jsdf/coffee-react-transform

Hi there. I've installed this plugin and also its dependency via vundle. In some cases it seems to work just fine but I'm curious about two things.

1. In this case, would it be expected that the closing div is highlighted in a different color than the opening div?

2. If I add an opening quote to the content of my element, highlighting seems to go awry.

I can't be 100% sure if this is just an issue of improper installation or if these are features/problems inherent to this plugin.

Hi all,

One feature I enjoyed and benefitted from when starting out with CoffeeScript, was the vim-coffee-script plugin, which provides the ability to easily 'preview' the compiled Javascript while working in Vim, as a means of debugging and learning.

I've put together a working example of how this could work for JSX, which can be found here: https://github.com/mrjamesriley/jsx-compiler-vim - it works by calling out to the system, to run a JS script which in turns compiles the passed in JSX using the official react-tools, returning the compiled JS, before outputting this into a new buffer within Vim. The middle-man step of a JS script seems necessary here given that the npm jsx does not seem to support standard steams.

I'm relatively new to VimL, but enjoying the process - is there interest in having vim-jsx provide such functionality? I'd happily put the time in to get this functionality added to this plugin - what do you think?

cheers,
James

var x = (
  <div>{{one: 'er'}}</div>
);

Try formatting that with only pangloss's plugin and the parens balance. (Visually select and hit =). Now try it with your plugin as well. The parens do not balance.

The > in () => expr breaks the syntax highlighting. For example:

<div onClick={() => console.log('foo')} className="will not be highlighted" />

Hey, sorry to be a pest, but I noticed that with this plugin installed, the indenting on all JS files (.js and .jsx) is broken.

Here's what I mean:

The cursor always returns to the beginning of the line, both in Normal mode and with o or in Insert mode and with Enter. This is with set filetype=javascript and set nopaste.

The JSX syntax highlighting works great, it's just that I really can't work with the indenting broken. Removing this plugin fixes the issue.

Thanks for your work!

Everything works, but I would prefer it if it could say something cool like jsx (react) or jsx or jsx (javascript) instead of javascript.

In this screenshot after the first << operator syntax highlighting breaks:

Currently, if you use ggVG=, it will correctly indent the Javascript but the XML has no nesting. There is also no indenting when opening and closing tags while typing XML.

The HTML plugin that comes with Vim by default might be a good place to take inspiration, though I'm feeling it wouldn't be trivial to implement.

If you also use flow annotations (http://flowtype.org/) in your javascript, they can confuse the syntax highlighting because flow template types also use tags, e.g. Array<int>.

The solution for me was simply to add a \W to the front jsx start regex, since real jsx should never immediately follow a word character, and real flow templates should always follow a word character.

If this makes sense to you, it's probably worth adding to master.

Previous to including this plugin, my indentation worked "as expected", meaning in a reasonably and only semi-broken way. After including this I get no auto-indentation. For example, if I start with this:

var a = React.createClass({
     render: function() {
         return (
             <div>[CURSOR HERE]
         );
     }
});

When I type enter/return I get this:

var a = React.createClass({
     render: function() {
         return (
<div>
    [CURSOR HERE]
         );
     }
});

Without this plugin my vim configuration handles the indentation in a sane way and just doesn't have hilighting. I would love to use this if this gets resolved, and alas I am no vim programmer or I would try to help out.

Strings should be overridden inside of tags (unless they're further enclosed by curlies.

Example:

<p>I'm an ugly tag!</p>

It seems that open curlies inside of JSX are ignored for brace matching, but close curlies are not. This unbalances the curly count outside the JSX, significantly reducing the value of %.

For the following code, the closing brace is highlighted in a different way. It also breaks indentation when inside a conditional, as the closing brace is seen as closing the conditional.

<div onClick={this.props.onClick}>

React 0.12 will remove the jsx pragma.

react 0.12-rc

I think possible solutions to detecting a jsx file without the jsx ext should be discussed.

One possible solution is to grep the doc for React. I am not the greatest at vimscript so I don't know how feasible this would be.

I noticed they were not being indented.

React is investing in the class syntax:
http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

Using auto indent of entire file all the JSX code gets the same indentation. Does this plugin only provide syntax highlight?

Normally I can autoformat code with =, but with this plugin installed it just removes all indents.

Hi!
Im seeing that curly braces inside a Jsx element dont match correctly in terms of color:

<textarea
        className="message-composer"
        name="message"
        value={this.state.text}
        onChange={this._onChange}
        onKeyDown={this._onKeyDown}
      />

The braces Im referring to are the ones in the attribute values, i.e., value, onChange and onKeyDown.

Thanks!
Fran

I have Installed 'pangloss/vim-javascript' and in the top of my jsx file I have /** @jsx React.DOM */
I am using Vundle. Did try commenting out all Bundles except vim-jsx and vim-javascript.
Still can't get it to work.

Could it perhaps be something else in my .vimrc that's causing the issue?

Thanks for this helpful extension. I modified it so that it uses HTML for indentation and syntax highlighting instead of XML. Let me know if I should create a pullrequest for this or if using XML is intentional and you still prefer using XML.

let g:jsx_ext_required = 0 breaks deoplete.nvim autocompletion, more info in this issue Shougo/deoplete.nvim#44

I am having an issue with the xml/html not being highlighted. I am using vam(vim addon manager) and when I check :scriptnames I see the jsx files. I can run set ft=jsx and the xml/html is highlighted but the javascript is not. But just loading up a jsx file has the filetype as javascript and the xml/html regions are not highlighted.

I believe the after directory is meant for customizing existing syntaxes and plugins. JSX.vim is a plugin itself, so shouldn't it live outside the after directory?

Syntax gets goofed up when using apostrophes:

Hi, I appreciate this plugin a lot in my everyday work.
I am writing quite a lot of JSX markup in my js files, with intentation 4, which makes the file unreadable on small viewports due to line breaks.

I understand that on JSX syntax the plugin enables the same rules as XML, I was wondering how difficult it should be to enable set sw=2 only for the JSX syntax.
Thanks

The following HTML document is not highlighted properly when vim-jsx is installed:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Foo</title>
        <script src="foo.js"></script>
    </head>
    <body>
    </body>
</html>

The problem starts at script which is tagged as xmlTagName instead of htmlSpecialTagName.