vscode-plugin-skin-associate

换肤场景色值联想插件

• 安装
• 功能
• 注意事项
• 用法
• 本地开发
• 联系我们

安装

换肤场景推荐使用已有的换肤组件，RN：https://g.hz.netease.com/NeteaseMusicUI/react-native/rn-theme

• vscode扩展商城中搜索 vscode-plugin-skin-associate 下载安装即可

功能

• 输入rgba色值联想至对应换肤色值变量

• 输入十六进制色值联想至对应换肤色值变量

• 根据文件类型不同提供相对应的变量（css文件提供--music类型，js文件提供换肤组件预设的变量）

• 相同色值给出色值含义提示

注意事项

• 使用此插件推荐在项目中安装平台的换肤组件，RN：https://g.hz.netease.com/NeteaseMusicUI/react-native/rn-theme

• 使用联想时，对于rgba色值，需要先输入rgba或其中任一字母开头即可,不能直接以数字或者"("等特殊字符开头

• 在字符串中不能联想

• 对于像#010101这样的纯数字的十六进制色值，必须以#开头才能正常联想

• 对于十六进制的色值，有些后面会带一些小数，它代表的是这个色值的透明度，比如rgba(255,255,255,0.5)会转换成#FFFFFF 0.5，没有则代表透明度为1

用法

• css/less文件中使用(无需输入var()，插件会自动补全)

  • 直接输入具体色值如果存在对应变量即可正常联想

  

• js/jsx文件中使用

  • 直接输入具体色如果存在对应变量值即可正常联想

  

• 提示

  • 能够正常联想的情况下，在联想列表的右侧会自动出现一个提示框提示当前色值变量的具体含义

  

  • 如果没有出现，将鼠标移到想要查看的色值变量的选项上，点击这个小箭头即可出现

  

本地开发

• 实际的开发过程中，我们只需要关注extension.js文件即可

• npm install

• 按下F5就会弹出一个调试窗口可以查看插件效果

联系我们

Issue反馈：https://g.hz.netease.com/wuxiaolong/vscode-plugin-skin-associate/-/issues