mxw / vim-jsx Goto Github PK
View Code? Open in Web Editor NEWReact JSX syntax highlighting and indenting for vim.
React JSX syntax highlighting and indenting for vim.
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
let g:jsx_ext_required = 0
breaks deoplete.nvim
autocompletion, more info in this issue Shougo/deoplete.nvim#44
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.
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 %
.
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
.
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
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?
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
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.
Consider this fragment:
render() {
return (
<div>
{this.props.children}
</div>
);
}
The children props section isn't highlighted.
Thanks for writing this bundle, really helpful!
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.
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!
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 ;)
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 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
The >
in () => expr
breaks the syntax highlighting. For example:
<div onClick={() => console.log('foo')} className="will not be highlighted" />
for example:
var About = React.createClass({
render() {/*cursor is here*/}
});
when I typed 'enter',
var About = React.createClass({
render() {
}
});
Using auto indent of entire file all the JSX code gets the same indentation. Does this plugin only provide syntax highlight?
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?
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.
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?
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.
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?
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.
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.
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
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"
/>
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.
Strings should be overridden inside of tags (unless they're further enclosed by curlies.
Example:
<p>I'm an ugly tag!</p>
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 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.
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.
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.
Normally I can autoformat code with =
, but with this plugin installed it just removes all indents.
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.
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!
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.