Indentation no longer working

[JESii]

Recently (last few weeks), JavaScript indenting no longer works - numerous sections of code get outdented too far, but some still work.

I'm writing ES6 code and using only vim-javascript and vim-jsx.

Plugin 'mxw/vim-jsx', { 'for': ['javascript', 'javascript.jsx'] }
Plugin 'pangloss/vim-javascript', { 'for': ['javascript', 'javascript.jsx'] }

(The 'for' clauses are new today; an unsuccessful attempt to solve the problem)

Here's a screenshot of the output; code text follows.

Here's the code:

import React from 'react';
import ReactDOM from 'react-dom';

class GetWinningScoreForm extends React.Component {
constructor(props) { super(props);
this.submit = this.submit.bind(this);
}
submit(e) {
const { _score } = this.refs
e.preventDefault();
alert(`New Winning Score: ${_score.value}`);
_score.value = '';
}
render() {
return (
  <div>
    <span>
      Current winning score is: //props.winningScore//
    </span>
    <span>
      Set Winning score:
    </span>
    <form onSubmit={this.submit}>
      <input ref="_score"
        type="text"
        placeholder="new score..." required/>
      </form>
    </div>
)
}
}

[bounceme]

my results:

import React from 'react';
import ReactDOM from 'react-dom';

class GetWinningScoreForm extends React.Component {
  constructor(props) { super(props);
    this.submit = this.submit.bind(this);
  }
  submit(e) {
    const { _score } = this.refs
    e.preventDefault();
    alert(`New Winning Score: ${_score.value}`);
    _score.value = '';
  }
  render() {
    return (
      <div>
        <span>
          Current winning score is: //props.winningScore//
        </span>
        <span>
          Set Winning score:
        </span>
        <form onSubmit={this.submit}>
          <input ref="_score"
            type="text"
            placeholder="new score..." required/>
        </form>
      </div>
    )
  }
}

your vim setup is the problem somehow

[JESii]

Hard to believe, but the problem was this statement from the mxw/vim-jsx repository:
let g:jsx_ext_required = 0
As soon as I removed it, indentation started working again.

[bounceme]

that's good to hear. now i wonder about the other people with that setting on

[bounceme]

mxw/vim-jsx#130 i actually had a patch to detect automatically. it works great for me

[JESii]

And I see that it works fine for other folks, so it is strange. I reduced my .vimrc to this minimal version for isolating this:

set nocompatible 
call plug#begin('~/.vim/bundle')
Plug 'pangloss/vim-javascript'
Plug 'mxw/vim-jsx'
Plug 'scrooloose/nerdtree'
Plug 'tpope/vim-commentary'
Plug 'tpope/vim-fugitive'
Plug 'tpope/vim-rvm'
Plug 'tpope/vim-surround'
Plug 'xolox/vim-misc'
Plug 'xolox/vim-session'
call plug#end()
"""""""""""""""""""" Some plugin overrides """""""""""""""""""""""
" let g:jsx_ext_required = 0

As soon as I uncomment that one statement, the indenting falls apart.

[bounceme]

remove set compatible; add filetype plugin indent on ?

[JESii]

Still broken; previous was 'set nocompatible', 'set compatible' or nothing still don't work.

[bounceme]

all that says is you have something in you config, or .vim/ that should be removed. the behaviour of indentexpr and after/indent/ folders are consistent from vim 7.00001 and there is nothing unconventional in this repo

[amadeus]

Am I missing something here orrr...

That variable is basically saying whether .js files should be detected as JSX syntax. Is the file that you are loading a .js file?

Try the following:

Open the file (with that comment disabled), then do set filetype=javascript.jsx Now is indentation fixed?

[JESii]

I know; the whole thing is crazy and that line should have nothing to do with this. I tested it on one machine the other day (Sierra) and that was the case. Now I'm testing on my personal machine (El Cap) and indentation is not working with that statement enabled or disabled. And that shouldn't have anything to do with it either. I'm working with that minimal .vimrc that I posted above.

Occasionally I see good indentation; usually I do not. When the indentation fails, the JSX sections work fine, and fat-arrow functions indent as well. It's driving me batty, so I'll keep trying to find something that's reproducible. I can't imagine what's in that tiny .vimrc that is causing the problem.

Anyway, thanks for the suggestions...

[JESii]

OK; please pass me my serving of humble pie...

The problem was, as you said @bounceme , in my .vim/ and not in my .vimrc file : the perp was plugin/eclim.vim. I found it by walking through everything in the .vim directory. Since it wasn't installed with vimPlug, it wasn't removed when I cleaned out Plugins for testing.

Thanks again for the support.

[amadeus]

Glad you got it sorted!

[NoahTheDuke]

I hate to bring this up again, but I've been experiencing the same issues, and I narrowed it down to just the after/indent/jsx.vim file: I cleaned my vimrc to be vim-plug loading just vim-javascript, cleaned my plugin folder to be just vim-plug and vim-javascript with everything the same except after/indent/jsx.vim removed, and the problem fixes itself. If I replace jsx.vim and add let g:jsx_ext_required = 1, the problem fixes itself.

[leslie-qiwa]

sorry to bring this up again. For simple demo codes like https://github.com/mui-org/material-ui#usage, indent is not correct for Button element.

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
    return (
          <Button variant="raised" color="primary">
                  Hello World
                      </Button>
        );  
}

ReactDOM.render(<App />, document.querySelector('#app'));

I have these vim plugin and setting. Also update to the latest codes.

Plugin 'pangloss/vim-javascript'
Plugin 'mxw/vim-jsx'
Plugin 'neoclide/vim-jsx-improve'

let g:jsx_ext_required = 1 

Note that if let g:jsx_ext_required = 0, no indent at all. After changing to 0, it has above indent.

Your help is highly appreciated.

[jhwheeler]

I have a similar issue -- if I remove vim-jsx plugin, it works fine.