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

问题描述

基本上，我想将任何网页的 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 上专门针对此问题的帖子。

解决方法

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

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

,

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