Формат изменения кода Visual Studio (React-JSX)

У меня есть следующий фрагмент в моем index.js

class App extends Component {
render() {
    return ( <div style = { styles.app } >
        Welcome to React!
        </div>
    )
}

}
Код работает, но каждый раз, когда я сохраняю (ctrl + s) визуальный студийный формат, jsx нравится:

class App extends Component {
render() {
    return ( < div style = { styles.app } >
        Welcome to React!
        <
        /div>
    )
}

}

Как я могу это решить? спасибо

Ответы

Ответ 1

В конце концов, что случилось, изменив формат файла с JavaScript на JavaScript React на нижней панели инструментов. Я публикую это здесь для дальнейшего использования, так как я не нашел никакой документации по этой теме.

enter image description here

В дополнение к вышесказанному. Если вы нажмете "Настроить сопоставление файлов для .js", вы сможете установить все файлы .js в Javascript React.

Ответ 2

измените настройки предпочтений vscode> настройки пользователя ниже:

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

Ответ 3

В качестве альтернативы, сохранение файла с расширением .jsx разрешает это в vscode.

У меня была такая же проблема, и я надеюсь найти лучший способ справиться с этой проблемой в vscode.

Я заметил, что ваша рекомендуемая работа должна выполняться каждый раз, когда вы открываете файл реакции с расширением .js

Ответ 4

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

"prettier.jsxBracketSameLine": true

Не помещайте linebreak между возвратом и возвращенным выражением JSX.

Запустить автоформат (Alt+Shift+F) и проверить, работает ли оно.

Ответ 5

Удостоверьтесь, что у вас нет нескольких форматов javascript в вашем рабочем пространстве. (Вы должны отключить остальные из них для своего рабочего пространства).

реагировать-украшать в основном делает магию, но терпит неудачу, если у вас уже установлен другой форматир/украшатель JS.

В моем случае у меня было исправление и расширение JT-CSS-HTML Formatter. Мне пришлось отключить JS-CSS-HTML Formatter для моей текущей рабочей области.

Ответ 6

Вы можете установить расширение, например response-beautify, которое поможет вам форматировать jsx-код.

Здесь найдено

Это расширение обертывает prettydiff/esformatter для форматирования javascript, JSX, typescript, файла TSX.

Ответ 7

У меня была похожая проблема, потом я узнал, что это вызвано расширением "украсить". После того как я удалил расширение, все работает нормально.

Ответ 8

Я боролся с этим, но наконец нашел решение. Это мой settings.json

{
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "workbench.startupEditor": "welcomePage",
    "window.zoomLevel": 1,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html"
    },
    "editor.formatOnSave": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.wordWrap": "on",
    "editor.tabSize": 2,
    "editor.minimap.enabled": false,
    "workbench.iconTheme": "vscode-icons",
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "beautify.ignore": [
        "**/*.js",
        "**/*.jsx"
    ],
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true
}

я добавил

"beautify.ignore": ["**/*.js","**/*.jsx"]

Ответ 9

Вы можете запретить VSC неправильно форматировать ваш JSX, добавив ассоциацию в ваш файл settings.json.

Code > Preferences > Settings

В окне настроек найдите ассоциации, нажмите edit в settings.json и затем добавьте:

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