V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
120267583
V2EX  ›  分享创造

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

  •  1
     
  •   120267583 · 304 天前 · 1140 次点击
    这是一个创建于 304 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 的自动补全 avatar

    webstorm 的自动补全 avatar

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

    vue-jsx-classname-to-class

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

    4 条回复    2021-08-10 10:10:04 +08:00
    shakukansp
        1
    shakukansp  
       304 天前
    webstorm 这个 bug 多少个月了还没修简直了 https://youtrack.jetbrains.com/issue/WEB-48792
    120267583
        2
    120267583  
    OP
       304 天前 via Android
    vue2 结合 ts 迟早弃坑吧
    caisanli
        3
    caisanli  
       297 天前 via iPhone
    @120267583 为什么呐
    120267583
        4
    120267583  
    OP
       291 天前
    @caisanli vue2 设计之初就没考虑过 ts 支持,有些地方支持不太好,导致使用起来不够顺滑
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1226 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 108ms · UTC 23:39 · PVG 07:39 · LAX 16:39 · JFK 19:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.