DevUI is a team with both design and engineering perspectives, serving huawei DevCloud platform and huawei internal background systems, as well as designers and front-end engineers. Add devui Helper (Devui-Official) DevUIHelper plugin: Devuihelper-lsp (welcome Star)
The introduction
Hi, I’m the lead developer of devuiHelper. You may have seen the DevUIHelper design And Development Walkthrough (1) in the previous article and learned about our plug-in development process and architecture. Today, I’m going to talk about the features of the plug-in to make it easier for you to use all the features of the plug-in.
1 Basic Features
1.1 load documents into vscode
In a sense, the team’s experience defines their product. When I came into contact with this project, my team mates were still using 15.6-inch notebooks at school. When we decide to use a component library, we are faced with a painful choice: do we give half of the tiny screen to the API documentation, or do we switch back and forth between the IDE and the plugin’s official website? Obviously neither was a comfortable choice to use, which led to the first feature of our plugin: loading the API documentation into the plugin made it fun to play with even small screen development.
1.2 Webstorm style prompt function
We noticed that a lot of people were using WebStorm because the IDE really provided great code prompts, but the documentation of the prompts was not as complete as ours, so we wondered: could we implement similar prompts with our plugin?
During development, we realized that there seemed to be an increasing need for a more powerful kernel, so we started designing the structure. After a lot of code rewriting, we implemented a Webstorm style component library prompt: When you press space inside a Tag, you can see all the attributes that are currently available, both tag attributes and command attributes, which I think is the best feature for WebStorm.
1.3 Error cue
As the code completion function was being improved, we noticed that if the user deleted key attributes by mistake, it could cause compilation failures, which could usually only be resolved by checking the official website. The idea was that it would be cool if I knew how to correct errors in vscode. Thanks to our parser, this feature didn’t take much time to implement. Now you can see where compilation failures might occur in the plug-in.
1.4 Try to make layout input easier
As a hint plug-in for a component library, this is probably enough. The other day I felt a bit of pain while writing an HTML file. When I had to write two left and right containers in a large container, the left one for the Accordion and the right one for the D-data-table, I wondered if I could write this code in a quick and clear way. This idea was incorporated into the plugin within two weeks, and since it starts with an @, we call it an @ expression. You can read the syntax in Section 3 to help you use this feature.
2 Some details
We believe that even small features can dramatically improve the user experience. If you know more about them, you may be more comfortable using them.
2.1 Modifying labels Separately
Our tag hints are usually incomplete in the form of code blocks, but sometimes we don’t always need to complete an entire code block. Such as:
<d-button id="avatar1" class="myavatar"></d-button>
Copy the codeObviously, the developer mistyped the D-Avater tag instead of the D-Button tag for some reason, and at this point, we want to make only the tag changes. DevuiHelper supports this change and can prompt:
2.2 Understand where attributes come from
When you use both tags and directives in a project, hints can become very complicated, and you may want to know which attributes are caused by whom. This feature is available in the latest V4.4.1 release, and these tips will help you better understand what attributes mean
2.3 Personalized Settings
After loading documents into vscode, we found that more and more users reduced the amount of shuffling between documents and vscode. However, this feature is not perfect, and it can make your development experience very bad because large chunks of floating tips drown out large pages, so we want you to either use rich documentation tips or turn them off if necessary. In V4.4.x and later, we supported user customization, which you can now use to control whether to display the hover prompt.
In future releases, we will provide more options, such as showing only API documentation/showing only introduction documentation, etc. Stay tuned for more customizable configurations as well.
3 @ Expression
The @ expression is one of our more distinctive features, and although it uses a relatively simple syntax, it is still a language in a sense. Note that this feature is still a work in progress. For now, expressions aren’t perfect, but we’ve developed some useful syntax that we hope you’ll enjoy using! We think that every developer who helped us during the beta phase is worthy of respect, and if you have used this feature, you can find it in the Github repository at github.com/sspku-yqLiu… Submit an Issue or PR, or email feedback directly to [email protected]. You will be considered an important contributor and we will give you a souvenir at the end of this feature development thank you for your participation!
3.1 How To Trigger
The expression needs to be in a separate string and must start with @. Such as:
<div>
@d.but.pri
...
</div>
Copy the codeNote: In future stable versions, we will allow expressions inside tag names, such as <d-button.pri, so you can use expressions more easily.
3.2 shorthand
We allow labels or directives to be abbreviated. For example, D-tree-select can be abbreviated to TS, and dDropDown can be abbreviated to DDD, because it can be broken down to: D Drop Down and take the first letter of each word, and you might wonder why d-tree-select isn’t shortened to DTS? This has to do with how expressions are written, as explained below.
3.3 the ‘. ‘operator
The ‘.’ operator inherits from general programming ideas,‘a.b’ in the expression implies that b is an attribute of aThis attribute can be either a normal HTML attribute or an instruction attached to a tag. At the same time, when a is an instruction, the expression can also be interpreted as the b attribute or the value of the attribute under the INSTRUCTION A. Therefore,If you are using a component from the DevUI component library, the expression must start withd.At the beginning, which means that the content is under the DevUI component library. If you enter a normal HTML tag, you don’t need to start withd.At the beginning.But once a component library is specified, it is used by default until the next change.
examples: d.button->The Button component of the Devui component library-><d-button></d-button>
d.but.pri->The Button component of the Devui component library contains an attribute of PRI-><d-button bsStyle='primiary></d-button>
button.ddd->The ddropdown directive used by the button label-><button dDropDown></button>
d.button.pri.icon->The Button component of the Devui component library contains properties for pri and icon -> <d-button [icon]=""></d-button>
You may have noticed that in the last example, the icon in pri.icon is not interpreted as a property of pri, because the lowest parent property (i.e., a) can only be a label, although we could use some parentheses to reduce it to a property or instruction, which would be the content of other operators. On the other hand, you might find that since there are quite a few possible matches, what are their priorities?
In fact, you don’t need to keep track of such complex matching rules, we’ve reduced the likelihood of collisions to a very low level, just remember that the operator can match attribute values, attribute names, and instructions.
3.4 the ‘[]’ operator
The ‘[]’ operator comes from the idea of arrays and is used to replace the + in CSS syntax. This makes it possible to perform operations between multiple child elements. On the other hand, it also takes on part of the binding function, allowing the ‘.’ operation to be performed in lower dimensions.
examples:
An array of usage
@d.but.[pri,com]->There are two D-button tags with property values pri and com respectively-><d-button bsStyle='primary'></d-button> <d-button bsStyle='common'></d-button>
@div>[d.ts,img]->Div has two descendants, the D-Treeselecter and img tags-><d-button bsStyle='primary'></d-button> <d-button bsStyle='common'></d-button>
@d.but.[dda.date]->The datepicker directive is used, and the date attribute in this directive is used-><d-button dDatepicker [dateConverter]=""></d-button>
3.5 ‘! ‘Boolean operator
We provide a simple syntax sugar when the value of the property you want to use is Boolean, and when you enter the property, the value is true, enter! The property name, the value is false.@d.but.[dda.date]->The datepicker directive is used, and the date attribute in this directive is used-><d-button [showLoading]="true"></d-button> 
@d.but.! sho->The D-Button component is used, and due to the use of! The value of showloading is false-><d-button [showLoading]="false"></d-button>
3.6 ‘{}’ Adds the contents of the label:
Use curly braces to add content between two tags: This content can be incrementing, which can have interesting effects on multiple tags:@d.but{mybutton}->The D-button component is used and the content is myButton-><d-button>mybuttom</d-button> 
@d.but{mybutton(2}->The D-button component is used, the content is myButton, and the index is incremented from 2-><d-button>mybuttom</d-button>
3.7 some native vscode supported expressions
Vscode supports the native CSS selector syntax for label input, as does devuiHelper
- When the ‘. ‘operator fails to match, it degrades to class in CSS syntax
- Use descendant selectors
- Using the multiplication
- Specify the id
4. Enjoy using it
At first, devuiHelper was just a convenient plugin for property completion, but we always believed that this plugin could be made more useful and better. We are very grateful to the developers who are using devuiHelper, and your use has been our motivation! DevuiHelper is also highly recommended for those who have not yet installed devuiHelper via Githubgithub.com/sspku-yqLiu… Contact us and hope we can make this plugin better together!
In the next article, we will start from a developer’s point of view, explaining the idea of feature development and vscode plug-in development experience. If you want to know how our function is implemented, you are welcome to continue to subscribe to our article, finally, for a wave of star, if you are happy, you might as well give your precious star in our Git repository, your support is our development power!
Join us
We are DevUI team, welcome to come here and build elegant and efficient human-computer design/research and development system with us. Email: [email protected].
Author: move times dozen times dong Dong dong
Editor: DevUI team
VSCode plugin DevUIHelper design guide (3) is coming soon, please look forward to ~
Previous articles are recommended
RxJS source code parsing (4) — Operator II
VSCode plugin DevUIHelper design and Development overview (1)
Dark Mode and Thematic Development of Web Interfaces