VS Code - 如何自动转换内联样式字符串以响应内联样式对象答案

【问题标题】：VS Code - How To Automatically Convert Inline Style Strings To React Inline Style ObjectsVS Code - 如何自动转换内联样式字符串以响应内联样式对象
【发布时间】：2021-02-20 00:59:55
【问题描述】：

基本上，我想将任何网页的 HTML 粘贴到 VS Code 中，按下一个按钮，然后中提琴就会转换这样的东西......

<div id="txt_2" style="position:absolute;left:1px;top:0px;width:958px;height:56px;overflow:hidden;"></div>

进入这个...

<div 
    id="txt_2" 
    style={{
        position: "absolute", 
        left: "1px", 
        top: "0px", 
        width: "958px", 
        height: "56px", 
        overflow: "hidden"
    }}></div>

...只需按一下按钮，就像这个网站可以做的那样： https://casbin.org/CssToAndFromReact/

虽然该网站很棒，但我仍然必须来回复制/粘贴，复制/粘贴。如果一个页面有数百个样式字符串，您可以看到它是如何消耗时间的。

我查看了，但没有在 Stack 上看到专门针对此问题的帖子。

【问题讨论】：

您可以使用 sn-p 转换所选文本
@rioV8 谢谢。我意识到了这一点。但是，这更像是复制任何网站的正文标签，将其放入 VS Code（因此它是大量 HTML），然后运行 1 个命令来格式化所有内容 - 包括将“class=”更改为“className=”等。完全响应组件从任何网页的正文标签返回，智能。

标签： html css visual-studio-code vscode-settings

【解决方案1】：

我来自 Casbin 团队。 https://casbin.org/CssToAndFromReact/的源代码是repo的master分支：https://github.com/casbin/CssToAndFromReact，它被部署到了gh-pages分支。

我们从https://github.com/htbkoo/CssToAndFromReact 分叉并添加了一些更改。您可以使用我们的源代码组装一个脚本以针对多个文件自动运行。

【讨论】：

【解决方案2】：

try this
This simple little tool (forked to htbkoo/CssToAndFromReact from staxmanade/CssToReact) is intended to help translate plain CSS into and back from the React in-line style specific JSON representation. Making it easy to copy and paste into an inline React component or a CSS stylesheet.

访问https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter

【讨论】：