Код Visual Studio змінює формат (React-JSX)

У моєму index.js є такий фрагмент

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

Код працює, але кожного разу, коли я зберігаю (ctrl + s) Visual Studio форматування jsx так:

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

Як я можу це вирішити? Дякую

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

На додаток до вищезазначеного. Якщо натиснути кнопку «Налаштувати асоціацію файлів для .js», ви можете встановити для всіх файлів .js Javascript React

змінити налаштування налаштувань vscode> налаштування користувача нижче:

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

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

Code> Preferences>Settings

У вікні налаштувань пошуку асоціацій натисніть редагувати в settings.json, а потім додайте:

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

З іншого боку, збереження файлу з розширенням .jsx вирішує це у vscode.

У мене був той самий виклик, і я сподіваюся знайти кращий спосіб вирішення цієї проблеми у vscode.

Я помітив, що запропоновану вам обхідну процедуру потрібно робити кожного разу, коли ви відкриваєте файл реакції з розширенням .js

Переконайтеся, що у вашому поточному робочому просторі не ввімкнено декілька форматорів JavaScript. (Решту потрібно відключити для поточної робочої області).

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

У моєму випадку у мене було реагувати-прикрасити та встановлено розширення JS-CSS-HTML Formatter. Мені довелося відключити JS-CSS-HTML Formatter для моєї поточної робочої області.

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

"prettier.jsxBracketSameLine": true

Не ставте розрив між поверненням і повернутим виразом JSX.

Увімкніть автоматичне форматування (Alt+Shift+F)та перевірте, чи працює.

Я боровся з цим, але нарешті знайшов рішення. Це мій 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"]

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

Він знайдений тут

Це розширення обертає prettydiff / esformatter для форматування вашого файлу javascript, JSX, typecript, TSX.

У мене була подібна проблема, а потім я з’ясував, що її причиною стало розширення „beautify”. Після того, як я видалив розширення, все працює нормально.

Я щойно додав усі комбінації, згадані вище.

1. додав це

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

2. додав це також

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

3. Видалено додаткове форматування js
4. встановлений гарніший
5. Увімкніть красивіше та форматування

Мені довелося вимкнути розширення JS-CSS-HTML Formatter у VSC. єдине рішення цієї проблеми

Prettier - це сумлінний програміст форматування коду. Він застосовує послідовний стиль, аналізуючи ваш код і повторно друкуючи його з власними правилами, що враховують максимальну довжину рядка, обертаючи код, коли це необхідно. включають: JavaScript TypeScript Flow JSX JSON CSS SCSS Менше HTML Vue Angular GraphQL Markdown YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Прочитавши безліч чудових пропозицій та обхідних шляхів, я виявив, що міг просто розташувати стрілку миші вниз над яскраво-синьою горизонтальною смугою внизу вікна редактора VSCode - клацнути правою кнопкою миші - це відкриє вікно зі спливаючим списком - і зняти вибір = "Відступ редактора" .