可以使用 Vue - Official (volar) 代替 mpx插件
forzgc opened this issue · comments
forzgc commented
在使用ts开发mpx组件的时候,发现官方的mpx插件对ts的支持有些问题。比如想使用外部函数,经常无法自动提示项目中ts代码的导出,而且对tsconfig中配置的路径别名支持也不够完善,还有template中wxml不会自动填充闭合标签,对monorepo项目的支持也不太好等问题。所以尝试使用 Vue - Official 代替 mpx ,这几天使用后,发现效果还不错,有接近开发vue的体验。
要想使用 Vue - Official 代替 mpx 需要进行下面几个配置。
- 配置 .vscode/settings.json
配置文件关联,将mpx文件关联为vue
"files.associations": {
"*.wxss": "css",
"*.wxs": "javascript",
"*.mpx": "vue"
}
如果之前配置了mpx的eslint,需要修改为vue
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
关闭元素style css校验,不然小程序的动态样式写法vscode会提示错误
"css.validate": false, // 关闭 <template> 中style css校验
- 配置 tsconfig.json
添加以下配置启用ts支持
"vueCompilerOptions": {
"extensions": [".mpx"], // 让插件将mpx文件当作vue文件
"skipTemplateCodegen": true, // 跳过template中的类型检查
},
- 配置自动导入提示
使用响应式api时,比如computed,自动导入总是优先提示vue的,可以在通过配置关闭
.vscode/settings.json
"javascript.preferences.autoImportFileExcludePatterns": ["vue", "vue-demi"], // 关闭来自vue的自动导入提示
"typescript.preferences.autoImportFileExcludePatterns": ["vue", "vue-demi"], // 关闭来自vue的自动导入提示
完成以上配置后就可以愉快的开发mpx组件了,不过Vue - Official 自然不支持小程序的组件和模板语法提示,这方面是目前欠缺的,其实插件支持定义全局组件和指令类型,有感兴趣的可以自己试试。
forzgc commented
再补充一个,mpx组件/页面的代码模板填充可以使用 vscode 自带的 Code snippets 完成。
创建文件 .vscode/mpx.code-snippets
{
"mpx component": {
"scope": "vue",
"prefix": ["component"],
"body": [
"<template></template>",
"",
"<script lang=\"ts\">",
"import { createComponent } from '@mpxjs/core'",
"",
"createComponent({})",
"</script>",
"",
"<style scoped></style>",
"",
"<script type=\"application/json\">",
"{",
"\t\"usingComponents\": {}",
"}",
"</script>",
""
],
"description": "生成组件代码"
},
"mpx page": {
"scope": "vue",
"prefix": ["page"],
"body": [
"<template></template>",
"",
"<script lang=\"ts\">",
"import { createPage } from '@mpxjs/core'",
"",
"createPage({})",
"</script>",
"",
"<style scoped></style>",
"",
"<script type=\"application/json\">",
"{",
"\t\"usingComponents\": {}",
"}",
"</script>",
""
],
"description": "生成页面代码"
}
}
这样就可以在mpx文件中 输入 component/page 快速生成组件/页面代码了
Dong Hongping commented
嗯嗯,感谢分享,我们近期也有参考volar对目前mpx插件进行升级重构的计划,也会重点完善模版提示相关的内容。