I have this plugin installed:

This is code I have

import React, { Component } from 'react';

export default class TempInput extends Component {
  render() {
    return (
      <div>
                <input
          value={temperature}
          onChange={this.handleChange} />


      </div>
    );
  }
}

After clicking Ctrl+Shift+I, first I get message that

Could not determine type to beautify please choose.

Then it allows me to choose from HTML, JS, CSS. When I choose JS, this is result I get:

import React, {
  Component
} from 'react';

export default class TempInput extends Component {
  render() {
    return ( <
      div >
      <
      input value = {
        temperature
      }
      onChange = {
        this.handleChange
      }
      />


      <
      /div>
    );
  }
}

Any idea why? Language mode is set as JS/React in VScode.

If I uninstall that plugin and click Ctrl+Shift+I, I get this error

command 'HookyQR.beautifyFile' not found

I have this plugin installed: https://github.com/HookyQR/VSCodeBeautify

This is code I have

import React, { Component } from 'react';

export default class TempInput extends Component {
  render() {
    return (
      <div>
                <input
          value={temperature}
          onChange={this.handleChange} />


      </div>
    );
  }
}

After clicking Ctrl+Shift+I, first I get message that

Could not determine type to beautify please choose.

Then it allows me to choose from HTML, JS, CSS. When I choose JS, this is result I get:

import React, {
  Component
} from 'react';

export default class TempInput extends Component {
  render() {
    return ( <
      div >
      <
      input value = {
        temperature
      }
      onChange = {
        this.handleChange
      }
      />


      <
      /div>
    );
  }
}

Any idea why? Language mode is set as JS/React in VScode.

If I uninstall that plugin and click Ctrl+Shift+I, I get this error

command 'HookyQR.beautifyFile' not found

• javascript
• reactjs
• visual-studio-code

2 Answers 2

You don't need to use plugin for that: Change Language Mode command (Ctrl + KM) offers JavaScript React option, what is basically JS with JSX support.

Native Format Document command (usually bound to Alt + Shift + F) then does the trick.

Use a beautify tool that explicitly supports JSX such as react-beautify or prettier.

VSCodeBeautify may support JSX however seems to be cases where it does not work. See GitHub Issue 132.