mxw / vim-jsx Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 95.0 55 KB

React JSX syntax highlighting and indenting for vim.

Vim Script 100.00%

vim-jsx's People

Contributors

Stargazers

Watchers

Forkers

justinj golmansax dchest jstoja jbaiter ruyadorno ingara nicklasos glittershark lencioni keithpitt mgechev othree mike-hearn popkirby dccmx mutewinter kexplo smlparry maniart lastjune tadeuzagallo simonratner leifdenby sheerun zhhz veloce robbestad lone andrewjjung47 ksmithbaylor dylansm rtroxler stoicloofah wyattanderson 1ven benjamin-chang tobiasandersen jambonrose edulun seavan thenickcox pdf petersendidit bounceme raushan xuweilu twelvemilelimit kafeltz inside kylpo rchaser53 vanentu kyrisu itisman simplerxing megoodroid nphyatt burninglutz thlo7777 igemnace jez corymainwaring landonb siranthony tymarats ajcrites pearofducks jasondibenedetto redbmk plexigras jiulongw lpender ldesiqueira andreaswachowski guoshencheng elquimista edgeowner ivangeorgiew saynschuman learningnerd martinhj nqiu riuri olegoper mars90226 amadeus asoltys hhy5277 kirushanths gtsop optionalg

vim-jsx's Issues

Highlighting issue.

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.

No highlighting in .es6 files

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

No syntax highlighting inside blocks

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.

Syntax broken for onClick

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

JSX pragma detection fails because of non POSIX grep options

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

Installation not working

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

Breaks HTML syntax highlight

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.

g:jsx_ext_required breaks with deoplete.nvim autocompletion

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

Conflicts slightly with flow template annotations

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.

Parens not balanced correctly.

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.

Interest in Vim JSX compilation support?

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

Support for es6 Classes?

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

Feature request: indenting inside inline XML

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.

Clobbers my local ftdetect

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?

Wrong es6/es7 decorators indent

Before

After

Enabling different shiftwidth in JSX indentation

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

Everything is jsxRegion after a tag

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.

No highlighting for children

Consider this fragment:

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

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

Curly brace matching is broken

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

Curly braces dont match

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

Using = to autoformat does not work.

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

Support cjsx?

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

Using HTML for indentation and syntax highlighting instead of XML

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.

Highlighting somewhat broken after first jsx region

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

Keywords highlighted as errors with othree/yajs.vim

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

Doesn't handle lambda functions

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

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

No highlighting

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?

Indentation not working.

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

Weird syntax highlighting after turning on vim-jsx

Before turning on vim-jsx

After turning on vim-jsx

Quotes in tag-text

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

Example:

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

breaks syntax highlighting

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?

auto-indentation broken

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

Misdetects << operator as a tag

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

effectively breaks other javascript syntax highlighting

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.

Breaks JS indenting

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!

Erroneous highlight matching

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

Indentation breaks when used with Harmony

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.

Apostrophes not supported?

Syntax gets goofed up when using apostrophes:

Possible highlighting issue

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.

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

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.

Possible Highlighting Issue ?

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

Support for Airbnb-style indentation

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

Use @jsx pragma to enable vim-jsx

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!

.jsx extension should be supported

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.

Set filetype to `javascript.jsx`?

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?

React 0.12 will remove the pragma.

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.

Setting syntax in vim

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?

indent error

for example:

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

when I typed 'enter',

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

Why is everything in the after directory?

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?

Is there a way to get Vim to show jsx as a new filetype?

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

Indentation broken

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.