Легко летать! Плагин VSCode DevUIHelper дизайн и разработка Raiders (a)

DevUI – это команда, которая занимается как проектированием, так и проектированием, обслуживая HUAWEI CLOUD.DevCloudПлатформа и несколько промежуточных и серверных систем в Huawei предназначены для дизайнеров и проектировщиков.
Официальный сайт:devui.design
Библиотека компонентов Ng:ng-devui(Добро пожаловать в Звезду)
Официальное общение: добавьте PEVUI Assistant (Devui-Shonial)
Плагин DevUIHelper: DevUIHelper-LSP (Добро пожаловать в Star)

1. История развития

Чтобы повысить удобство использования компонентов DevUI для пользователей:

1. Для библиотеки компонентов DevUI в настоящее время существует только плагин для вставки блоков кода.Пользователи могут вводить ключевые слова в файле html для создания блоков кода

Например введитеd-button, vscode автоматически свяжется, и после выбора появится блок кода:<d-button (btnClick)=> </d-button>^snippets

2. Избегайте постоянного переключения на веб-сайт библиотеки компонентов для запроса демо и API в процессе использования компонентов.

что улучшает способность разработчика писать<d-button type="primary"></d-button>Эффективность шрифта, при наведении курсора мыши на шрифт после написания должно появляться соответствующее описание типа. Тип, значение по умолчанию и описание должны соответствовать описанию типа страницы API на веб-сайте. Разделение может иметь следующие два требования:

• автозаполнение, ввод<d-Такойметка компонента, могу подсказатьAPIи полный, и может подсказатьпараметри полный.
• Предоставляйте релевантные подсказки при наведении для существующего кода: пользователь наводит курсор на ключевое слово, чтобы отобразить соответствующее описание.

Похоже, что многие UI-библиотеки не реализовали перемещение документации API с веб-сайта в код, чего мы могли бы достичь».страница включения документации по API".

2. Обзор разработки

2.1 Функциональное предположение

Первоначальная версия функции задумана следующим образом: часть диаграммы «рыбья кость», близкая к голове рыбы, означает более высокий приоритет и должна быть разработана первой.Наряду с устранением ошибок появляются новые идеи: полагаться на поиск сигналов тревоги/подсказок с изображениями при заполнении/предоставлении пользовательских изображений графического интерфейса....

2.2 Отображение существующих достижений

2.3 Как это достигается?

Этот плагин стоитстаршийизОснование, и со ссылкой на парсерную часть подключаемого модуля Angular Language Service для разработки, общая логикаПолучение материалов + подходящие инструменты = реализация функции.Подробности разработки плагина, такие как函数注册/package配置Пожалуйста, смотрите старшую статью, большое спасибо за то, что они поделились!

2.3.1. Идеи каждой версии

• 1.0Идея версии: Найдите экспортируемый модуль материала с помощью сопоставления строки и вызовите соответствующую API для завершения функции при необходимости
• 2.0Идея версии: Объектно-ориентированная инкапсуляция функций и параметров для последующего расширения, интеграции модулей материалов, реконструкции их форм и прокладывания пути для объективации модулей ресурсов 3.0.
• 3.0Идея версии: внедрение серверной частиLSP, предложение тега генерируется с помощью лексического/синтаксического/семантического анализаASTЗамените исходное обычное соответствие и замените исходный локальный API серверным API.
• 4.0Идея версии: Программирование, ориентированное на интерфейс, еще больше снижает степень связанности каждого модуля, оптимизируетparser, попробуйте добавить полнофункциональную поддержку инструкций и пользовательских команд для достижения быстрой разработки и т.д.

Внешний вид: Как его найти? Я узнал об этом заранее. Прочтите документ, чтобы увидеть, что API — это одно. Прочтите отслеживаемость исходного кода — это одно.

2.3.2 Текущая общая структура

Текущая архитектура показана ниже:

1. слой управления:кserver.tsДля входа установите соединение с языковым сервером через TCP-соединение, предоставляемое LSP, чтобыHOSTКоординация вызовов функциональных API и активация (инициализация) одновременноParserИ модуль ресурсов, генерирующий исходный код на основе абстрактного синтаксического дерева, соответствующего документу, созданному в соответствии с API на основе файлов ресурсов (.jsonи т. д.) для создания дерева ресурсов.

2. слой модели:ПозжеHunterМежду деревом узлов и деревом ресурсов строится мост.С одной стороны, информация об узле получается из абстрактного синтаксического дерева, а затем запрашиваются соответствующие ресурсы в дереве ресурсов.С другой стороны, используется метод кэширования. для повышения эффективности следующего запроса.

3. Бизнес-уровень: получить информацию об узле, такую ​​какPositionи соответствующие ресурсы (возможно, ресурсы обработки) передаются в функциональный API, предоставляемый LSP, в качестве параметров для реализации соответствующих функций.

В целом архитектура не ушлаПолучение материалов + подходящие инструменты = реализация функцииОбщая логика, но стоит отметитьHunterСуществование класса решает проблему одновременного обновления дерева ресурсов узла, а также дает еще две возможности. Это также является преимуществом высокой сплоченности и низкой связанности.

3. Развитие функций

3.1 Получение материалов

Ожидается, что для вызовов API накладные расходы на передачу по сети будут больше, чем локальная предварительная обработка, поэтому материал может быть

• После обработки результатов краулером получается материал
• Документ материала хранится локальноJavaПосле обработки экспортируйте его как модуль модуля
• node_modulesвстроенный в модуль

Пример материала:

export const HTML_SCHEMA=[
"accordion||这是一个accordion组件",
"data||Array<any>或AccordionMenuType||null||数据源||必选，数据源，可以自定义数组或者使用预设的AccordionMenuType||true||false||[]",
"titleKey||string||title||标题的属性名||可选，标题的属性名，item[titleKey]类型为string，为标题显示内容||false||false||[]",
"loadingKey||string||loading||子菜单是否加载中的判断属性名||可选，子菜单是否加载中的判断属性名，item[loadingKey]类型为boolean||false||false||[]",
"childrenKey||string||children||子菜单的属性名||可选，子菜单的属性名，item[childrenKey]类型为Array<any>||false||false||[]"
]

Если документ API недостаточно стандартизирован, чтобы повлиять на обработку материалов, вы можете согласовать это с командой компонента, чтобы решить эту проблему, или предложить команде принятьAngular docтакая отраслевая норма. Чтобы решить проблему версионности, лучшим решением будет интеграция модуля материала в соответствующую библиотеку компонентов.node_modules, вы также можете рассмотреть собственный скрипт обработки модуля продукта.

3.2 Использование инструментов

3.2.1 Регулярные выражения

Регулярное выражение описывает шаблон сопоставления строк, который можно использовать для проверки наличия в строке определенной подстроки, замены совпадающей подстроки или извлечения строки, удовлетворяющей определенному условию, подстроки и т. д. Для таких компонентов, как

• Компоненты DevUId-buttonизd-, АнтдизайнButtonЗаглавная букваB

и импортные модули

• import { DevUIModule } from 'ng-devui'

Действия во время разработки

• попасть в космос,[](Атрибуты),()(событие) и др.

Все можно использовать как обычные условия сопоставления для достижения условных ограничений или триггеров, пример кода:

//devui的使用以d-开头,如d-button,以此做触发
const componentRegex = /<(d-[a-zA-Z0-9-]*)\b[^<>]***/g;
// 匹配"",而不是""和空格或者""和>,以此做""不触发而""外可触发的条件限制
const attributeValue= /^=\"[\s\S]*\"(?! |(>)\1)/;

3.2.2. Вызов API

Глядя на собственную документацию API vscode^api, который может открыть новый мир реализации различных функций. Возможно, придется набраться терпения, вы сможете понять интерфейс и возвращаемое значение слой за слоем, чтобыregisterHoverProviderНапример:

3.2.3. Language Server Protocol

3.2.3.1 Что такое LSP?

Microsoft представила LSP с целью стандартизировать взаимодействие между языковыми инструментами и редакторами кода:Фактически, он поставляется с фреймворком Angular и Jdk.LSPРеализация .В VS Code языковой сервер состоит из двух частей:

• Языковой клиент: использоватьJavaScript / TypeScriptНаписано простое расширение VS Code. Расширение имеет доступ ко всем API пространств имен VS Code.
• Языковой сервер: инструмент языкового анализа, работающий в отдельном процессе.

полагаться напредоставляется разработчиком языка или языкового инструментаБиблиотека материалов/совместимый со стандартом интерфейс, если между C/S установлено надежное соединение (например,TCP),Language ServerЗатем вы можете выполнить статический анализ программы, чтобы построить абстрактное синтаксическое дерево для указанного кода функции (например, кода библиотеки компонентов) или всего кода, чтобы получитьLSPС параметрами, требуемыми предоставленным API-интерфейсом, редактор кода может реализовать множество функций на стороне клиента, включая автозаполнение, подсказки о приостановке и автоматическое исправление ошибок.

3.2.3.2 Зачем использовать AST?

Абстрактное синтаксическое дерево — это древовидное представление структуры исходного кода программы. Исходный код программы проходит через лексический анализатор (Lexer), чтобы получить различные виды слов (Token), а затем парсером (Parser^parser) анализ и проверка синтаксиса для получения абстрактного синтаксического дерева (AST). Для следующегоCКод языка:

while(i < n){  
    sum += A[i++];
}

Структура AST, показанная на рисунке, может быть сгенерирована:Обычно корневой узел AST представляет всю программу, а внутренние узлы представляют собой абстрактные синтаксические структуры или слова. Суть AST заключается в том, что его можно комбинировать с каждым элементом синтаксиса во входном исходном коде.корреспонденция один на один. Так случилось, что большинство запросов LSP выражают "Выполнять указанные действия в указанных местах"--- Это означает, что разработчикам плагинов нужно только учитывать, когда и где запускать указанное действие, поэтому общие параметры

• документURI
• документchange.document
• словоposition

синтаксическое деревоточнопоставкаToken(включая слова)positionПреимущество заключается в том, что совпадение не может быть достигнуто регулярным выражением.

Конечно, когда вы углубитесь в принцип компиляции языка, вы сможете создать собственное определение языка, и простор для воображения будет очень большим.

3.2.3.3 Знакомство с серверным LSP^LSPGuide

когда в папке сервераpackage.jsonвведен вvscode-languageserver:

"dependencies": {
    "vscode-languageserver": "^4.1.3"
}

После этого разработчики могут использовать API сервера.

3.2.3.4 Базовая структура плагина класса LSP

.
├── client // Language Client: able to use vscode API
│   ├── src
│   │   ├── test // End to End tests for Language Client / Server
│   │   └── extension.ts // Language Client entry point
├── package.json // The extension manifest
└── server // Language Server
    └── src
        └── server.ts // Language Server entry point

3.2.4 Синтаксическое дерево библиотеки компонентов

Как ранее было представлено AST,html/css/ts/.d.tsфайлы могут быть проанализированы в синтаксическое дерево. Взяв в качестве примера файл html, вы можете использовать каждый уровень тегов в качествеDOMОператоры узлов и компонентов разбиваются на части после лексического/синтаксического/семантического анализа.token. например правильно<d-button bsStyle="primary"></button>разделен на

• Этикетка(Такие какd-button)
• api(Такие какstyle)
• Атрибуты(Такие какprimary)
• символ(Такие как=""),

Затем очертите диапазон распознавания вокруг каждого сегментированного элемента (keySpan), который сериализуется и, наконец, генерируется после помещения в стек.AST синтаксическое дерево. При использовании для следующихDevUIКод библиотеки компонентов:

<div class="main">
  <div class="left">
    <d-accordion 
        [data]="menu" 
        class="menu" 
        [restrictOneOpen]="restrictOneOpen" 
        (itemClick)="itemClick(**event)"
        (menuToggle)="menuToggle(**event)">
    hello
    </d-accordion>
  </div>
  <div class="content">
    <app-table></app-table>
  </div>
</div>

AST, сгенерированный этим плагином, можно частично представить как:

Но долженУведомление, подобная работа былаposthtmlТакой инструмент делает^posthtml, и если вы хотите разобратьmarkdownДля таких вещей тоже есть соответствующие библиотеки, и "не повторяй колесо" перед разработкой.

Каждая метка компонента может в итоге реализовать одно дерево, а в таком лесу некий узел (position) читается, а затем ищется его родитель и дочерний элемент, чтобы сопоставить дерево узлов с узлом дерева ресурсов.Теоретически также возможноautofixИли полагаться на проверенные функции. Такой лес можно установить с помощью инициализационного анализа.Snapshotдля сохранения при изменении локального дерева, т.к.dirty dataОбработка моментальных снимков с частичным обновлением.Версия 2.0), вы можете научиться на этой идее создавать карту, которая считается деревом с одним узлом для запроса.

3.2.4.1. Некоторые проблемы

• Чем он отличается от генерации AST в Angular или других инструментах?

A: Это в основном зависит от объема анализа. На примере Angular он полнотекстовый и зависит от парсера ts, а в библиотеке компонента анализа есть только часть devui:d-button -- bsStyle -- primaryТаких трех уровней.

• Можно ли повторно использовать AST из других инструментов?

[]связать переменную или()Действия, которые активируются, когда функция привязана, напримерAngularсам по себеdevuiкомпоненты делают. По сути, отрасльRomeИдя дальше, я надеюсь унифицировать все функции, основанные на AST, вместо того, чтобы каждый инструмент выполнял анализ AST сам по себе.

4. Код и оптимизация производительности

1. Программирование, ориентированное на интерфейс, включая модули, которые будут использоваться повторно, такие какgetName()Экспортировать как развязку модуля
2. Учтите, что плагины не нужно активировать, когда они не нужны.

• Вводить ли соответствующие зависимости, такие как@angualr
• Следует ли писать знаковые символы, такие как<илиd-
• соответствующий ли файл,htmlилиts

Стоит отметить, что в первые дни это можно было рассматривать только для чтения локальных файлов.^FileReaderОбнаружение с помощью регулярных выраженийapp.module.tsбыл представлен вdevuiЗависимости, чтобы не тратить ресурсы на недопустимые плагины запуска; когда инструменты обновляются — используйте AST для получения элементовTokenКогда проблема решена.

3. Другие шаблоны проектирования

5. Зайдите в онлайн для осмотра!

использоватьvsceУпаковано и выпущено на рынок подключаемых модулей vscode при установке исправлений и обновлений.vsce publish patchВот и все. Обратите внимание, что вы можете пройти.vscodeignoreпропускатьtestа такжеoutи т.п. часть.

В настоящее время^preDevUIHelperВерсия 4.0Добро пожаловать на рынок плагинов VSCode, добро пожаловать!star,Добро пожаловатьissue & pr,Добро пожаловать! :-)

Присоединяйтесь к нам

Мы команда DevUI, приглашаем вас приехать сюда, чтобы вместе с нами создать элегантную и эффективную систему человеко-машинного проектирования/исследований и разработок. Электронная почта для приема на работу:muyang2@huawei.com.

---

автор:Мубин

Ответственный редактор: Команда DevUI

«Хорошо летать! Плагин VSCode DevUIHelper дизайн и стратегия разработки (2)" скоро будет выпущен, так что следите за обновлениями~

Рекомендуемые статьи в прошлом

«Использование Git, 10 вещей, которые вам могут понадобиться, чтобы «вернуться»

«Темный режим веб-интерфейса и разработка тем»

"Научить вас, как создать среду публикации в оттенках серого"