写了个小小插件，解决了 vue 书写 jsx 的小问题

[120267583]

vue 老司机都知道 vue 是支持和 react 一样直接书写 jsx 的

官方 demo

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

不过 vue 的 jsx 和 react 的还是存在一些差异，比如 vue 在指定类名的时候使用的是更符合直觉的 class 而 react 用的是 classname

在书写中发现目前 webstorm 和 vscode 等编辑器对 vue jsx 的支持貌似是通过 react jsx 来实现的，这就导致了在自动补全代码的时候 class 会变成 className，webstorm 甚至有更奇葩的行为，复制粘贴代码的时候会自动把 class 统一替换成 className

vscode 的自动补全

webstorm 的自动补全

由于编辑器总类太多，魔改编辑器是不可能了，干脆写了个 Babel 插件，把 className 属性动态替换为 class 属性，完美解决了此问题

vue-jsx-classname-to-class

插件的源码也很简单，或许可以通过这个插件学习 Babel 插件的基本原理

[shakukansp]

webstorm 这个 bug 多少个月了还没修简直了 https://youtrack.jetbrains.com/issue/WEB-48792

[120267583]

vue2 结合 ts 迟早弃坑吧

[caisanli]

@120267583 为什么呐

[120267583]

@caisanli vue2 设计之初就没考虑过 ts 支持，有些地方支持不太好，导致使用起来不够顺滑