编辑器/IDE高亮、提示

IntelliJ

如果使用IntelliJ系IDE开发,可将mpx后缀文件关联到vue类型,按vue解析。 关联文件类型 但会报一个warning提示有重复的script标签,关闭该警告即可。 关闭警告

vscode

.mpx采用类似于.vue的单文件语法风格,在Visual Studio Marketplace中获取vue语法高亮插件 然后通过配置vscode扩展语言 ,将.mpx绑定到.vue语法的支持

下方的方案为社区同学贡献,通过更多的插件使用,可能在某些功能上有所增强,但也可能遇到一些其他问题,请个人判断是否需要

vscode插件

更新: minapp最新版已经支持了mpx,所以对minapp的使用加以修改

  1. minapp此插件主要功能是给template加上wxmlsnippet功能,只要在 template 标签中添加属性minapp='mpx' xlang='wxml'就可以使用
  2. wechat-snippet,主要是使用里面的wx.xxx的snippet
  3. vetur主要使用其高亮和格式化功能,配套安装有prettier,新版配置为
  1. "vetur.format.defaultFormatterOptions": {
  2. "prettyhtml": {
  3. "printWidth": 100, // No line exceeds 100 characters
  4. "singleQuote": false // Prefer double quotes over single quotes
  5. },
  6. "prettier": {
  7. // Prettier option here
  8. "semi": false,
  9. "singleQuote": true,
  10. "eslintIntegration": true
  11. }
  12. }

注意:

  1. 当添加了xlang="wxml"后,可以使用vetur配置的template的格式化,但是会存在vue插件的snippet
  2. 在改成xlang="wxml"后,虽然能格式化了,但是imageinput标签的格式化会出问题,所以最好在最后完成的时候,改回lang="wxml"关闭格式化
  3. 注意使用vscode的工作区功能,最好把vue插件相关提示先关闭了
  4. 因为mpx单文件具有两个script标签,直接格式化会出问题,需要

    1. <script type='application/json' lang='json'>
    2. {
    3. "navigationBarTitleText": "",
    4. "usingComponents": {
    5. }
    6. }
    7. </script>

    如上,需要在json的script中,加上lang="json"这样就不会对这个标签进行格式化

vscode代码片段

此功能主要是为了新建文件后快速生成一些代码,只要在设置里,选择用户代码片段,在选择vue.json,将以下代码复制进去。之后只要输出写好的prefix,就能自动提示生成。 如此你也可以对javascript.json做一些自定义的代码片段

  1. "Print to weapp page": {
  2. "prefix": "page",
  3. "body": [
  4. "<template minapp='native' xlang='wxml'>",
  5. " <view class='container'>\n",
  6. " </view>",
  7. "</template>\n",
  8. "<script>",
  9. "import { createPage } from '@mpxjs/core'",
  10. " createPage({",
  11. " data: {",
  12. " },",
  13. " onShow() {",
  14. " // 所在页面显示之后就会执行一次",
  15. " console.log('page show')\n",
  16. " },",
  17. " onHide() {",
  18. " // 页面切入后台执行",
  19. " console.log('page hide')\n",
  20. " },",
  21. " /**",
  22. " * 页面相关事件处理函数--监听用户下拉动作",
  23. " */",
  24. " onPullDownRefresh() {},",
  25. " /**",
  26. " * 页面上拉触底事件的处理函数",
  27. " */",
  28. " onReachBottom() {},",
  29. " /**",
  30. " * 用户点击右上角分享",
  31. " */",
  32. " onShareAppMessage() {},"
  33. " })",
  34. "</script>\n",
  35. "<style lang='scss'>\n",
  36. " .container {} ",
  37. "</style>",
  38. "<script type='application/json' lang='json'>",
  39. "{",
  40. " \"navigationBarTitleText\": \"搜索\",",
  41. " \"usingComponents\": {}",
  42. "}",
  43. "</script>\n",
  44. "$2"
  45. ],
  46. "description": "weapp page"
  47. },
  48. "Print to weapp components": {
  49. "prefix": "components",
  50. "body": [
  51. "<template minapp='native' xlang='wxml'>",
  52. " <view class='container'>\n",
  53. " </view>",
  54. "</template>\n",
  55. "<script>",
  56. "import { createComponent } from '@mpxjs/core'",
  57. " createComponent({",
  58. " properties: {\n},",
  59. " data: {",
  60. " },",
  61. " pageShow() {",
  62. " // 所在页面显示之后就会执行一次",
  63. " console.log('page show')\n",
  64. " },",
  65. " pageHide() {",
  66. " // 页面切入后台执行",
  67. " console.log('page hide')\n",
  68. " },",
  69. " methods: {\n",
  70. " }",
  71. " })",
  72. "</script>\n",
  73. "<style lang='scss'>\n",
  74. " .container {} ",
  75. "</style>",
  76. "<script type='application/json' lang='json'>",
  77. "{ ",
  78. " \"component\": true",
  79. "}",
  80. "</script>\n",
  81. "$2"
  82. ],
  83. "description": "weapp components"
  84. }