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

emmet2-mode,强化 Emmet,提升前端编码效率

  •  
  •   P233 ·
    P233 · 2022-11-21 23:56:09 +08:00 · 1169 次点击
    这是一个创建于 733 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前段时间 懒猫 大佬写了 deno-bridge, 实现了 elisp 与 deno 的通信。然后这个在脑海里由来已久的想法终于有机会去实现了。

    Deno 可以调用 emmet 的 NPM 包,所以实现的思路就是做一个 Emmet 的预处理器和后处理器拓展 Emmet 的功能:

    1. 在 abbr 的任意位置展开,便于修改
    2. 加入更多 JSX 的支持,尤其是展开 className
    3. 自动检测样式标签和样式熟悉,展开 CSS
    4. 添加对 CSS 和 SCSS 的 at-rules 支持
    5. 展开 CSS 的伪类和伪元素
    6. 大量对 CSS abbr 的改进

    一些示例:

    Component                     => <Component>|</Component>
    Component/                    => <Component />
    Component./                   => <Component className={|} />
    Component.class               => <Component className={css.class}>|</Component>
    Component.Subcomponent        => <Component.Subcomponent>|</Component.Subcomponent>
    Component.Subcomponent.class  => <Component.Subcomponent className={css.class}>|</Component.Subcomponent>
    Component.Subcomponent.a.b.c  => <Component.Subcomponent className={clsx(css.a, css.b, css.c)}>|</Component.Subcomponent>
    Component.Subcomponent.a.b.c/ => <Component.Subcomponent className={clsx(css.a, css.b, css.c)} />
    
    fz(1)      => font-size: ms(1);
    p(1)(2)(3) => padding: rhythm(1) rhythm(2) rhythm(3);
    
    p--a--b--c => padding: var(--a) var(--b) var(--c);
    
    mA  => margin: auto;
    
    fw2 => font-weight: 200;
    
    t0,r0,b0,l0 === t0+r0+b0+l0
    
    @kf => @keyframes
    @in => @if not | {}
    
    :fu =>
    &:focus {
      |
    }
    
    :n(:fc) =>
    &:not(:first-child) {
      |
    }
    
    :n(:fc,:lc):be =>
    &:not(:first-child):not(:last-child) {
      |
    }
    

    详情请大家移步: https://github.com/P233/emmet2-mode

    2 条回复    2022-11-23 15:12:52 +08:00
    DingJZ
        1
    DingJZ  
       2022-11-23 14:46:42 +08:00
    感觉这几年都用不上 emmet 了,祖传的技能快忘光了
    P233
        2
    P233  
    OP
       2022-11-23 15:12:52 +08:00
    @DingJZ 哈哈 LSP 后是这样的,HTML 的优势已经不明显了,但在录入 CSS 方面还是无敌。

    昨天加入了 css in js 的支持,后面改动应该不多了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2691 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:08 · PVG 11:08 · LAX 19:08 · JFK 22:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.