Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
forzgc opened this issue Apr 9, 2024 · 2 comments
Open

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

forzgc opened this issue Apr 9, 2024 · 2 comments

Comments

@forzgc
Copy link
Contributor

forzgc commented Apr 9, 2024

在使用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校验
  1. 配置 tsconfig.json

添加以下配置启用ts支持

"vueCompilerOptions": {
    "extensions": [".mpx"], // 让插件将mpx文件当作vue文件
    "skipTemplateCodegen": true, // 跳过template中的类型检查
  },
  1. 配置自动导入提示
    使用响应式api时,比如computed,自动导入总是优先提示vue的,可以在通过配置关闭

.vscode/settings.json

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

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

@forzgc forzgc changed the title VSCode 可以使用 Vue - Official (volar) 代替 mpx插件 可以使用 Vue - Official (volar) 代替 mpx插件 Apr 9, 2024
@forzgc
Copy link
Contributor Author

forzgc commented Apr 9, 2024

再补充一个,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
Copy link
Collaborator

hiyuki commented Apr 12, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants