可以使用 Vue - Official (volar) 代替 mpx插件

[forzgc]

在使用ts开发mpx组件的时候，发现官方的mpx插件对ts的支持有些问题。比如想使用外部函数，经常无法自动提示项目中ts代码的导出，而且对tsconfig中配置的路径别名支持也不够完善，还有template中wxml不会自动填充闭合标签，对monorepo项目的支持也不太好等问题。所以尝试使用 Vue - Official 代替 mpx ，这几天使用后，发现效果还不错，有接近开发vue的体验。

要想使用 Vue - Official 代替 mpx 需要进行下面几个配置。

1. 配置 .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校验

2. 配置 tsconfig.json

添加以下配置启用ts支持

"vueCompilerOptions": {
    "extensions": [".mpx"], // 让插件将mpx文件当作vue文件
    "skipTemplateCodegen": true, // 跳过template中的类型检查
  },

3. 配置自动导入提示
   使用响应式api时，比如computed，自动导入总是优先提示vue的，可以在通过配置关闭

.vscode/settings.json

    "javascript.preferences.autoImportFileExcludePatterns": ["vue", "vue-demi"], // 关闭来自vue的自动导入提示
    "typescript.preferences.autoImportFileExcludePatterns": ["vue", "vue-demi"], // 关闭来自vue的自动导入提示

完成以上配置后就可以愉快的开发mpx组件了，不过Vue - Official 自然不支持小程序的组件和模板语法提示，这方面是目前欠缺的，其实插件支持定义全局组件和指令类型，有感兴趣的可以自己试试。

[forzgc]

再补充一个，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 快速生成组件/页面代码了

[hiyuki]

嗯嗯，感谢分享，我们近期也有参考volar对目前mpx插件进行升级重构的计划，也会重点完善模版提示相关的内容。