Smart and auto indent not indenting as expected for JSX

Question

I'm trying to figure out how to get vim to correctly indent the next line in a JSX block.

Currently when I press enter, the cursor goes slightly behind where it should be. In the example below, my cursor starts after <Switch>. Then, when I press enter, the cursor is on the next line, but 4 spaces before where it should be.

// This is in a class, in a file foo.js.
render() {
  return (
    <Fragment>
      <Switch>|start
    |got
        |want
      </Switch>
    </Fragment>
  );
}

These are the settings in my vimrc file.

" Global settings.
set autoindent
set shiftwidth=4
set smartindent
set tabstop=4
filetype plugin indent on
syntax off

" Javascript specific settings.
autocmd FileType javascript setlocal tabstop=2 softtabstop=2 shiftwidth=2 expandtab

If I'm not in a JSX block, then the indentation seems to work fine.

constructor(props) {
  super(props);|start
  |got
}

P.D. I'd like to avoid installing a plugin, if possible.

Answer 1

You can use the treesitter plugin for this behaviour. Add the following to your configuration.

 require'nvim-treesitter.configs'.setup {
   indent = {
     enable = true,
   },
 }

Answer 2

Your foo.js is assigned the javascript filetype while its content is not actually JavaScript. Ideally, your JSX file should have the .jsx extension, which would make Vim assign the theoretically correct javascriptreact filetype.

Now, I wrote "theoretically correct" because Vim indeed has specific filetypes for .jsx and .tsx, javscriptreact and typescriptreact, but those are only stubs that source their javascript and typescript buddies. This has been the case for quite some time and it will stay that way as long as no one steps forward.

Ironically, the getJavascriptIndent() function defined in $VIMRUNTIME/indent/javascript.vim has some logic for JSX, but that logic is only triggered if the current highlight group stack matches the pattern xml\|jsx. Since none of the highlight groups defined in $VIMRUNTIME/syntax/javascript.vim contains the string jsx or xml, the function never takes the jsx path.

From there, you have two paths:

• report the problem in Vim's issue tracker,
• look around for an alternative indent script for JSX.