Главная страница>Связанные с программированием>AI Исходный код
Скачать

WXML — языковая служба

Последнее обновление【CHANGELOG.md】

@iChenLei взял на себя поддержку этого плагина. Каждый может оставлять комментарии в группе DingTalk или в выпусках Github.

Основные функции

  • Создавайте мини-компоненты программы одним щелчком мыши
  • Автозаполнение имени тега и атрибута
  • В соответствии с существующими свойствами компонента автоматически отфильтровывается соответствующий поддерживаемый набор свойств.
  • Автозаполнение значений атрибутов
  • Щелкните функцию или атрибут в файле шаблона, чтобы перейти к месту, где определен js/ts (поддерживается только чистыми файлами wxml или pug, не полностью поддерживается файлами vue).
  • Автозаполнение имени стиля (поддерживается только чистыми файлами wxml или pug, не полностью поддерживается файлами vue)
  • Он также может автоматически заполняться в файлах шаблонов vue и поддерживает язык мопсов.
  • Ссылка на поддержку (поддерживается только чистыми файлами wxml или pug, не поддерживается файлами vue)
  • Автоматическое завершение пользовательских компонентов (поддерживается только чистыми файлами wxml, не поддерживается файлами vue или pug)
  • Выделение переменных js в файлах шаблонов (поддерживается только чистыми файлами wxml или pug, не поддерживается файлами vue)
  • Встроенные фрагменты
  • Поддержка метода записи emmet
  • форматирование wxml

Все автоматически заполняемые данные шаблона берутся из официальных документов и автоматически получаются с помощью скриптов.

Создавайте мини-компоненты программы одним щелчком мыши

  • Щелкните правой кнопкой мыши, чтобы увидеть параметр New Miniprogram Component . Введите имя компонента, чтобы создать .wxml / .js / .wxss / .json и папки компонентов одним щелчком мыши.
  • Автоматически открывать файл js после успешного создания
  • Создание компонентов поддерживает настройку суффикса css/wxml/js, например, в проекте используется less/vue/ts. 
 {
  "minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
  "minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
  "minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}

Имена тегов и имена атрибутов заполняются автоматически.

  • В wxml вам нужно ввести < чтобы запустить завершение тега, тогда как в языке мопсов вам нужно написать только начало тега, чтобы запустить завершение тега.
  • Ввод пробела приведет к завершению атрибута соответствующего тега.

В соответствии с существующими свойствами компонента автоматически отфильтровывается соответствующий поддерживаемый набор свойств.

  • Когда режим выбора = «селектор», существуют атрибуты range и range-key
  • Когда режим выбора = «время», существуют атрибуты start и end .

Автоматическое завершение значений атрибутов (завершение будет запущено только при наличии необязательного значения)

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

Щелкните функцию или атрибут в файле шаблона, чтобы перейти к месту, где определен js/ts (поддерживается только чистыми файлами wxml или pug, не полностью поддерживается файлами vue).

Функция пока не идеальна. Она будет искать только файлы скриптов с тем же именем, что и текущий шаблон, поэтому определение в JS может не быть найдено.

Автозаполнение имени стиля (поддерживается только чистыми файлами wxml или pug, не полностью поддерживается файлами vue)

Система автоматически получит все имена стилей в файле стилей с тем же именем, что и у текущего шаблона, а также может получить документы в /** */ по имени стиля, если есть глобальные стили, вам необходимо использовать конфигурацию; указан элемент minapp-vscode.globalStyleFiles .

  • По умолчанию в файле стиля будет получено имя, совпадающее с именем текущего шаблона.

    Примечание. Если файл стиля @import другой файл стиля, программа не получит имя стиля в импортированном файле.

  • Кроме того, вы можете использовать minapp-vscode.globalStyleFiles для указания некоторых файлов глобальных стилей, чтобы имена стилей в этих файлах также отображались после ввода class=""

    App.wxss мини-программы обычно имеет глобальный стиль, поэтому вам необходимо вручную указать его с помощью этой конфигурации, например, настроив minapp-vscode.globalStyleFiles: ["src/app.wxss"]

  • Кроме того, вы также можете использовать minapp-vscode.styleExtensions , чтобы указать суффикс файла стиля, используемого системой.

    Рекомендуется настроить этот пункт. Система будет искать файлы стилей с различными суффиксами по умолчанию. Чтобы избежать ненужной потери производительности, лучше всего настроить его на тот суффикс, который используется в проекте!

Примечание. Файлы стилей набора текста с отступом, такие как sass не поддерживаются.

Он также может автоматически заполняться в файлах шаблонов vue и поддерживает язык мопсов.

Доска шаблонов в vue поддерживает два свойства:

  1. lang может быть задано значение "wxml" или "pug" чтобы указать используемый язык ( указание атрибута lang в среде, похожей на vue, может вызвать ошибки компиляции. Вместо этого вы можете использовать xlang , но это приведет к завершению vue и minapp в в то же время )
  2. minapp может быть установлен на "native" , "wepy" , "mpx" или "mpvue" , указывая используемую платформу, по умолчанию — "mpvue"

нравиться:

  • <template lang="wxml" minapp="native"> означает использование языка wxml без использования какой-либо платформы.
  • <template lang="pug" minapp="mpvue"> означает использование языка мопсов и фреймворка mpvue.

Обратите внимание, что указание lang="wxml" в mpvue сообщит об ошибке, и вам нужно подождать, пока автор ее исправит! Однако вы можете временно использовать xlang="wxml" , но это также вызовет автоматическое завершение vue.

Указание разных значений minapp вызовет автоматическое завершение соответствующего фреймворка. Поскольку я не разрабатывал с использованием wepy и mpvue, эти автоматические дополнения добавляются согласно официальной документации. Если есть ошибки, пиар приветствуется (только нужно доработать). файл src/plugin/lib/language.ts)

Ссылка на поддержку (поддерживается только чистыми файлами wxml или pug, не поддерживается файлами vue)

  • По умолчанию будет связан только тег src, и файл должен существовать. Если он не существует, ссылка не будет добавлена.
  • Вы можете настроить minapp-vscode.linkAttributeNames для расширения дополнительных тегов, поддерживающих ссылку. Настройте это значение как пустой массив, чтобы отключить функцию ссылки.
  • minapp-vscode.resolveRoots можно настроить на использование относительных каталогов для разрешения путей к изображениям.

Автоматическое завершение пользовательских компонентов (поддерживается только чистыми файлами wxml, не поддерживается файлами vue или pug)

  • Автоматически получать информацию о компонентах в соответствующем файле JSON.
  • Приоритизация пользовательских компонентов
  • Автоматически получать описания свойств компонентов

Выделение переменных js в файлах шаблонов (поддерживается только чистыми файлами wxml или pug, не поддерживается файлами vue)

  • По умолчанию выделение отключено. Вы можете настроить для minapp-vscode.disableDecorate значение true , чтобы включить выделение.
  • Цвет выделения по умолчанию — фиолетовый. Вы можете настроить minapp-vscode.decorateType на использование вашего любимого цвета, например {"color": "red"}
  • По умолчанию все символы между «{{» и «}}» будут выделены. Вы можете настроить minapp-vscode.decorateComplexInterpolation на false , чтобы были выделены только переменные (такие как: foo , foo.prop , foo[1] ). будут выделены, а выражения (например: foo + bar , foo < 3 ) не будут выделены, и будет использован исходный цвет.

Чтобы ускорить анализ, цветовое выделение использует сопоставление по регулярным выражениям, поэтому могут возникнуть ошибки сопоставления, если вы не удовлетворены, вы можете настроить minapp-vscode.disableDecorate , чтобы отключить функцию цветового выделения.

Известные проблемы:

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

Встроенные фрагменты

  • Поставляется со свайпером/значком/кнопкой/временем выбора/датой выбора/регионом выбора/группой флажков/группой радио, см. файл
  • Вы можете определить свои собственные фрагменты с помощью элемента конфигурации minapp-vscode.snippets

Отличие от официальных Сниппетов в том, что Сниппетам здесь нужно указать только ключ и тело, а описание компонента будет автоматически получено на основе ключа (кроме того, конфигурацию можно будет объединить со встроенными данными позже)

Поддержка метода записи emmet

шпаргалка Эммета

формат wxml

Поддержка prettyHtml , js-beautify и prettier (некоторый контент должен быть написан в HTML-совместимом виде)

  • wxml по умолчанию 
 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具
  • js-украсить 
 "minapp-vscode.wxmlFormatter" : "jsBeautifyHtml" , // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml" : "useCodeBuiltInHTML" ,
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml" : { // jsBeautify 默认配置
    "content_unformatted" : "text" ,
    "wrap_attributes" : "force" ,
    "indent_size" : 2 ,
    "wrap_attributes_indent_size" : 2 ,
    "void_elements" : "image,input,video" ,
    "indent_scripts" : "keep"
}
  • довольноHtml 
 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}
  • красивее 
 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}
  • советы:
    1. Для режимов prettyHtml и prettier файл конфигурации проекта будет автоматически прочитан: файл конфигурации Prettier .editorconfig
    2. Для переключения инструментов форматирования требуется перезапуск VSCode.
    3. Для prettyHtml синтаксис HTML5, принятый prettier не полностью соответствует wxml. При написании обращайте внимание на совместимость.
    4. Для jsBeautifyHtml , когда значение равно "useCodeBuiltInHTML" , информация о конфигурации будет считана из документа поля html.format.* в конфигурации vscode и преобразована в конфигурацию js-beautify.

Часто задаваемые вопросы

Не появляется автозаполнение после установки плагина

  1. Убедитесь, что вы перезапустили VSCode после установки.
  2. Убедитесь, что формат текущего файла — wxml, wxml-pug или vue (вы не можете посмотреть суффикс файла, поскольку они могут быть связаны с другими форматами файлов в файле конфигурации; вам нужно посмотреть тип файла, отображаемый в нижнем правый угол vscode)

В проектах, не являющихся мини-программами, файлы pug не требуют автоматического завершения мини-программ.

Плагин minapp автоматически связывает файлы .pug с типом файлов wxml-pug . Таким образом, вам нужно только настроить ассоциацию файлов в конкретном проекте.

  • В проектах, не являющихся мини-программами, связывайте файлы с суффиксом .pug с типом файлов pug
  • В проекте мини-программы свяжите файлы с суффиксом .pug с типом файлов wxml-pug
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все