красивее портит фрагменты jsx

Question

function App() {
    
      return (
       <>
        <
        Navbar / >
        <
        Users / >
       </>
      );
    }

при нажатии ctrl+ Сохранить изменения в

function App() {

  return ( <
    >
    <
    Navbar / >
    <
    Users / >
    <
    />
  );
}

когда я наводил курсор на фрагмент, он говорит: "У фрагмента JSX нет соответствующего закрывающего тега".

я снова попробовал установить красивее, не помогло

Answer 1

Вам необходимо установить Prettier plugin и отключить beautify плагин или любое другое средство форматирования кода, которое вы предварительно установили в код VS.

Это может помочь вам решить вашу текущую проблему. Это происходит из-за того, что оба плагина работают по-разному, и сохранение обоих включенных отталкивает нас от этого форматирования при сохранении. Отключение beautify и установка плагина Prettier помогает нам добиться требуемого результата.

Вы можете найти плагин Prettier (здесь).

Answer 2

Решение

Я удалил другой форматтер "украсить". Я нажимал "shift+alt+f" для многократного форматирования документа, и в правом нижнем углу появилось сообщение "Есть несколько форматеров. Выберите форматировщик по умолчанию, чтобы продолжить". Затем я выбрал программу форматирования более красивого кода

обратитесь к статье https://github.com/prettier/prettier-vscode/issues/449, упомянутой @Shivanshu Gupta в комментариях выше

Answer 3

Краткий синтаксис

Существует новый, более короткий синтаксис, который вы можете использовать для объявления фрагментов. Похоже на пустые теги:

      class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

Ссылка: https://reactjs.org/docs/fragments.html#short-syntax