我们开发了很多前端应用程序都是通过React和Rax。在开发JSX文件时，基于代码提示和补全、代码片段、TypeScript等，页面逻辑的开发效率大大提高。然而，我们往往忽略了样式的开发效率。相信大家在开发样式文件的过程中一定遇到过很多不便。现在给大家推荐一款超级好用的VSCode插件IceworksStyleHelper，可以大大提高外部样式文件的开发效率。全新的CSSClass开发体验IceworksStyleHelper打通了JSX和CSS文件之间的联系，让您更高效地预览、定位和使用样式属性。预览和定位样式只需将鼠标悬停在要查看的样式上，即可预览现有样式内容的详细信息。然后使用Cmd（WindowsControl）+鼠标点击快速定位到样式实现位置，这样我们就可以快速修改属性了。使用样式当我们需要使用已有样式时，会出现自动关联补全，方便我们快速选择需要使用的样式。改善className开发体验在编辑组件的className属性时，还会有样式、定位和快速补全的预览。当我们先编写JSX组件的结构，再开发样式文件时，会提示JSX文件中声明的样式className，可以快速生成需要修改的样式结构。全新的内联样式开发体验在JSX文件中开发内联样式时，会出现样式属性的提示和补全。不仅可以预览和查看CSS相关文档，还可以快速选择推荐的候选值。使JSX文件也具有建议样式代码提示的能力。新的SASS开发体验中变量的使用一直困扰着很多SASS开发者。IceworksStyleHelper通过深入的SASS文件分析极大地改善了变量的使用体验。SASS变量预览与定位当鼠标悬停在SASS文件中要查看的变量上时，可以预览变量值和实际颜色。同时可以通过Cmd(WindowsControl)+鼠标点击快速跳转到变量定义的位置。修改变量。全面提升SASS变量的使用和开发体验。SASS变量使用当我们需要使用一个变量时，会出现关联的变量值，并可以预览对应的变量值，保证变量使用的正确性。同时，当我们使用的值与现有变量的值相同时，相应的变量也会被替换，可以更快速地使用SASS变量。在充分使用和定义SASS变量的同时，也大大降低了错误使用变量的概率。What'sNext我们计划支持更多样式开发场景，例如Less、CSSModules等，同时提供更智能的推荐和代码生成。我们还将提供一揽子常用的样式解决方案，例如一键水平和垂直居中、可视化编辑样式解决方案，敬请期待。是时候升级完善我们的风格开发体验了，快来下载体验吧~
