VScode 弄乱 JSX 格式（美化）

Question

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

Answer 1

You don't need to use plugin for that: Change Language Mode command ( Ctrl + K M ) 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.

Answer 2

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 .