Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>css-to-rnstyleNew to Visual Studio Code? Get it now.
css-to-rnstyle

css-to-rnstyle

2333Ge

|
231 installs
| (1) | Free
css-to-rnstyle
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

功能说明

将css样式和RN样式互相转换

CSS转RN时:

  • 支持删除非RN样式的key
  • background 为颜色时转换成 backgroundColor
  • border、border-left等属性会转换成borderWidth、borderColor等属性(因缺省时判断是何属性较复杂,暂时均按照 【border: border-width border-style border-color】结构处理)

示例1

快捷键

  • ctrl + 9:css转RN style
  • ctrl + 8:RN style转css
  • ctrl + -:附赠小功能,将选中元素在小驼峰、下划线、中划线间转换

配置

配置项 类型 默认值 描述
css-to-rnstyle.delete-if-not-rn-keys boolean true css转RN样式时,是否删除非RN样式的key,默认删除

示例1

片段1:

position: absolute;
left: 50px;
top: 192px;
width: 1804px;
height: 1181px;
opacity: 1;
background: #FFFFFF;
box-sizing: border-box;
border: 1px solid #BFBFBF;

片段2:

position: absolute;
left: 50px;
top: 192px;
width: 1804px;
height: 1181px;
opacity: 1;
background-color: #FFFFFF;


border-width:1px;
border-style:solid;
border-color:#BFBFBF;

片段3:

position: absolute;
left: 50px;
top: 192px;
width: 1804px;
height: 1181px;
opacity: 1;
background-color: #FFFFFF;


border-width:1px;
border-style:solid;
border-color:#BFBFBF;

ctrl + 9 将片段1转换为片段2

ctrl + 8 将片段2转换为片段3

示例2

快捷键 ctrl + - 将单词像下列形式转换

convertRnStyleToCss

  ↓                          ↖

convert_rn_style_to_css  →  convert-rn-style-to-css
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft