编辑器/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加上wxml的snippet功能，只要在 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"后，虽然能格式化了，但是image和input标签的格式化会出问题，所以最好在最后完成的时候，改回lang="wxml"关闭格式化
  3. 注意使用vscode的工作区功能，最好把vue插件相关提示先关闭了

  4. 因为mpx单文件具有两个script标签，直接格式化会出问题，需要

    1. <script  type='application/json' lang='json'>
    2. {
    3. "navigationBarTitleText": "",
    4. "usingComponents": {
    6. }
    7. }
    8. </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. }