vscode スマートプロンプトプラグインの共有:nutui-vscode-extension-VSCode-php.cn

この記事では、Vscodeスマートプロンプトプラグイン: Nutui-vscode-extension を共有し、それを 360 度理解して、その使用方法を紹介します。みんなに役立つでしょう！

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

NutUI v3 バージョンがリリースされてから 1 年が経過し、グループ内の社内外の開発者が開発し、さまざまなビジネスシナリオで使用しています。開発者から提起されたさまざまな問題を解決し、コンポーネントの機能を拡張し、開発者の要求にできる限り応えるために、積極的に努力していきたいと思っています。今年以降、マルチテクノロジースタック (React)、コンポーネントレベルの UI カスタマイズ、国際化、およびコードインテリジェントプロンプト機能が段階的に追加されました。この記事では、コードインテリジェントプロンプト (Vscode プラグイン) の機能を紹介し、NutUI-Vscode の実装の詳細な分析を示します。 [推奨学習: 「vscode 入門チュートリアル」]

直感的なエクスペリエンス

コードスマートとはプロンプト？誰もが直感的に理解できるように、まず次の 2 つのgif画像を注意深く観察してみましょう~

コンポーネントライブラリにはコードプロンプトがありません

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

コンポーネントライブラリにスマートプロンプトが追加された後

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

#をご覧になって何か質問はありますか?上の 2 つの写真ですが、どう思いますか?もちろん、スマートプロンプトを使用すると、ドキュメントをすばやく表示したり、コンポーネントのプロパティを表示したりするときに、確認が非常に便利になり、開発効率が大幅に向上することは間違いありません。それでは、実際に体験してみましょう~

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

使用ガイド

ヒント: NutUI 公式 Web サイト開発ツールのサポート、こちらもご覧ください簡単な紹介ああ ~

https://nutui.jd.com/#/ide

nutui-vscode- をvscode# にインストールします## 拡張機能プラグイン

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

veturプラグインをインストールします。このプラグインを知らない場合は、ここに概要があります

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

上記 2 つのプラグインをインストールした後、

vscode、NutUIのスマートプロンプト機能を楽しく体験できます。簡単すぎませんか~

体験は終了しました。私と一緒にそれに慣れてください?原則。
vscodeプラグインを開発しているので、まずその開発、デバッグ、リリースのプロセスをよく理解しておく必要があります。書類が渡されます。こちらをご覧ください:
https://code.visualstudio.com/docs

基本的な

vscode開発プロセスに慣れたら、手順に従ってください。 step このスマートリマインダー機能の謎を解き明かす~

360 総合解説

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

すぐにコンポーネントのドキュメントを表示

vscode スマートプロンプトプラグインの共有:nutui-vscode-extension

上の図からわかるように、開発に

NutUIを使用すると、コンポーネント ## の作成が完了します。 #nut-button、マウスをコンポーネントの上に置くと、プロンプトが表示されます。プロンプトをクリックすると、Buttonコンポーネントの公式ドキュメントが開きます。対応するAPIをすぐに確認して、それを使用して開発できます。まず、

vscode

によって生成されたプロジェクトで対応するフック関数activateを見つけ、その中にProviderを登録し、ターゲットにする必要があります。定義されたタイプファイルfilesは、provideHoverを通じて解析されます。

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

ログイン後にコピー

provideHover

がどのように実装されているかを詳しく見てみましょう。

const LINK_REG = /(?<=<nut-)([\w-]+)/g; const BIG_LINK_REG = /(?<=<Nut-)([\w-])+/g; const provideHover = (document: vscode.TextDocument, position: vscode.Position) => { const line = document.lineAt(position); //根据鼠标的位置读取当前所在行 const componentLink = line.text.match(LINK_REG) ?? [];//对 nut-开头的字符串进行匹配 const componentBigLink = line.text.match(BIG_LINK_REG) ?? []; const components = [...new Set([...componentLink, ...componentBigLink.map(kebabCase)])]; //匹配出当前Hover行所包含的组件 if (components.length) { const text = components .filter((item: string) => componentMap[item]) .map((item: string) => { const { site } = componentMap[item]; return new vscode.MarkdownString( `[NutUI -> $(references) 请查看 ${bigCamelize(item)} 组件官方文档](${DOC}${site})\n`, true ); }); return new vscode.Hover(text); } };

ログイン後にコピー

vscode

によって提供されるAPIと対応する通常のマッチングを通じて、現在のHover行に含まれるコンポーネントを取得し、走査します。さまざまなコンポーネントに対応するMarkDownStringを返し、最後にvscode.Hoverオブジェクトを返します。注意深い方は、この中に

componentMap

も含まれていることにお気づきかもしれません。これは、すべてのコンポーネントとpropsの公式 Web サイトのリンクアドレスを含むオブジェクトです。情報。その一般的な内容は次のとおりです:

export interface ComponentDesc { site: string; props?: string[]; } export const componentMap: Record<string, ComponentDesc> = { actionsheet: { site: &#39;/actionsheet&#39;, props: ["v-model:visible=&#39;&#39;"] }, address: { site: &#39;/address&#39;, props: ["v-model:visible=&#39;&#39;"] }, addresslist: { site: &#39;/addresslist&#39;, props: ["data=&#39;&#39;"] } ... }

ログイン後にコピー

为了能够保持每次组件的更新都会及时同步，componentMap这个对象的生成会通过一个本地脚本执行然后自动注入，每次在更新发布插件的时候都会去执行一次，保证和现阶段的组件以及对应的信息保持一致。这里的组件以及它所包含的信息都需要从项目目录中获取，这里的实现和后面讲的一些内容相似，大家可以先想一下实现方式，具体实现细节在后面会一起详解～


       组件自动补全
       
       我们使用NutUI组件库进行项目开发，当我们输入nut-时，编辑器会给出我们目前组件库中包含的所有组件，当我们使用上下键快速选中其中一个组件进行回车，这时编辑器会自动帮我们补全选中的组件，并且能够带出当前所选组件的其中一个props,方便我们快速定义。
       这里的实现，同样我们需要在vscode的钩子函数activate中注册一个Provider。
       
        vscode.languages.registerCompletionItemProvider(files, { provideCompletionItems, resolveCompletionItem })
        
         ログイン後にコピー
        
       
       其中，provideCompletionItems,需要输出用于自动补全的当前组件库中所包含的组件completionItems。
       
        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定义光标选中当前自动补全的组件时触发的动作，这里我们需要重新定义光标的位置。
       
        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 = `<${item.label} ${propsText}>${tagSuffix}`; item.command = { title: 'nutui-move-cursor', command: 'nutui-move-cursor', arguments: [-tagSuffix.length - 2] }; return item; };
        
         ログイン後にコピー
        
       
       其中，arguments代表光标的位置参数，一般我们自动补全选中之后光标会在props的引号中，便于用来定义，我们结合目前补全的字符串的规律，这里光标的位置是相对确定的。就是闭合标签的字符串长度-tagSuffix.length,再往前面 2 个字符的位置。即arguments: [-tagSuffix.length - 2]。
       最后，nutui-move-cursor这个命令的执行需要在activate钩子函数中进行注册,并在moveCursor中执行光标的移动。这样就实现了我们的自动补全功能。
       
        const moveCursor = (characterDelta: number) => { const active = vscode.window.activeTextEditor!.selection.active!; const position = active.translate({ characterDelta }); vscode.window.activeTextEditor!.selection = new vscode.Selection(position, position); }; export function activate(context: vscode.ExtensionContext) { vscode.commands.registerCommand('nutui-move-cursor', moveCursor); }
        
         ログイン後にコピー
        
       
       
        什么？有了这些还不够？有没有更加智能化的，我不用看组件文档，照样可以轻松开发。emm～～～，当然，请听下文讲解
       
       vetur 智能化提示
       提到vetur,熟悉Vue的同学一定不陌生，它是Vue官方开发的插件，具有代码高亮提示、识别Vue文件等功能。通过借助于它，我们可以做到自己组件库里的组件能够自动识别props并进行和官网一样的详细说明。
       
        vetur详细介绍看这里
        https://vuejs.github.io/vetur/guide/component-data.html#workspace-component-data
       
       
       像上面一样，我们在使用组件Button时，它会自动提示组件中定义的所有属性。当按上下键快速切换时，右侧会显示当前选中属性的详细说明，这样，我们无需查看文档，这里就可以看到每个属性的详细描述以及默认值，这样的开发简直爽到起飞～
       仔细读过文档就可以了解到，vetur已经提供给了我们配置项，我们只需要简单配置下即可，像这样：
       
        //packag.json { ... "vetur": { "tags": "dist/smartips/tags.json", "attributes": "dist/smartips/attributes.json" }, ... }
        
         ログイン後にコピー
        
       
       tags.json和attributes.json需要包含在我们的打包目录中。当前这两个文件的内容，我们也可以看下：
       
        // 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": "属性说明：遮罩层可见，默认值：false" }, "nut-actionsheet/menu-items": { "type": "array", "description": "属性说明：列表项，默认值：[ ]" }, "nut-actionsheet/option-tag": { "type": "string", "description": "属性说明：设置列表项标题展示使用参数，默认值：'name'" }, ... }
        
         ログイン後にコピー
        
       
       很明显，这两个文件也是需要我们通过脚本生成。和前面提到的一样，这里涉及到组件以及和它们关联的信息，为了能够保持一致并且维护一份，我们这里通过每个组件源码下面的doc.md文件来获取。因为，这个文件中包含了组件的props以及它们的详细说明和默认值。
       组件props详细信息
       tags,attibutes,componentMap都需要获取这些信息。 我们首先来看看doc.md中都包含什么？
       
        ## 介绍 ## 基本用法 ... ### Prop | 字段 | 说明 | 类型 | 默认值 | | -------- | ---------------------------------------------------------------- | ------ | ------ | | size | 设置头像的大小，可选值为：large、normal、small，支持直接输入数字 | String | normal | | shape | 设置头像的形状，可选值为：square、round | String | round | ...
        
         ログイン後にコピー
        
       
       每个组件的md文档，我们预览时是通过vite提供的插件vite-plugin-md,来生成对应的html,而这个插件里面引用到了markdown-it这个模块。所以，我们现在想要解析md文件，也需要借助于markdown-it这个模块提供的parse API.
       
        // Function getSources let sources = MarkdownIt.parse(data, {}); // data代表文档内容，sources代表解析出的list列表。这里解析出来的是Token列表。
        
         ログイン後にコピー
        
       
       
       在Token中，我们只关心type即可。因为我们要的是props，这部分对应的Token的type就是table_open和table_close中间所包含的部分。考虑到一个文档中有多个table。这里我们始终取第一个，*** 这也是要求我们的开发者在写文档时需要注意的地方 ***。
       拿到了中间的部分之后，我们只要在这个基础上再次进行筛选，选出tr_open和tr_close中间的部分，然后再筛选中间type = inline的部分。最后取Token这个对象中的content字段即可。然后在根据上面三个文件不同的需求做相应的处理即可。
       
        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; };
        
         ログイン後にコピー
        
       
       好了，以上就是解析的全部内容了。总结起来就那么几点：
       1、创建一个基于vscode的项目，在它提供的钩子中注册不同行为的command和languages,并实现对应的行为
       2、结合vetur,配置packages.json
       3、针对mapjson文件，需要提供相应的生成脚本，确保信息的一致性。这里解析md需要使用markdown-it给我们提供的parse功能。
       最后
       本文从直观体验到实际使用再到实现原理分析，一步步带着大家感受了NutUI和VSCode结合，给大家带来的福利，让大家能在开发上有了全新的体验，同时，也让我们的组件库越发充满了魅力。接下来，让我们共同携手，让它发挥出更加强大的价值～
       更多关于VSCode的相关知识，请访问：vscode教程！！

       
       以上がvscode スマート プロンプト プラグインの共有:nutui-vscode-extensionの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。