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

Question

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

<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/

虽然那个网站很棒，但我仍然必须 copy/paste、copy/paste 来回。如果一个页面有数百个样式字符串，您会发现这会占用多少时间。

我看了看，但在 Stack 上没有专门解决这个问题的帖子。

Answer 1

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

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

Answer 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

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

VS Code - How To Automatically Convert Inline Style Strings To React Inline Style Objects

html

css

visual-studio-code

vscode-settings