{"id":13671469,"url":"https://github.com/wx-minapp/minapp-vscode","last_synced_at":"2025-10-20T21:49:40.125Z","repository":{"id":41465412,"uuid":"142719407","full_name":"wx-minapp/minapp-vscode","owner":"wx-minapp","description":"WXML Language Support","archived":false,"fork":false,"pushed_at":"2025-03-28T22:18:32.000Z","size":1849,"stargazers_count":282,"open_issues_count":31,"forks_count":49,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-10-20T21:49:24.654Z","etag":null,"topics":["minapp","miniprogram","vscode-extension","wechat","wxml","wxs","wxss"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wx-minapp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-07-29T00:33:02.000Z","updated_at":"2025-09-15T14:04:05.000Z","dependencies_parsed_at":"2024-01-14T17:04:20.552Z","dependency_job_id":"32ee1f11-ac6b-4ac6-8ac3-13ff450057d0","html_url":"https://github.com/wx-minapp/minapp-vscode","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/wx-minapp/minapp-vscode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-minapp%2Fminapp-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-minapp%2Fminapp-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-minapp%2Fminapp-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-minapp%2Fminapp-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wx-minapp","download_url":"https://codeload.github.com/wx-minapp/minapp-vscode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-minapp%2Fminapp-vscode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280166619,"owners_count":26283782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-20T02:00:06.978Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["minapp","miniprogram","vscode-extension","wechat","wxml","wxs","wxss"],"created_at":"2024-08-02T09:01:10.400Z","updated_at":"2025-10-20T21:49:40.078Z","avatar_url":"https://github.com/wx-minapp.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg align=\"right\" width=\"90px\" src=\"https://funimg.pddpic.com/mobile_piggy/0fe81c13-7691-49ae-bb6e-39586d58a1d7.png.slim.png\" alt=\"wxml language features logo\" /\u003e\n\n## WXML - Language Service\n[![CI Status](https://github.com/wx-minapp/minapp-vscode/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/wx-minapp/minapp-vscode/actions/workflows/ci.yml?query=branch%3Amaster)\n[![Deploy Status](https://github.com/wx-minapp/minapp-vscode/actions/workflows/deploy.yml/badge.svg)](https://github.com/wx-minapp/minapp-vscode/actions/workflows/deploy.yml)\n[![Visual Studio Marketplace](https://img.shields.io/visual-studio-marketplace/v/qiu8310.minapp-vscode?color=brightgreen\u0026label=Visual%20Studio%20Marketplace)](https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode)\n![Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/qiu8310.minapp-vscode)\n![Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/qiu8310.minapp-vscode)\n![Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/qiu8310.minapp-vscode)\n\n### 最近更新 【[CHANGELOG.md](https://github.com/wx-minapp/minapp-vscode/blob/main/CHANGELOG.md)】\n\u003e [@iChenLei](https://github.com/ichenlei) 已接手维护本插件，欢迎大家在钉钉群或者 [Github issues](https://github.com/wx-minapp/minapp-vscode/issues) 提意见。\n\n### 主要功能\n\n* [一键创建小程序组件](#create-component)\n* [标签名与属性自动补全](#tag-and-attr)\n* [根据组件已有的属性，自动筛选出对应支持的属性集合](#smart-attr)\n* [属性值自动补全](#attr-value)\n* [点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）](#attr-definition)\n* [样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）](#attr-class-value)\n* [在 vue 模板文件中也能自动补全，同时支持 pug 语言](#vue)\n* [支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持）](#link)\n* [自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持）](#custom-component)\n* [模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持）](#highlight)\n* [内置 snippets](#snippets)\n* [支持 emmet 写法](#emmet)\n* [wxml 格式化](#wxml-formatter)\n\n\u003e **所有自动补全的模板数据都来自于官方文档，通过[脚本](https://github.com/wx-minapp/minapp-generator)自动获取的**\n\n\u003ca id=\"create-component\"\u003e\u003c/a\u003e\n\n### 一键创建小程序组件\n\n* 右键可以看到 `New Miniprogram Component` 选项，输入组件名即可一键创建 `.wxml`/`.js`/`.wxss`/`.json` 以及组件文件夹\n* 创建成功后自动打开 `js` 文件\n\n![示例图片](https://funimg.pddpic.com/mobile_piggy/958baa82-f263-402f-8887-b1eaabffbc7c.gif)\n\n* 创建组件支持配置 css/wxml/js 后缀，比如项目使用 less/vue/ts\n\n![示例图片](https://funimg.pddpic.com/mobile_piggy/a4af85c2-d4cb-44f2-aa47-831b80b20c7a.gif)\n\n```jsonc\n{\n  \"minapp-vscode.cssExtname\": \"less\", // 默认 wxss，支持 styl sass scss less css\n  \"minapp-vscode.wxmlExtname\": \"vue\", // 默认 wxml，支持 vue wpy\n  \"minapp-vscode.jsExtname\": \"ts\" // 默认 js，支持 ts coffee\n}\n```\n\n\n\u003ca id=\"tag-and-attr\"\u003e\u003c/a\u003e\n\n### 标签名与属性名自动补全\n\n* wxml 中需要输入 `\u003c` 才会触发标签补全，而 pug 语言只需要写标签开头即能触发标签补全\n* 输入空格会触发对应标签的属性补全\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/03/01/13631761451ae134c6eb3ea2ed1a6a12.gif)\n\n\n\u003ca id=\"smart-attr\"\u003e\u003c/a\u003e\n\n### 根据组件已有的属性，自动筛选出对应支持的属性集合\n\n- 当 picker 的 mode=\"selector\" 时，有 `range` 和 `range-key` 的属性\n- 当 picker 的 mode=\"time\" 时，有 `start` 和 `end` 的属性\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/03/09/5c5704b51a37df84b5c6663d29a545f6.gif)\n\n\u003ca id=\"attr-value\"\u003e\u003c/a\u003e\n\n### 属性值自动补全（有可选值的情况下才会触发补全）\n\n- 在属性值中输入空格可以触发，补全后自动会将空格覆盖\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/03/10/aaba780a36f1de1b87687295bc6fc922.gif)\n\n\u003ca id=\"attr-definition\"\u003e\u003c/a\u003e\n\n### 点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）\n\n**功能还不完善，只会查找和当前模板同名的脚本文件，所以有可能会找不到 JS 中的定义**\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/11/20/c8d41ef5bce1b2128bb7a830d06338b9.gif)\n\n\u003ca id=\"attr-class-value\"\u003e\u003c/a\u003e\n\n### 样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）\n\n系统会自动获取和当前模板同名的样式文件中的所有样式名，同时还能获取样式名上的 `/** */` 中的文档；如果有全局的样式，需要通过配置项 `minapp-vscode.globalStyleFiles` 来指定。\n\n- 默认会获取和当前模板同名的样式文件中的名称\n\n  **注意：如果样式文件是 `@import` 了另一个样式文件，则程序不会去获取这个引入的文件中的样式名**\n\n- 另外可以使用 `minapp-vscode.globalStyleFiles` 来指定一些全局的样式文件，这样在输入 `class=\"\"` 后就也会出现这些文件中的样式名\n\n  **小程序的 app.wxss 一般是全局的样式，所以需要你手动通过此配置来指定，如配置 `minapp-vscode.globalStyleFiles: [\"src/app.wxss\"]`**\n\n- 另外也可以使用 `minapp-vscode.styleExtensions` 来指定系统使用的样式文件的后缀\n\n  **建议配置此项，系统默认会查找各种后缀的样式文件，为避免不必要的性能损耗，最好配置成项目中使用的后缀！**\n\n\u003e **注意：不支持 `sass` 这种缩进排版的样式文件**\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/11/15/559184bb3ff7cc2fb76c204010f6f042.gif)\n\n\u003ca id=\"vue\"\u003e\u003c/a\u003e\n\n### 在 vue 模板文件中也能自动补全，同时支持 pug 语言\n\nvue 中的 template 板支持两个属性：\n\n1. `lang` 可以设置为 `\"wxml\"` 或 `\"pug\"`，表示使用的语言（**在类 vue 框架中指定 `lang` 属性可能会导致编译报错，你可以使用 `xlang` 替代，但这样会同时出现 vue 和 minapp 的补全**）\n2. `minapp` 可以设置为 `\"native\"`, `\"wepy\"`，`\"mpx\"` 或 `\"mpvue\"`，表示使用的框架，默认为 `\"mpvue\"`\n\n如:\n\n* `\u003ctemplate lang=\"wxml\" minapp=\"native\"\u003e`   表示使用 wxml 语言，不使用任何框架\n* `\u003ctemplate lang=\"pug\" minapp=\"mpvue\"\u003e`     表示使用 pug 语言，并使用 mpvue 框架\n\n\u003e 注意，[mpvue 中指定 lang=\"wxml\" 会报错](https://github.com/Meituan-Dianping/mpvue/issues/208)，需要等待作者修复！不过\n\u003e 你可以临时使用 `xlang=\"wxml\"`，但这样同时也会触发 vue 的自动补全\n\n指定为不同的 minapp 值会触发对应框架的自动补全，由于本人没有使用 wepy 和 mpvue 开发过，所以这些自动补全是根据官方文档说明而加上的，如果有错误，欢迎 PR（只需要修改文件 [src/plugin/lib/language.ts](https://github.com/wx-minapp/minapp-vscode/blob/main/src/plugin/lib/language.ts))\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/04/09/0b4573624091b04566232c38df08e323.gif)\n\n\u003ca id=\"link\"\u003e\u003c/a\u003e\n\n### 支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持）\n\n- 默认只会 link src 标签，并且文件需要存在，不存在不会加 link\n- 可以配置 `minapp-vscode.linkAttributeNames` 来扩展额外的支持 link 的标签，将此值配置成空数组，可以禁用 link 功能\n- 可以配置 `minapp-vscode.resolveRoots` 来使用相对目录解析图片路径\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/04/27/dd7f301dc1e1593209d7f7ac169fd047.gif)\n\n\u003ca id=\"custom-component\"\u003e\u003c/a\u003e\n\n### 自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持）\n\n- 自动获取对应 json 文件中的组件信息\n- 优先提示自定义组件\n- 自动获取组件中属性的描述\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/03/09/fce0b3e9496cae95c1c81523725a1fef.gif)\n\n\u003ca id=\"highlight\"\u003e\u003c/a\u003e\n\n### 模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持）\n\n- 默认关闭高亮，可以配置 `minapp-vscode.disableDecorate` 为 `true` 来开启高亮\n- 默认高亮颜色使用紫色，可以配置 `minapp-vscode.decorateType` 来使用你喜欢的颜色，如 `{\"color\": \"red\"}`\n- 默认会将 \"{{\" 与 \"}}\" 之间的所有字符都高亮，可以配置 `minapp-vscode.decorateComplexInterpolation` 为 `false`，这样只有变量（如：`foo`, `foo.prop`, `foo[1]`）会高亮，而表达式（如：`foo + bar`, `foo \u003c 3`）不会高亮，而使用原本的颜色\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/05/07/c6dd2e8613fbb02417029fb3dbd302ce.png)\n\n**为了加快解析速度，颜色高亮使用的是正则表达式匹配，所以可能会出现匹配错误的情况；如果不满意，可以配置 `minapp-vscode.disableDecorate` 来禁用颜色高亮功能**\n\n**已知问题：**\n\n- pug 语言中注释中的变量也会高亮 （pug 是基于缩进的，正则不太好处理）\n\n\u003ca id=\"snippets\"\u003e\u003c/a\u003e\n\n### 内置 snippets\n\n  - 自带 swiper/icon/button/picker time/picker date/picker region/checkbox-group/radio-group，见[文件](https://github.com/wx-minapp/minapp-vscode/blob/main/src/plugin/res/snippets.ts)\n  - 可以通过配置项 `minapp-vscode.snippets` 来定义你自己的 snippets\n\n  _和官方的 Snippets 的区别时，这里的 Snippets 只需要指定 key 和 body 即可，组件描述自动会根据 key 来获取（另外后期可以让配置和内置的数据结合起来）_\n\n  ![示例图片](https://n1image.hjfile.cn/res7/2018/05/26/4a25927085e96e6bd9f05bf735621a8b.gif)\n\n\u003ca id=\"emmet\"\u003e\u003c/a\u003e\n\n### 支持 emmet 写法\n\n![示例图片](https://n1image.hjfile.cn/res7/2018/06/22/2f692e4cf499d712d34f593a3e813522.gif)\n\n[emmet cheat sheet](https://docs.emmet.io/cheat-sheet/)\n\n\u003ca id=\"wxml-formatter\"\u003e\u003c/a\u003e\n\n### wxml 格式\n\n支持`prettyHtml`, `js-beautify` 和`prettier`(部分内容需要采用兼容html的方式书写)\n\n* 默认 `wxml`\n```jsonc\n\"minapp-vscode.wxmlFormatter\": \"wxml\", // 指定格式化工具\n```\n\n* [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n```jsonc\n\"minapp-vscode.wxmlFormatter\": \"jsBeautifyHtml\", // 指定格式化工具\n// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4\n\"minapp-vscode.jsBeautifyHtml\": \"useCodeBuiltInHTML\",\n// 使用自定义配置\n\"minapp-vscode.jsBeautifyHtml\": { // jsBeautify 默认配置\n    \"content_unformatted\": \"text\",\n    \"wrap_attributes\": \"force\",\n    \"indent_size\": 2,\n    \"wrap_attributes_indent_size\": 2,\n    \"void_elements\": \"image,input,video\",\n    \"indent_scripts\": \"keep\"\n}\n```\n\n* [prettyHtml](https://github.com/Prettyhtml/prettyhtml#prettyhtmldoc-string-options-vfile)\n```jsonc\n\"minapp-vscode.wxmlFormatter\": \"prettyHtml\", // 指定格式化工具\n\"minapp-vscode.prettyHtml\": { // prettyHtml 默认配置\n  \"useTabs\": false,\n  \"tabWidth\": 2,\n  \"printWidth\": 100,\n  \"singleQuote\": false,\n  \"usePrettier\": true,\n  \"wrapAttributes\": false, // 设置成 true 强制属性换行\n  \"sortAttributes\": false\n}\n```\n* [prettier](https://github.com/prettier/prettier)\n```jsonc\n\"minapp-vscode.wxmlFormatter\": \"prettier\", // 指定格式化工具\n\"minapp-vscode.prettier\": { // prettier 更多参考 https://prettier.io/docs/en/options.html\n  \"useTabs\": false,\n  \"tabWidth\": 2,\n  \"printWidth\": 100,\n  \"singleQuote\": false\n}\n```\n* tips:\n  1. 针对`prettyHtml` 和 `prettier` 方式，会自动读取项目下的配置文件，[Prettier configuration file](https://prettier.io/docs/en/configuration.html) `.editorconfig`\n  2. 切换格式化工具需重启 VSCode\n  3. 针对 `prettyHtml` ，和 `prettier` 采用 HTML5 的语法和 wxml 不完全一致，写法要注意兼容\n  4. 针对 `jsBeautifyHtml` , 当值为 `\"useCodeBuiltInHTML\"`时, 配置信息将从 vscode 配置中的 `html.format.*` 配置字段[doc](https://code.visualstudio.com/docs/languages/html#_formatting) 读取, 转换为 [js-beautify](https://github.com/beautify-web/js-beautify#css--html) 的配置\n\n### 常见问题\n\n#### 安装插件后没有出现自动补全\n\n1. 确保安装后有重启过 VSCode\n2. 确保当前文件的格式是 wxml 或 wxml-pug 或 vue (不能看文件后缀名，因为可能在配置文件中把它们关联的其它文件格式；需要看 vscode 右下角显示的文件类型)\n\n#### 在非小程序项目，pug 文件不想要小程序的自动补全\n\nminapp 插件会自动将 .pug 文件关联到 `wxml-pug` 文件类型。所以你只需要在具体的项目中配置一下文件关联就行了。\n\n* 非小程序项目中，将 .pug 后缀的文件关联到 `pug` 文件类型\n* 小程序项目中，将 .pug 后缀的文件关联到 `wxml-pug` 文件类型\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-minapp%2Fminapp-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwx-minapp%2Fminapp-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-minapp%2Fminapp-vscode/lists"}