Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use the Vscode intelligent prompt plug-in", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the Vscode Smart Tip plugin.

Quick View component documentation

When we are using NutUI for development, we write a component nut-button, mouse Hover to the component, there will be a prompt, click the prompt to open the official document of the Button component. We can quickly look at the corresponding API to develop with it.

First of all, we need to find the corresponding hook function activate in the project generated by vscode, register a Provider in it, and then parse the defined type file files through provideHover.

Const files = ['vue',' typescript', 'javascript',' react']; export function activate (context: vscode.ExtensionContext) {context.subscriptions.push (vscode.languages.registerHoverProvider (files, {provideHover}));}

Let's take a look at how provideHover is implemented.

Const LINK_REG = / (? $(references) Please see ${bigCamelize (item)} component official documentation] (${DOC} ${site})\ n`, true);}); return new vscode.Hover (text);}}

Get the components contained in the current Hover row through the API provided by vscode and the corresponding regular matching, then return the MarkDownString corresponding to different components by traversing, and finally return the vscode.Hover object.

If you are careful, you may find that it also contains a componentMap, which is an object that contains the official website link addresses and props information of all the components. It roughly looks like this:

Export interface ComponentDesc {site: string; props?: string [] } export const componentMap: Record = {actionsheet: {site:'/ actionsheet', props: ["vmurModellVisibleships]]}, address: {site:'/ address', props: [[" vripmoModellVisibleships "]}}, addresslist: {site:'/ addresslist', props: [" data='' "]}...}

In order to keep each component update synchronized in time, the generation of the componentMap object will be executed through a local script and then automatically injected, and will be executed every time the plug-in is updated and released, ensuring that it is consistent with the current component and the corresponding information. The components here and the information it contains need to be obtained from the project directory. The implementation here is similar to some of the contents described later. You can think about the implementation first. The details of the implementation will be explained in detail later.

Automatic completion of components

We use the NutUI component library for project development, when we enter nut-, the editor will give us the current component library contains all the components, when we use the up and down keys to quickly select one of the components to enter, then the editor will automatically help us complete the selected components, and can bring out the currently selected components of one of the props, convenient for us to quickly define.

For the implementation here, we also need to register a Provider in vscode's hook function activate.

Vscode.languages.registerCompletionItemProvider (files, {provideCompletionItems, resolveCompletionItem})

Among them, provideCompletionItems needs to output the component completionItems contained in the current component library for automatic completion.

Const provideCompletionItems = () = > {const completionItems: vscode.CompletionItem [] = []; Object.keys (componentMap). ForEach ((key: string) = > {completionItems.push (new vscode.CompletionItem (`nut-$ {key} `, vscode.CompletionItemKind.Field), new vscode.CompletionItem (bigCamelize (`nut-$ {key}`), vscode.CompletionItemKind.Field);}); return completionItems;}

ResolveCompletionItem defines the action that is triggered when the cursor selects the current auto-complete component. Here we need to redefine the position of the cursor.

Const resolveCompletionItem = (item: vscode.CompletionItem) = > {const name = kebabCase (item.label) .slice (4); const descriptor: ComponentDesc = componentMap [name]; const propsText = descriptor.props? Descriptor.props:''; const tagSuffix = ``; item.insertText = `${tagSuffix}`; item.command = {title: 'nutui-move-cursor', command:' nutui-move-cursor', arguments: [- tagSuffix.length-2]}; return item;}

Among them, arguments represents the position parameter of the cursor. Generally, after we automatically complete the selected cursor, the cursor will be in the quotation marks of props, which is easy to define. We combine the law of the current completed string, where the cursor position is relatively determined. This is the string length of the closed label-tagSuffix.length, followed by the position of the first two characters. Namely arguments: [- tagSuffix.length-2].

Finally, the execution of the nutui-move-cursor command requires registration in the activate hook function and cursor movement in moveCursor. In this way, our automatic completion function is realized.

Const moveCursor = (characterDelta: number) = > {const active = vscode.window.activeTextTextEditor; const position = active.translate ({characterDelta}); vscode.window.activeTextEditorroom.selection = new vscode.Selection (position, position);}; export function activate (context: vscode.ExtensionContext) {vscode.commands.registerCommand ('nutui-move-cursor', moveCursor);}

Vetur intelligent prompt

When it comes to vetur, students who are familiar with Vue must be no stranger, it is a plug-in officially developed by Vue, with code highlighting prompts, identification of Vue files and other functions. With the help of it, we can make sure that the components in our component library can automatically identify props and explain it in the same detail as the official website.

As above, when we use the component Button, it automatically prompts for all the properties defined in the component. When you press the up and down keys to quickly switch, a detailed description of the currently selected attribute will be displayed on the right, so that we can see the detailed description and default value of each property without looking at the document. This kind of development is almost awesome.

After reading the documentation carefully, you can see that vetur has provided us with configuration items, and we just need to configure them simply, like this:

/ / packag.json {... "vetur": {"tags": "dist/smartips/tags.json", "attributes": "dist/smartips/attributes.json"},...}

Tags.json and attributes.json need to be included in our package catalog. We can also take a look at the contents of these two files:

/ tags.json {"nut-actionsheet": {"attributes": ["v-model:visible", "menu-items", "option-tag", "option-sub-tag", "choose-tag-value", "color", "title", "description", "cancel-txt", "close-abled"]} .} / / attributes.json {"nut-actionsheet/v-model:visible": {"type": "boolean", "description": "attribute description: mask layer is visible Default values: false "}," nut-actionsheet/menu-items ": {" type ":" array "," description ":" attribute description: list item, default value: [] "}," nut-actionsheet/option-tag ": {" type ":" string "," description ":" attribute description: set list item title display usage parameters Default value: 'name' "},...}

Obviously, these two files also need to be generated by script. As mentioned earlier, components and the information associated with them are involved, and in order to be consistent and maintain a copy, we get it here through the doc.md file under the source code of each component. Because this file contains the props of the components as well as their detailed description and default values.

Component props details

Tags, attibutes, and componentMap all need to get this information. Let's first take a look at what is included in doc.md?

# # introduction # # basic usage. # Prop | Field | description | Type | default value | |-|- -| | size | set the size of the avatar Available values are: large, normal, small. You can enter numbers directly | String | normal | | shape | set the shape of the avatar. Available values include: square, round | String | round |.

When we preview the md document of each component, we generate the corresponding html through the plug-in vite-plugin-md provided by vite, which refers to the markdown-it module. Therefore, if we want to parse the md file, we also need to rely on the parse API provided by the markdown-it module.

/ / Function getSourceslet sources = MarkdownIt.parse (data, {}); / / data represents the content of the document, and sources represents the parsed list list. What is parsed here is the Token list.

In Token, all we care about is type. Because what we want is props, the type of Token corresponding to this part is the part contained between table_open and table_close. Consider that there are multiple table in a document. Here we always take the first one. * this is also what our developers need to pay attention to when writing documents.

Once we have the middle part, we just filter again on this basis, select the middle part between tr_open and tr_close, and then filter the middle part type = inline. Finally, take the content field in the Token object. Then we can do the corresponding processing according to the different requirements of the above three documents.

Const getSubSources = (sources) = > {let sourcesMap = []; const startIndex = sources.findIndex ((source) = > source.type = TYPE_IDENTIFY_OPEN); const endIndex = sources.findIndex ((source) = > source.type = TYPE_IDENTIFY_CLOSE); sources = sources.slice (startIndex, endIndex + 1); while (sources.filter ((source) = > source.type = = TR_TYPE_IDENTIFY_OPEN) .length) {let trStartIndex = sources.findIndex (source) = > source.type = = TR_TYPE_IDENTIFY_OPEN) Let trEndIndex = sources.findIndex ((source) = > source.type = TR_TYPE_IDENTIFY_CLOSE); sourcesMap.push (sources.slice (trStartIndex, trEndIndex + 1)); sources.splice (trStartIndex, trEndIndex-trStartIndex + 1);} return sourcesMap;}

All right, that's all the parsing is all about. To sum up, there are only a few points:

1. Create a vscode-based project, register the command and languages of different behaviors in the hooks it provides, and implement the corresponding behaviors

2. Configure packages.json with vetur

3. For map json files, it is necessary to provide corresponding generation scripts to ensure the consistency of information. Parsing md here requires the use of the parse functionality provided to us by markdown-it.

At this point, I believe you have a deeper understanding of "how to use the Vscode Smart Tip plug-in". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.