Visual Studio代码更改格式（React-JSX）

Question

我在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>
    )
}

}

我怎么解决这个问题？谢谢

Answer 1

最后，诀窍是在底部工具栏上将文件格式从JavaScript更改为JavaScript React。我在这里发布它以供将来参考，因为我没有找到关于这个主题的任何文档。

除了以上。如果单击“为.js配置文件关联”，则可以将所有.js文件设置为Javascript React

Answer 2

更改下面的vscode首选项设置>用户设置：

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

Answer 3

或者，使用.jsx扩展名保存文件会在vscode中解决此问题。

我遇到了同样的挑战，我希望在vscode中找到一种更好的方法来处理这个问题。

我注意到每次打开带有.js扩展名的react文件时，都必须完成建议的解决方法

Answer 4

确保您当前的工作区中没有启用多个javascript格式化程序。 （您必须为当前工作区禁用其余部分）。

如果你已经安装了一些其他的JS格式化器/美化器，反应美化主要是神奇的但是失败了。

就我而言，我安装了react-beautify和JS-CSS-HTML Formatter扩展。我不得不为当前工作区禁用JS-CSS-HTML Formatter。

Answer 5

安装Prettier（如果未默认安装）并尝试将其添加到您的用户或工作区设置：

"prettier.jsxBracketSameLine": true

不要在return和返回的JSX表达式之间放置换行符。

触发autoformat (Alt+Shift+F)并检查是否有效。

Answer 6

我为此努力但终于找到了解决方案。这是我的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"]

Answer 7

您可以安装像react-beautify这样的扩展程序来帮助您格式化jsx代码。

它被发现here

这个扩展包装了prettydiff / esformatter来格式化你的javascript，JSX，typescript，TSX文件。

Answer 8

我有类似的问题，然后我发现它是由'美化'扩展引起的。卸载扩展后，一切正常。

Answer 9

您可以通过在settings.json中添加关联来阻止VSC错误地格式化JSX

Code> Preferences> Settings

在设置窗口中搜索关联，单击settings.json中的edit，然后添加：

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