可视化工作室代码更改格式(React-JSX)

在 index.js 中有以下代码片段

class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}


代码工作，但每次我保存(ctrl + s)可视工作室格式的 jsx 像这样:

class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}

我该怎么解决这个问题，谢谢

83940 次浏览
小开

You can install an extension like react-beautify that helps you format your jsx code.

它被发现 给你

这个扩展包装了 pretydiff/esformatter 来格式化 javascript、 JSX、 typecript、 TSX 文件。

小开
最佳答案

最后，真正起作用的是将底部工具栏上的文件格式从 JavaScript 改为 JavaScript React。 我在这里发表它，以备将来参考，因为我没有找到任何关于这个主题的文档。

enter image description here

除上述外。如果单击“配置文件关联”，则为。你可以设置所有。Js 文件到 Javascript 的响应

小开

另外，使用 。 jsx扩展名保存文件可以在 vscode 中解决这个问题。

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

我注意到，每次打开扩展名为 . js的反应文件时，都必须完成建议的工作

小开

确保在当前工作区中没有启用多个 javascript 格式化程序。(对于当前工作区，必须禁用其余部分)。

Response-Beauty 主要起到魔力的作用，但是如果您已经安装了其他 JS 格式化程序/美化程序，那么它就失败了。

在我的例子中，我已经安装了反应-美化和 JS-CSS-HTML 格式化扩展。我必须为我当前的工作区禁用 JS-CSS-HTML 格式化程序。

小开

Install Prettier (if not installed by default) and try to add this to your user or workplace settings:

"prettier.jsxBracketSameLine": true

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

Trigger autoformat (Alt+Shift+F) and check if works.

小开

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

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

我也有过类似的问题，后来我发现是“美化”的延伸引起的。卸载扩展后，一切正常。

小开

我纠结了很久，终于找到了一个解决方案

{
"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"]
小开

通过在 设置 json中添加关联，可以防止 VSC 错误地格式化 JSX

Code > Preferences > Settings

在“设置”窗口中搜索 协会，单击“ 在设置中编辑”，然后添加:

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

我不得不在 VSC.only 解决方案中禁用 JS-CSS-HTML Formatter 扩展

小开

我只是添加了上面提到的所有组合。

  1. 加了这个
"files.associations": {
"*.js": "javascriptreact"
}
  1. 还加了这个
"beautify.ignore": ["**/*.js","**/*.jsx"]
  1. 删除额外的 js 格式
  2. 装得更漂亮
  3. 打开更漂亮和格式化
小开

Prettier 是一个固执己见的代码格式化程序。它通过解析代码并使用自己的规则重新打印来强制执行一致的样式，这些规则将最大行长考虑在内，并在必要时包装代码。 包括: JavaScript 打字机 流动 JSX JSON CSS SCSS 少一点 超文本标示语言 Vue 角度 GraphQL 降价 YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

小开

在阅读了许多很棒的建议和解决方案之后，我发现我可以简单地将鼠标箭头放在 VSCode 编辑器窗口底部的亮蓝色水平条上——右击——它会打开一个弹出列表窗口——然后取消选择 = “ Editor Indention”。

小开

把它添加到你的.js 代码中,

/* prettier-ignore */
小开

打开 VisualStudio 代码设置。参考下面的图像，看看如何导航到设置。

Open Vscode Settings

一旦 设置标签打开。如果你想为所有的项目做设置变更，然后选择 用户子标签，如果只是为当前的项目，然后选择 工作区子选项卡。

Add file Associations

在搜索文本框中键入“文件关联”，然后按 Enter。

点击 增加项目。

  • 设定 物品: * . js
  • set 价值 : javascriptreact

Above changes will start associating all *js files in the project as 反应文件.

接下来打开项目中的任何 .js文件，右键单击并选择 Format Document。如果有多个格式化程序，那么关联您喜欢的格式化程序。我已经使用 更漂亮来处理我的格式。

小开

您可以在 VSCode 底部的状态栏中双击 JavaScript，然后将格式从 JavaScript 更改为 React (在 Select language 模式下选择 React以与 '.jsx'关联)

小开

以下是对我有效的方法

我点击了屏幕底部的语言模式(Javascript React)

enter image description here

Then chose the Configure React Javascript Language based setting option

enter image description here

然后将 javascript 反应默认格式化程序更改为如图所示的更漂亮的格式化程序。

enter image description here

That pretty much did it for me after I saved the React file.


提交答案