предисловие
Дружеское напоминание: в этом руководстве представлен только метод подсказки vscode! Я не буду делать другие редакторы!
использовалvscodeа такжеelement-uiНебольшие партнеры компонента обязательно испытают это, его компонент может автоматически подсказывать имя и подсказывать, что его можно передать вAttributes
Ниже скриншот использования
Прилагается иллюстрация передачи значения компонента el-dialog.
Для того, чтобы изучить, почему это может подсказать, я также скачалelement-uiИсходный код , я также написал библиотеку компонентов со ссылкой на его метод написания, а также рассмотрел подсказку, сгенерированную его файлом ts. После серии попыток я потерпел неудачу. Этот процесс проходил с перерывами в течение полугода, и у меня никогда не было никаких мыслей. До недавнего времени я думал о том, имеют ли установленные мной плагины правоelement-uiподдерживается.
После постоянного отключения и включения моего плагина я наконец нашел плагин, который запрашивает код:Vetur, который пишетVueКод должен иметь плагин.
Давным-давно я былVeturпознание есть толькоVueВыделение тега - это просто напоминание, я никогда не думал, что онelement-uiПоддержка советов. Позже, просмотрев его документ, я обнаружил, что он действительно был прав.element-uiподдерживать
После долгой и упорной работы я наконец нашел решение, так что давайте перейдем к делу.
1. Теги/атрибуты
Tagsа такжеAttributesПо сути, это два разных json-файла, вотelement-uiизelement-tags.jsonа такжеelement-attributes.jsonсказать. Поскольку конкретной документации не найдено, следующие инструкциитолько для справки! !
element-tags.json
GitHub.com/элемент пользовательского интерфейса/О…
| Имя свойства | эффект |
|---|---|
| attributes | Свойства, которые могут вызывать подсказки |
| description | описание компонента |
| subtags | Верхний компонент (кажется, что это значение не влияет на фактическое использование) |
| defaults | Непонятно, что делает это свойство |
element-attrbiutes.json
GitHub.com/элемент пользовательского интерфейса/О…
| Имя свойства | эффект |
|---|---|
| options | Запрос по умолчанию для атрибутов, которые можно выбрать |
| description | Описание недвижимости |
| version | номер версии |
Большинство свойств здесь общедоступные, но некоторые свойства могут иметь одинаковое имя, но разные описания функций.Что мне делать?
На самом деле это можно решить
2. Как настроить его в компонент
На самом деле, просто посмотритеelement-uiБиблиотека компонентов, по сути, ничего не видит, из-за чего мне потребовалось много времени, чтобы изучить и понять. Правда в том,Veturдляelement-uiподдержал. надgithubадресelement-uiбыстрый файл,VeturНапрямую зависит от этих двух файлов, поэтому вelement-uiЭти два файла не нужно размещать в компоненте. Но маленькие разработчики вроде нас не всегда могут проситьVeturРазработчики плагинов делают поддержку наших компонентов. К счастью, глядя наVeturПрочитав исходный код и обратившись к зарубежным материалам, я обнаружил, что наша личная команда разработчиков тоже может делать подсказки по коду.
Прежде всего, необходимы два вышеуказанных файла.Для атрибутов использования компонентов в библиотеке компонентов необходимо сначала написать набор правил. После создания правил поместите эти два файла в проект. Вроде создал новый прямо в проектеveturимя папки и поместите в нее эти два файла. тогда просто нужноpackage.jsonДобавьте несколько строк кода в файл
"vetur": {
"tags": "vetur/tags.json",
"attributes": "vetur/attributes.json"
},
Конечно, если вы укажете расположение файла, как я,filesсвойства должны быть добавленыveturКаталог
После выполнения этих шагов упакуйте его локально или загрузите наnpmСреди них переустановите файл и перезапустите его.vscodeПосле редактора вы можете обнаружить, что запрос кода выполнен успешно.
3. Что делать, если у меня нет библиотеки компонентов?
На самом деле, этот метод является первым методом, который я нашел. теперь, когдаVeturпара плагиновelement-uiподдержка компонентов, и снова используются плагиныjsНаписано, почему я не могу напрямую модифицировать его исходный код?
1. Первая находкаVeturРасположение плагина на компьютере
mac 地址：/Users/[user]/.vscode/extensions/octref.vetur-0.24.0
WindowsСистему не пробовал, ведь поиск Baidu позволяет быстро найти место установки плагина.
2. Введитеsever/dist/modes/template/tagProvidersпапка, найтиexternalTagProviders.jsа такжеexternalTagProviders.d.tsдокумент
externalTagProviders.js
Сначала вы можете определить две переменныеnewTagsа такжеnewAttributes(Конечно, вы можете выбрать другое имя), вы можете напрямуюrequireПолучите ваши местные правила
const newTags = require("本地地址")
const newAttributes = require("本地地址")
экспортировать еще одинnewTagProviderПеременная, конкретное написание может относиться кelementTagProvider
exports.newTagProvider = getExternalTagProvider('new', newTags, newAttributes);
Примечание: первый параметр'new'Вы не можете воспринимать это случайно, вам нужно использовать его в следующих шагах.
externalTagProviders.d.ts
Добавить в файл раздел экспортируемой подсказки ts (вероятно, эта роль? ts не очень хорошо учится)
export declare const newTagProvider: IHTMLTagProvider;
3, найдено в том же каталогеindex.jsфайл, нашелexports.allTagProviders, добавьте ранее экспортированные нижеnewTagProvider
exports.allTagProviders = [
htmlTags_1.getHTML5TagProvider(),
vueTags_1.getVueTagProvider(),
routerTags_1.getRouterTagProvider(),
externalTagProviders_1.elementTagProvider,
externalTagProviders_1.onsenTagProvider,
externalTagProviders_1.bootstrapTagProvider,
externalTagProviders_1.buefyTagProvider,
externalTagProviders_1.gridsomeTagProvider,
++externalTagProviders_1.newTagProvider
];
подgetTagProviderSettingsв методеtryВ операторе добавьте метод, чтобы определить, следует ли загружать подсказку
if (dependencies['new']) {
settings['new'] = true;
}
существуетdependenciesсреди'new'представляет собойpackage.jsonНазвания некоторых зависимостей, если у вас действительно нет библиотеки компонентов, то можно просто заполнитьVueкакие,eslintАх, предпосылка в том, что у вашего проекта есть зависимости. второйsettingсреди'new'Включен ли представленный параметр. Это значение должно совпадать с параметром, который я предложил на втором шаге, чтобы он вступил в силу.
После сохранения изменений перезапуститеvscodeТакже появились редактор и подсказки по коду.На этом все готово.
(пс:vscodeсогласно сF1затем введите команду>Reload Window, текущий редактор можно перезапустить)
4. Пишите в конце
Как студент-естественник, я действительно не знаю, как организовать язык. Это моя первая статья. Я написал как можно больше подробностей. Если есть какая-то часть, которую я не понимаю или чувствую, что мое письмо не очень хорошо или неправильно, каждый может упомянуть об этом, я смиренно приму это.
Спасибо вам всем!