We have developed a large number of front-end applications through react and rax. In the development of JSX file, based on code prompt and completion, code fragment, typescript and other ways, it can improve the efficiency of page logic development. However, we often neglect the efficiency of style development. I believe you will encounter many inconveniences in the process of developing style files.
Now I recommend a super easy to use vs code plug-inIceworks Style HelperIt can greatly improve the development efficiency of external style files.
New CSS class development experience
Iceworks style helper connects JSX and CSS files, and can preview, locate and use style properties more efficiently.
Preview and position styles
Just hover over the style you want to view to preview the existing style content details. Then through the CMD (Windows Control) + mouse click, quickly locate the position of the style implementation, convenient for us to quickly modify the property.
When we need to use the existing style, the automatic association completion will facilitate us to quickly select the style to be used.
Improving the classname development experience
When editing the classname property of a component, there will also be preview, positioning and quick completion of styles.
When we write the structure of the JSX component first, and then develop the style file, we will prompt the declared style classname in the JSX file, which can quickly generate the style structure to be modified.
New in line style development experience
When developing inline styles in JSX files, prompt and completion of style attributes will appear, which can not only preview and view CSS related documents, but also quickly select recommended candidate values. The JSX file also has the ability to prompt the recommendation of style code.
New sass development experience
The use of variables has been bothering many sass developers. Iceworks style helper thoroughly improves variable usage experience through deep sass file analysis.
Sass variable preview and location
When you hover over the variable you want to view in the sass file, you can preview the variable value and the actual color. At the same time, you can quickly jump to the variable definition position through the CMD (Windows Control) + mouse click to modify the variable. Thoroughly improve the use and development experience of SASS variables.
Sass variable usage
When we need to use a variable, the associated variable value will appear, and the corresponding variable value can be previewed to ensure the correctness of variable use. At the same time, when the value we use is the same as the value of the existing variables, there will also be the replacement of the corresponding variables, so that the sass variables can be used more quickly. While making full use of defining sass variables, it also greatly reduces the probability of errors in the use of variables.
We plan to support more style development scenarios, such as less, CSS modules, etc., and provide more intelligent recommendation and code generation. We will also provide common style scheme encapsulation, such as one click horizontal vertical center, and visual editing style scheme. Please look forward to it.
It’s time to upgrade and improve our style development experience. Download the experience~