Почему форматирование кода 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 version - v1.10.2, и не устанавливать никаких расширений форматирования кода.

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

-- Обновить --

Извини за это. Проверяю, установлены ли мои расширения, найдено расширение Beautify. Но почему я использую форматирование кода vscode, оно использует Beautify?

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Выберите язык в правом нижнем углу как "JavaScript React".

И лучший способ - переименовать файлы js в jsx.

Ответ 3

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

"prettier.jsxBracketSameLine": true

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

Ответ 4

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

Ответ 5

Вы не написали свое имя файла, если это файл ".js", переименуйте в ".jsx"

Ответ 6

Это связано с тем, что vs code распознает язык файлов .js как "JavaScript", а не "JavaScript React", и beautify использует язык, который vs code говорит, что он решает, как его отформатировать.

Как подсказывают другие ответы, вы можете вручную выбрать язык (в правом нижнем углу кода) как "JavaScript React" или переименовать каждое расширение файла в .jsx но я думаю, что проще добавить:

"files.associations": {
    "*.js": "javascriptreact",
}

в мой файл settings.json рабочей области.

Теперь vs-код автоматически распознает все файлы .js файлов как "JavaScript React" в рабочей области!

Если вы не знаете, как получить доступ к этому файлу, ознакомьтесь с настройками пользователя и рабочей области.

Изменить: Это полезно, если все файлы .js в вашей рабочей области "JavaScript React"!