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

2022-11-21 23:56:09 +08:00
 P233

前段时间 懒猫 大佬写了 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

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

昨天加入了 css in js 的支持,后面改动应该不多了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/896938

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX