I've got the following function, and the trailing '}' is highlighted red, even though there is a matching '{' earlier on the line.

Everything indents just fine, and I can jump back-and-forth between the two curly-braces with vim's '%' key, so it's only a highlighting issue.

And I just went through checking all the Plugins, on issue #21, so that should still be good.

Here's how to reproduce:

import React from 'react';

class Foobar extends React.Component {
  render() {
    return <div></div>
  }
}

If you place cursor inside <div></div> and press enter, the result is:

import React from 'react';

class Foobar extends React.Component {
  render() {
    return <div>
      </div>
  }
}

Better result would be:

import React from 'react';

class Foobar extends React.Component {
  render() {
    return <div>
    </div>
  }
}

This would be analogous to how .html files work in vim, or when you press enter inside any parens of function () {}. Here's screencast to show that:

https://asciinema.org/a/qQaiDpXwRLrcFf95ViHULRpmq

jsxCloseString doesn't work well with Gruvbox, it's strange because if I do hi link jsxCloseString GruvboxRed in the buffer works as expected.

Something similar to #28

Anyways I made a fork with the things I need.

From: andymass/vim-matchup/issues/62:

The reason this doesn't work is the open < and close > are showing up as comments:

jsxOpenPunct   xxx links to jsxPunct
jsxPunct       xxx links to jsxCloseString
jsxCloseString xxx links to Comment

I'm not sure whether this is intentional or a bug in the syntax definitions of MaxMEllon/vim-jsx-pretty

Thanks!

Hi. thank you for this great plugin
with the vim-jsx-pretty default setting, the tag < and > appears to have the same color as comment syntax, as we can see No.1 and No.2 on the image below.

so I was wondering

1. if there is any way to change the color like No.3 (gray color)
2. if you know any vim plugin that can implement a matching tag highlight function on jsx file like the effect No.4

I know that I should be able to handle this kind of small issues but I'm kind of a newbie in this area. It would be really helpful if you could give me some advice on how to handle those issues.
Thank you in advance!

I have classname to combine classnames in my className props in react and it makes the indentation incorrect.

Incorrect

(a lot of code has been removed to make the issue immediately visible)

without classname, correct

all of these are indented by just pressing =

One curly brace for {logo} is white and the other is blue:

If I move the cursor over the curly brace on the right, vim says the matching curly brace is the one on the right of render():

This is just a visual display bug. If I use the % command, vim jumps to the correct matching curly brace:

I am curious why its recommended to install 'pangloss/vim-javascript'. Curious to why. What are we losing or gaining?

Hey there!

First of all, thanks for the wonderful plugin, it's really my favorite of all vim JSX syntax plugins.

For context, I'm using the latest version of this plugin in conjuction with the latest version of pangloss/vim-javascript.

I work on a rather large software development project, and we use JSX to control a React router. Our router file is rather large, with lots of nested routes.

Our file looks something like this:

import * as React from 'react';

import Module from './module';
// ... a crap ton of imports

export default (args) => {
  const Decorated = compose(
    // ... some HoC components
  )(Layout);

  return (
    <Route component={Decorated}>
      // ... a lot of routes
    </Route>
  );
};

I lose highlighting when jumping to the end of the file. It seems to come back right as I hit the 25th line right after the return statement.

I thought it might be a syntax sync issue, but it seems that neither of these helped:

• syntax sync fromstart
• syntax sync maxlines=1000

Not sure if this is related to vim-javascript or vim-jsx-pretty. Happy to assist with debugging, I've looked around syntax code but couldn't find any relevant bits. Let me know if there's any more details I can provide.

Hello,

It's been a while since I've updated to the latest version. I've updated recently and found some of my custom highlighting gone.

It seems that a fix to jsTagName has overwritten this feature (or was it a bug?).

In the latest it looks like jsxOpenTag|jsxCloseTag are now being overwritten by jsxPunct.

It be great if we could get a jsClosingTagName and get the other two close/open tag working again.

It seems that this is the behavior in the gifs in the readme as well.

Here is what I had before:

Here is the commit that broke (fixed?) the syntax:

And what it looks like now:

Seeing some inconsistencies when using JSX fragments.

Whenever the code wraps, and a parameter has a default value which contains a literal string expression, the syntax highlighting breaks in the remaining of the file.

I've tried installing vim-jsx-pretty separately from vim-polyglot, however this did not resolve the issue.

Screenshot:

If I undo the wrapping, highlighting works as intended:

A maximum column is common in prettier though, so this isn't really a solution. :^)

Example:

function a() {
  return <span style={{margin: 0}}>
      Hello world
    </span>
}

What I expected:

function a() {
  return <span style={{margin: 0}}>
    Hello world
  </span>
}

Smaller example:

function a() {
  return <span style={}>
      Hello world
    </span>
}

const a: A<B> | B<A> = {};
const b = 5;

With this plugin and leafgarland/typescript-vim installed, the above code highlights incorrectly. The second generic (<A>) is highlighted in blue, and the following text is not highlighted at all.

This <div> in this code is misinterpreted as JSX by the plugin:

const regex = /(<div>)/;

This leads to the tokens after being highlighted incorrectly too:

I tried to open minified and bundled .js file, but it is crashed. File size is 2.4MB.
Here is the error

Check my screenshot below, the </div> has the white color which not the same with the start tag in green color.

Seems the plugin isn't recognizing this syntax and is having trouble auto indenting

Example 1

...
return (
  <>//<Enter>
|                    
^------ This is the cursor after pressing <Enter>
    <Component></Component>
  </>
)
...

Example 2

...
return (
  <> 
    <Component />//<Enter>
          |                 
          ^------ This is the cursor after pressing <Enter>
  </>
)
...

Example 3

// Say we have this setup, <Component/> is perfectly indented
return (
  <> 
    <Component />// we are about to press <Enter>
  </>
)


// After we press <Enter> we end up with this
return (
  <>
<Component /> // indent is removed after pressing enter
  |
  ^----- cursor after pressing enter
  </>
)

Thanks for this plugin :-)

I guess this is indented wrong:

    <span
        {(text => text.length > 20
            ? text.substring(0, 19) + '...'
            : text)(subjects.join(gettext(',')))}&nbsp;
            ({Math.log2(this.props.data.key[index] * 2 || 1).toFixed().persian()} -&nbsp;
        </span>

last 2 lines have an extra indentation.

Hello 👋 again,

Something I was running into the other day while working with JSX commenting in .js files is maintaining Javascript comments, // while being able to add JSX comments in the same .js file. I asked the below question on another site,

vi.stackexchange.com > JSX comments in .js files

And the only supplied answer of adding the below three Vim plugins

• vim-commentary
• vim-jsx
• vim-context-commentstring

does indeed allow toggling of both Javascript and JSX comments in the same .js files.

I also put together a lengthy gif ~ 2 minutes 30 seconds kind of explaining the current behavior and desired behavior of this Vim plugin.

A little bit about the above gif,

• I created a bone stock user on macOS with the name of dottie
• login with the user
• construct a bare bones init.vim
• install plugins
• configure plugins with minpac
• demo how the different plugins work.

Output when I open a js file, then issue :let g:vim_jsx_pretty_highlight_close_tag = 1, followed by :e

Output when I open a js file while having let g:vim_jsx_pretty_highlight_close_tag = 1 in my vimrc

Inside a render function, I have the following code:

The code works just fine, but notice that vim thinks the mis-matched pair of braces are actually matching, so the indentation doesn't work.

Here's my Plugin list:

Plugin 'christoomey/vim-conflicted'
Plugin 'christoomey/vim-sort-motion'
Plugin 'christoomey/vim-system-copy'
Plugin 'christoomey/vim-titlecase'
Plugin 'christoomey/vim-tmux-navigator'
Plugin 'christoomey/vim-tmux-runner'
Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'ericpruitt/tmux.vim'
Plugin 'flazz/vim-colorschemes'
Plugin 'garbas/vim-snipmate'
Plugin 'honza/vim-snippets'
Plugin 'jelera/vim-javascript-syntax'
Plugin 'kana/vim-fakeclip'
Plugin 'kana/vim-textobj-entire'
Plugin 'kana/vim-textobj-indent'
Plugin 'kana/vim-textobj-line'
Plugin 'kana/vim-textobj-user'
Plugin 'kchmck/vim-coffee-script'
Plugin 'majutsushi/tagbar'
Plugin 'MarcWeber/vim-addon-mw-utils'
Plugin 'mileszs/ack.vim'
Plugin 'nelstrom/vim-textobj-rubyblock'
Plugin 'pangloss/vim-javascript'
Plugin 'MaxMEllon/vim-jsx-pretty'
Plugin 'rking/ag.vim'
Plugin 'Rykka/lastbuf.vim'
Plugin 'scrooloose/nerdtree'
Plugin 'tomtom/tlib_vim'
Plugin 'tpope/vim-commentary'
Plugin 'jesii/vim-cucumber'
Plugin 'SirVer/ultisnips'
Plugin 'tpope/vim-fugitive'
Plugin 'tpope/vim-haml'
Plugin 'tpope/vim-markdown'
Plugin 'tpope/vim-projectionist'
Plugin 'tpope/vim-rails'
Plugin 'tpope/vim-rvm'
Plugin 'tpope/vim-scriptease'
Plugin 'tpope/vim-surround'
Plugin 'tpope/vim-unimpaired'
Plugin 'vim-ruby/vim-ruby'
Plugin 'vim-scripts/Align'
Plugin 'vim-scripts/Decho'
Plugin 'vim-scripts/ZoomWin'
Plugin 'vimoutliner/vimoutliner'
Plugin 'vim-scripts/taglist.vim'
Plugin 'xolox/vim-misc'
Plugin 'xolox/vim-session'
" Doesn't clear flags for new branch!
Plugin 'Xuyuanp/nerdtree-git-plugin'

Hello, I'm using this plugin through vim-polyglot on Vim 8.1-1967

When a {} expression is at the end or at the beginning of a line in a render function, then
the indent breaks. Below is the exact indent that is produced:

function foo() {
  return (
    <>
      <div>
        Some test {this.props.value.id} and
        some good text to top it
      </div>

      <div>
Some test {this.props.value.id}
some good text to top it
    </div>

    <div>
      Some test and some more
        {this.props.value.id} some good text to top it
      </div>
    </>
  )
}

I typed return (<CR>, but I think it's wrong indentation.

I use these plugins (only loaded).

- webapi-vim: OK
- vim-jsx-pretty: OK
- lightline.vim: OK
- vim-slime: OK
- molokai: OK
- yajs: OK
- neocomplete.vim: OK
- neosnippet: OK
- vim-over: OK
- vimproc: OK
- vim-fugitive: OK
- javascript-libraries-syntax.vim: OK
- emmet-vim: OK
- vim-surround: OK
- syntastic: OK
- vimshell: OK
- vim-nodejs-complete: OK
- neosnippet-snippets: OK
- unite.vim: OK
- tagbar: OK
- es.next.syntax.vim: OK
- open-browser.vim: OK
- VimClojure: OK
- ag.vim: OK

refs #1

After the last commit 6871eb1 the cursor movement lags.

To reproduce keep h/j/k/l pressed with high key repeat.

OS: macOS (10.14.6)
terminal: Kitty / iTerm2
editor: neovim (0.4.2)

カッコなしの場合

カッコありの場合

何らかのプラグインによって解決することはできますか？あるいは修正すべき問題でしょうか？

Hello, 👋 just found out about this plugin last night, and am impressed how it works out of the box with JSX with little to no configuration files. That said, something I noticed was that after I enable this plugin Javascript syntax highlighting inside of an .html file no longer works. I put together a simple .gif explaining what is going on with my current Neovim setup.

In the above GIF notice how Javascript syntax highlighting works before enabling this plugin, but after enabling, Javascript highlighting in .html files does not work, but then works again after disabling / removing the plugin.

Please let me know if I need to link / add any more configuration files for aiding in troubleshooting this issue. Also all of my current Vim / Neovim configuration files can be found here

(Sorry for my poor English...)

I found a strange indentation behavior. When JSX element is multiple line and first line includes expression, then vim-jsx-pretty decreases indentation.

import React from 'react';

const Foobar = () => {
    return <div>
        {(() => {
            const foo="foo";
        return <input className={"foo"}
        value="bar"/>; // indent decreased!
        })()}
    </div>;
};

However, following code has the expected indentation.

import React from 'react';

const Foobar = () => {
    return <div>
        {(() => {
            return <input className="foo"
                value="bar"/>;
        })()}
    </div>;
};

and next one also has correct indentation.

import React from 'react';

const Foobar = () => {
    return <div>
        {(() => {
            return <input className="foo"
                value={"bar"}/>;
        })()}
    </div>;
};

Just a first example has broken indentation. Please fix this problem.

Firstly, thank you for awesome plugin. Currently i'm learning React so i want to implement this to match my purify's color.

Of course i know this plugin aiming for jsx, but in the indent example i see that you are using js file. I'v tried js file but it not working. Am i missing anything.

By the way, i'm trying to support this plugin for my vim theme so i tried this:

call s:hi('jsxTagName',      { 'fg': s:pink })
call s:hi('jsxOpenPunct',    { 'fg': s:blue })
call s:hi('jsxClosePunct',   { 'fg': s:blue })
call s:hi('jsxCloseString',  { 'fg': s:blue })

" TODO: Add more jsx syntax for react
function! s:add_more_jsx_syntax()
     syn keyword cDeclarationOverwrite var const type 
     syn match jsxBraces       "[{}\[\]]"
     syn match jsxParens       "[()]"
     syn match jsxOpSymbols    "=\{1,2}\|!=\|<\|>\|>=\|<=\|++\|+=\|--\|-="
     syn match jsxEndColons    "[,]"
     syn match jsxLogicSymbols "\(&&\)\|\(||\)\|\(!\)"

     call s:hi('jsxDeclarationOverwrite', { 'fg': s:green, 'styles': [s:styles.italic] })
     call s:hi('jsxBraces',               { 'fg': s:blue })
     call s:hi('jsxParens',               { 'fg': s:pink })
     call s:hi('jsxOpSymbols',            { 'fg': s:pink })
     call s:hi('jsxEndColons',            { 'fg': s:pink })
     call s:hi('jsxLogicSymbols',         { 'fg': s:blue })
endfunction

augroup purify_jsx
    autocmd!
    autocmd Filetype javascriptreact call s:add_more_jsx_syntax() 
augroup END

But it's seem with autocmd Filetype javascriptreact call s:add_more_jsx_syntax() . It overwrite your plugins. Is there a way i can handle this.

Thank you in advance ❤️

After issue #8, there's opening jsx tag only highlighted if directly followed by closing angle bracket. So, with this:

function App() {
    return (
        <div className="App">
            <div></div>
        </div>
    )
}

Line number 3 doesn't got highlighted by jsx. I think the culprit still this start pattern.

I have this React code in a .jsx file where an if-statement breaks the highlighting.

class Foo extends React.Component {
   constructor(props) {
      super(props);

      if( 0 <= 1) { // <-- Thinks "<=" is start of jsxRegion. Highlighting is wrong after this line.
         console.log("bar");
      }
   }

   render() {
      return (
         <p>Hello World</p>
      )
   }
}

In javascript.vim, PR #23 like this.

diff --git a/after/ftplugin/javascript.vim b/after/ftplugin/javascript.vim
index adf3480..1b22cd1 100644
--- a/after/ftplugin/javascript.vim
+++ b/after/ftplugin/javascript.vim
@@ -1,9 +1,9 @@
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 " Vim ftplugin file
 "
-" Language: javascript.jsx
+" Language: typescript.jsx
 " Maintainer: MaxMEllon <[email protected]>
-" Depends: pangloss/vim-javascript
+" Depends: leafgarland/typescript-vim
 "
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

This modification are useless edit.
fix in PR #30

In this example:

export default function Example() {
	return <div>
		&nbsp;<p />
		</div>;
}

The closing div is highlighted incorrectly, and is indented further than it should be.

Hi! Thanks for the great vim-jsx-pretty Vim plugin!

With the following JSX, the indent is going crazy:

class Test extends Component {
  function test() {
    return (
      <select name="gid" id="gid" className="form-control">
        <option value="720">A (ID:720)</option>
      <option value="719">B (ID:719)</option>
    <option value="721">C (ID:721)</option>
  <option value="722">D (ID:722)</option>
<option value="723">E (ID:723)</option>
        </select>
    )
  }
}

Here is my runtime path:

:echo substitute(&runtimepath, ',', '\n', 'g')
/Users/jbq/.vim
/Users/jbq/.vim/bundle/ale
/Users/jbq/.vim/bundle/nerdtree
/Users/jbq/.vim/bundle/salt-vim
/Users/jbq/.vim/bundle/vim-gradle
/Users/jbq/.vim/bundle/vim-javascript
/Users/jbq/.vim/bundle/vim-jsx-pretty
/Users/jbq/.vim/bundle/vim-sleuth
/Applications/MacVim.app/Contents/Resources/vim/vimfiles
/Applications/MacVim.app/Contents/Resources/vim/runtime
/Applications/MacVim.app/Contents/Resources/vim/vimfiles/after
/Users/jbq/.vim/bundle/vim-jsx-pretty/after
/Users/jbq/.vim/bundle/vim-javascript/after
/Users/jbq/.vim/bundle/ale/after
/Users/jbq/.vim/after

My vim setup is available at https://github.com/jbq/Dotfiles/tree/master/dot/vim

repost from sheerun/vim-polyglot#439

In a JS left shift expression (a << b), if the rhs is an identifier, it switches to jsx highlighting. It works fine if the rhs is not an identifier.

JSX attribute value that is string doesn't get highlighted correctly if there is a comma inside.

Great plugin! Only issues I'm having is broken indention when in mocha it and describe blocks. with vim-jsx enabled, the automatic respect for indentions work, but of course the jsx syntax highlighting fails. with vim-jsx-pretty enabled, the automatic indentions fail for the scenarios fail, however, syntax highlighting of jsx is great!.

Please let me know if there are other details you need. Thanks again!

It would be nice to also have this plugin enabled if above filetypes are set.

Possibly related to #40.

Some complicated generic types that even compile seem to be highlighted error using this plugin.

let union: Array<string & number>
let props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>

My environment is Neovim v0.3.2 and the vim-jsx-pretty is f40cbf3.

I appreciate any efforts made for this great plugin, thanks in advance!

Hi,

I apologize if this is a silly question, but I can't figure it out. I want to force JSX syntax highlighting in a file with something like set syntax=jsx (this results in no highlighting at all), but I can't get it to work. My first thought was to try other names, including jsx-pretty, vim-jsx-pretty, and javascript.jsx, but I had no success.

Can you please point me to the right syntax command?

Is there a way to configure this to only work on .jsx files?

For now I've just manually removed every instance of typescript.vim from my local copy of the plugin to stop it from deciding that TypeScript type references surrounded by triangle brackets in my .ts files are actually embedded JSX.

With this:

// no space after '<'
0 <num

If you check what is current syntax on num, you got jsxTagName.

I think this is the culprit.

It's hard to describe.

Here is the code and snapshot.

class App extends Component {
    render() {
        const arr = [
            <div></div>
        ];

        // Codes highlight incorrectly
        var foo = 'foo';
        if (foo === 'foo') {
            console.log('hello');
        }
    }
}

And the snapshot is

But it happens only when there is not , or ; after jsx code. And the following works well

class App extends Component {
    render() {
        const arr = [
            <div></div>,
        ];

        // Codes highlights well
        var foo = 'foo';
        if (foo === 'foo') {
            console.log('hello');
        }
    }
}

I noticed this:
Just pangloss/vim-javascript

With vim-jsx-pretty

.vimrc used:

Plug 'HerringtonDarkholme/yats.vim'
Plug 'maxmellon/vim-jsx-pretty'

When I have file with following contents:

const head = <T>(arr: T[]): T => arr[0]

And then press enter, next line is wrongly indented. Could you please fix this?

Reference: sheerun/vim-polyglot#428

on typescript files (as tsx) , after a few file switchings (let's say opening 10 - 12 files), vim/nvim becomes practical unusable if you want to open other files (it will wait more then 30 seconds to open)

Cursor loses horizontal position on short lines when plugin is active

To reproduce, open bug.jsx with the plugin active (the only plugin, installed natively, no vimrc, vim 8.1.610).

Place your cursor on the '2'.

Press j twice.

Without the plugin installed (or in a non-js file), your cursor will be on the '5'. With the plugin, it will be on the '4'

bug.jsx

123

456

I've updated vim-jsx-pretty to the latest release via vim-plug :PlugUpdate, and am now hitting the above error message when opening tsx files.

Error detected while processing /.../vim-jsx-pretty/after/syntax/typescript.vim:
line   39:
E117: Unknown function: jsx_pretty#syntax#highlight

Looking through the plugin folder, jsx_pretty#syntax#highlight is definitely in there, so not sure what the issue is. Perhaps an interaction with another plugin?