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

78

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

我该如何解决？谢谢

reactjs  visual-studio-code  jsx 
— omer727
source
您是否安装了格式扩展名？我将您的代码复制到新的js文件中，并使用vs代码正确格式化。因此，如果您安装了扩展程序，我会说将其卸载，否则，可能您需要更新vscode
— ndonohoe

Answers:

244

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

在此处输入图片说明

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

— omer727
source
有没有一种方法可以默认在所有js文件上启用此功能。说，也许是设置/配置文件
— Kenshinman '18
@Kenshinman也想知道这一点！我只使用React，但我的文件都是.js而不是.jsx
— Eric Bachhuber 18/04/21
8
谢谢，您也可以考虑将“ files.associations”：{“ * .js”：javascriptreact“}
— 放入
1
这个标记为接受的答案
— 罗希特Luthra
4
这是整个互联网上的最佳答案
— uneet7 '19
53

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

"files.associations": {
        "*.js":"javascriptreact"
    }
— 点点
source
24

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

Code> Preferences>Settings

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

"files.associations": {
    "*.js": "javascriptreact"
}
— 翡翠
source
12

或者，保存扩展名为.jsx的文件可在vscode中解决此问题。

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

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

— wu
source
3
他们将JSX的功能赋予JS的其他方法是什么？
— 警察
5

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

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

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

— 奥泽什
source
如何为单个工作空间禁用格式化程序？
— 克里斯，
操作方法如下：（1）转到扩展部分。（2）找到JS-CSS-HTML格式器（3）转到“禁用”下拉菜单（4）必须有一段内容说“禁用（工作区）
— Ozesh”，
5

安装Prettier（如果默认情况下未安装），然后尝试将其添加到用户或工作场所设置中：

"prettier.jsxBracketSameLine": true

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

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

— 亚诺斯
source
5

我为此苦苦挣扎，但最终找到了解决方案。这是我的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"]
— 禄迈
source
1

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

在这里找到

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

— 塔尔·阿维萨（Tal Avissar）
source
谢谢，但是我已经安装了此扩展程序，但没有帮助。
— omer727
1

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

— Akrom短跑运动员
source
0

我刚刚添加了上述所有组合。

  1. 添加了这个
"files.associations": {
    "*.js": "javascriptreact"
}
  1. 也添加了这个
"beautify.ignore": ["**/*.js","**/*.jsx"]
  1. 删除了其他js格式
  2. 更漂亮
  3. 打开更漂亮的格式
— jamil_4128
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.