It’s enough to develop react and rax style with this vs code plug-in

Time:2021-3-14

It's enough to develop react and rax style with this vs code plug-in

We use react andRaxDeveloped a large number of front-end applications. In the development of JSX file, based on code tips and completion, code fragments, 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 we recommend a super easy to use vs code plug-inIceworks Style HelperIt can greatly improve the development efficiency of external style files.

It's enough to develop react and rax style with this vs code plug-in

New CSS class development experience

Iceworks style helper connects JSX and CSS files to preview, locate and use style properties more efficiently.

Preview and position styles

Just hover the mouse over the style you want to view to preview the details of the existing style content. Then through the CMD (Windows Control) + mouse click, we can quickly locate the style implementation position, which is convenient for us to quickly modify the attributes.

It's enough to develop react and rax style with this vs code plug-in

Use styles

When we need to use the existing style, the automatic association completion appears, which is convenient for us to quickly select the style we need to use.

It's enough to develop react and rax style with this vs code plug-in

Improve classname development experience

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

It's enough to develop react and rax style with this vs code plug-in

When we first write the structure of JSX components and then develop the style file, we will prompt the declared style classname in the JSX file, which can quickly generate the style structure that needs to be modified.

It's enough to develop react and rax style with this vs code plug-in

Brand new in-house style development experience

When developing inline styles in JSX files, prompt and completion of style properties will appear. You can not only preview and view CSS related documents, but also quickly select recommended candidate values. The JSX file also has the ability of style code prompt recommendation.

It's enough to develop react and rax style with this vs code plug-in

New sass development experience

The use of variables has been bothering many sass developers. Iceworks style helper thoroughly improves variable use experience through deep sass file analysis.

Sass variable preview and positioning

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 position of the variable definition and modify the variable by using CMD (Windows Control) + mouse click. Thoroughly improve the use and development experience of SASS variables.

Sass variable usage

When we need to use a variable, the associated variable value appears, 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 variable, the corresponding variable will be replaced, and sass variable will be used more quickly. When sass variables are fully defined, the probability of errors in the use of variables is greatly reduced.

What’s Next

We plan to support more style development scenarios, such as less and CSS modules, and provide more intelligent recommendation and code generation. We will also provide common style scheme encapsulation, such as one click horizontal and vertical center, and visual editing style scheme. Please look forward to it.

It’s time to upgrade and improve our style development experience. Come onDownload experienceLet’s go~

It's enough to develop react and rax style with this vs code plug-in

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]