Question

我的index.js

中包含以下代码段

SELECT * 
FROM employees
WHERE salary > (SELECT salary
        FROM employees
        WHERE name = 'x' );

}
代码有效，但每次我保存（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＆＃39;您可以将所有.js文件设置为Javascript React

Answer 2

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

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

Answer 3

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

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

我注意到，每次打开带有 .js

扩展名的react文件时，都必须完成建议的解决方法。

Answer 4

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

"prettier.jsxBracketSameLine": true

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

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

Answer 5

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

react-beautify 主要是魔术但是如果你已经安装了其他JS格式化器/美化器则会失败。

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

Answer 6

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

找到here

此扩展程序包含prettydiff / esformatter以格式化您的javascript，JSX，typescript，TSX文件。

Answer 7

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

Answer 8

我为此苦苦挣扎，但终于找到了解决方案。这是我的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 9

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

添加了这个

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

还添加了这个

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

删除了其他js格式
已安装更漂亮
打开更漂亮的格式

Answer 10

打开 Visual Studio Code 设置。请参阅下图，了解如何导航至设置。

设置标签打开后。如果要对所有项目进行设置更改，请选择用户子选项卡，如果仅针对当前项目，则选择工作区子选项卡。

在搜索文本框中输入“文件关联”并按 Enter。

点击添加项目。

设置项目：.js
设置值：javascriptreact

上述更改将开始将项目中的所有 *js 文件关联为 javascript React 文件。

接下来打开项目中的任何 .js 文件并右键单击并选择“格式化文档”。如果您有多个格式化程序，则关联您最喜欢的格式化程序。我使用了 Prettier 来处理我的格式。

Answer 11

您可以通过在 settings.json

中添加关联来防止VSC错误地格式化JSX。

Code> Preferences> Settings

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

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

Answer 12

我不得不在VSC中禁用JS-CSS-HTML Formatter扩展。唯一解决此问题的方法

Answer 13

Prettier是自以为是的代码格式化程序。它通过解析代码并使用自己的规则（考虑最大行长）重新打印代码，从而实现一致的样式，并在必要时包装代码。包括：的JavaScript 打字稿流 JSX JSON格式的CSS SCSS 减的HTML Vue 角度的 GraphQL 降价促销 YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Answer 14

在阅读了许多不错的建议和解决方法后，我发现只需将鼠标箭头向下放在VSCode编辑器窗口底部的亮蓝色水平栏上-右键单击-将打开一个弹出列表窗口-并取消选择=“编辑器缩进”。

Answer 15

将其添加到您的 .js 代码中，

/* prettier-ignore */

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

15 个答案: