reactjs-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>
    )
}

}

我该如何解决? 谢谢

omer727 asked 2020-08-03T16:24:17Z
9个解决方案
156 votes

最后,技巧是将底部工具栏上的文件格式从JavaScript更改为JavaScript React。我没有在此主题上找到任何文档,因此将其发布在这里以供将来参考。

enter image description here

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

omer727 answered 2020-08-03T16:24:37Z
34 votes

在下面更改vscode首选项设置>用户设置:

"files.associations": {
        "*.js":"javascriptreact"
    }
dotdot answered 2020-08-03T16:24:57Z
10 votes

另外,保存扩展名为.jsx的文件可在vscode中解决此问题。

我也面临同样的挑战,我希望找到一种更好的方法来处理vscode中的此问题。

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

twumm answered 2020-08-03T16:25:26Z
5 votes

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

Code > Preferences > Settings

在设置窗口中搜索关联,在settings.json中单击“编辑”,然后添加:

"files.associations": {
    "*.js": "javascriptreact"
}
jadeallencook answered 2020-08-03T16:25:55Z
4 votes

安装Prettier(如果默认情况下未安装),然后尝试将其添加到用户或工作场所设置中:

(Alt+Shift+F)

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

触发自动格式化(Alt+Shift+F)并检查是否有效。

Janos answered 2020-08-03T16:26:31Z
3 votes

确保您在当前工作空间中未启用多个javascript格式化程序。 (您必须为当前工作空间禁用其余部分)。

react-beautify主要起到魔术作用,但是如果您已经安装了其他JS格式化程序/美化器,则会失败。

就我而言,我安装了react-beautify和JS-CSS-HTML Formatter扩展。 我必须为当前工作空间禁用JS-CSS-HTML Formatter。

Ozesh answered 2020-08-03T16:27:00Z
3 votes

我为此苦苦挣扎,但最终找到了解决方案。 这是我的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"]
Loc Mai answered 2020-08-03T16:27:24Z
1 votes

您可以安装诸如react-beautify之类的扩展程序,以帮助您格式化jsx代码。

在这里找到

此扩展程序包装了prettydiff / esformatter来格式化您的javascript,JSX,打字稿,TSX文件。

Tal Avissar answered 2020-08-03T16:27:54Z
1 votes

我有类似的问题,然后我发现这是由“美化”扩展名引起的。 卸载扩展程序后,一切正常。

I aint need subscribers answered 2020-08-03T16:28:14Z
translate from https://stackoverflow.com:/questions/44993808/visual-studio-code-changes-format-react-jsx