VSCode-неправильное форматирование кода jsx

vscode-мой любимый редактор, у меня проблема с форматированием кода. Вот мой jsx код: 

return <div className={panelHeadingClassName}>
    <h3 className={style.panelTitle}>
        <i className={iconStyle[iconClass]}></i>
        {title}
        <small className={style.panelSubTitle}>{subTitle}</small>
    </h3>
</div>

когда я использую option + shift + F форматировать его, он дает мне это: 

return <div className = {
  panelHeadingClassName
} >
<
h3 className = {
  style.panelTitle
} >
<
i className = {
  iconStyle[iconClass]
} > < /i> {
  title
} <
small className = {
  style.panelSubTitle
} > {
  subTitle
} < /small> <
/h3> <
/div>

очевидно, это неправильно.

версия vscode -v1.10.2, а не устанавливать расширение форматирования кода.

и я не хочу устанавливать расширение форматирования кода, есть ли какая-либо конфигурация для vscode для этого правильно?

-- update --

извиняюсь за это. Я проверяю установленные расширения, нашел

7
visual-studio-code

3 ответов

как вы заметили, расширение Beautify является основной причиной здесь (см. этот вопрос). Это расширение предоставляет средство форматирования документов, которое VSCode будет выполняться при выполнении команды format

вариантов несколько:

  • отключить расширение
  • отключить украсить только для JS-файлов, удалив js запись "beautify.language" задание
  • убедитесь, что ваш файл имеет режим язык javascriptreact. Я верю, что это предотвратит Украсить от запуска на файле
15

установите Prettier (если не установлен), и попробуйте добавить это настройки пользователя или рабочего места:

"prettier.jsxBracketSameLine": true

не помещайте linebreak между return и возвращаемым выражением JSX. Запустите autoformat (Alt+Shift+F) и проверьте, работает ли.

0

в качестве альтернативы, чтобы украсить и обходной путь, который вы должны сделать, вы можете использовать вместо rc-украсить расширение vscode. Установите его, CTRL+B для форматирования кода JS, JSX.

0