This vs code plug-in is enough to develop react and rax styles

Time:2020-9-28

This vs code plug-in is enough to develop react and rax styles

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.
This vs code plug-in is enough to develop react and rax styles
This vs code plug-in is enough to develop react and rax styles

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.

This vs code plug-in is enough to develop react and rax styles

Using styles

When we need to use the existing style, the automatic association completion will facilitate us to quickly select the style to be used.

This vs code plug-in is enough to develop react and rax styles

Improving the classname development experience

When editing the classname property of a component, there will also be preview, positioning and quick completion of styles.

This vs code plug-in is enough to develop react and rax 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.

This vs code plug-in is enough to develop react and rax styles

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.

This vs code plug-in is enough to develop react and rax styles

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.

This vs code plug-in is enough to develop react and rax styles

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.

What’s Next

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~

This vs code plug-in is enough to develop react and rax styles