vscode的js严格模式下，怎么写渲染

Question

http://element.eleme.io/#/zh-...

renderContent(h, { node, data, store }) {
        return (
          <span>
            <span>
              <span>{node.label}</span>
            </span>
            <span style="float: right; margin-right: 20px">
              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
            </span>
          </span>);
      }

vscode里写这个会报错，

in ./~/babel-loader/lib!./~/vux-loader/src/script-loader.js!./~/vue-loader/lib/selector.js?type=script&index=0!./src/pages/goods/add.vue
Module build failed: SyntaxError: F:/web/xiaolu/yii2/mall/yarn_admin/src/pages/goods/add.vue: Unexpected token (193:10)

  191 |     renderContent (h, { node, data, store }) {
  192 |       return (
> 193 |           <span>
      |           ^
  194 |             <span>
  195 |               <span>{node.label}</span>
  196 |             </span>

应该怎么解决这个问题

Answer 1

跟VSCode的严格模式没关系.

这种写法出自React的JSX.
你既然在Vue里用了(Vue目前不支持).那就需要插件帮助.
babel-plugin-transform-vue-jsx