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>
)
}
}
我该如何解决？谢谢
第2401篇《Visual Studio代码更改格式（React-JSX）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
您可以安装诸如react-beautify之类的扩展程序，以帮助您格式化jsx代码。
在这里找到
该扩展程序包装prettydiff / esformatter来格式化javascript，JSX， TypeScript，TSX文件。
我为此苦苦挣扎，但最终找到了解决方案。这是我的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"]
您可以通过在settings.json中添加关联来防止VSC错误地格式化JSX。
Code> Preferences>Settings
在设置窗口中搜索关联，在settings.json中单击编辑，然后添加：
"files.associations": {
"*.js": "javascriptreact"
}
确保您在当前工作空间中未启用多个JavaScript格式化程序。（您必须为当前工作空间禁用其余部分）。
react-beautify主要起到魔术作用，但是如果您已经安装了其他JS格式化程序/美化器，则会失败。
就我而言，我安装了react-beautify和JS-CSS-HTML Formatter扩展。我必须为当前工作空间禁用JS-CSS-HTML Formatter。
安装Prettier（如果未默认安装），然后尝试将其添加到用户或工作场所设置中：
"prettier.jsxBracketSameLine": true
不要在return和返回的JSX表达式之间放置换行符。
触发自动格式化(Alt+Shift+F)并检查是否有效。
在下面更改vscode首选项设置>用户设置：
"files.associations": {
"*.js":"javascriptreact"
}
或者，保存扩展名为.jsx的文件可在vscode中解决此问题。
我也面临同样的挑战，我希望找到一种更好的方法来处理vscode中的此问题。
我注意到每次打开扩展名为.js的react文件时，都必须完成建议的解决方法
相似问题
问题类别
我有类似的问题，然后我发现这是由“美化”扩展名引起的。卸载扩展程序后，一切正常。