VScode испортил формат JSX (украсить)

Question

У меня установлен этот плагин: https://github.com/HookyQR/VSCodeBeautify

Это код, который у меня есть

import React, { Component } from 'react';

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


      </div>
    );
  }
}

После нажатия Ctrl + Shift + I, сначала я получаю сообщение, что

Не удалось определить тип для украшения, пожалуйста, выберите.

Затем он позволяет мне выбирать из HTML, JS, CSS.Когда я выбираю JS, это результат, который я получаю:

import React, {
  Component
} from 'react';

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


      <
      /div>
    );
  }
}

Есть идеи почему?Языковой режим установлен как JS / React в VScode.

---

Если я удаляю этот плагин и нажимаю Ctrl + Shift + I, я получаю эту ошибку

command 'HookyQR.beautifyFile 'не найден

Answer 1

Вам не нужно использовать плагин для этого;установка языкового режима на JavaScript React и вызов собственной команды Format Document (обычно связанной с alt+shift+F) должны помочь.

Answer 2

Используйте инструмент beautify, который явно поддерживает JSX, например act-beautify или prettier .

VSCodeBeautify может поддерживать JSX, однако, как представляется, в тех случаях, когда он не поддерживаетРабота.См. GitHub Issue 132 .