Emmet: 用于 CSS-in-JS 的 Emmet

@renatorib您是否找到了将 emmet 用于 CSS-inJS 的解决方案？

不

如果您使用的是 Atom，请查看https://atom.io/packages/atom-emmet-css-in-js

对于 vscode 有两个包：

• js片段
• CSS-in-JS

第二个有更多的安装，但我无法让它工作：/

作为 Emmet v2 的一部分进行处理： https ://github.com/emmetio/emmet/tree/v2
您能否提供一些有关所需行为的规范（我个人不使用 CSS-in-JS）？

@sergeche行为将非常相似：

例如在.jsx文件中，按bgc<TAB>将扩展为` backgroundColor: '#' - 光标位于#之后。

注意：

1. 属性为驼峰式
2. 在这种情况下的值是一个字符串
3. 该值也可以是一个数字，即opacity ，因此我们省略引号，即按op<TAB>将扩展为opacity:

你怎么认为？

@goldylucks是的，当前的实现是这样的： https ://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
我认为有一些怪癖，例如多个值必须是数组（ margin: 10px 20px → margin: [10, 20] ）或其他东西。

如果它主要是 CSS 属性的类似 JSON 的输出，那么它已经在新的 Emmet 中实现了

@sergeche lg() 渐变 CSS 缩写应该在 css-in-js 中工作吗？ 我似乎无法让它工作。

@tayler-ramsay 应该可以。 您是否使用最新的 RC 版本的 Emmet (v2.0.0rc-5)？

@sergeche感谢您的快速回复。 我正在使用 VS 代码，有没有办法可以确定它使用的版本？

我认为它只是v2。 我可以将其安装为一个很好的依赖项。 只是想知道我是否可以在 VS 代码中升级它。 很抱歉编辑我的回复；/

哦，那它还没有。 新的 Emmet 版本仅在新的 Sublime Text 插件中可用

干杯!
最好的祝福，

泰勒拉姆齐 ({

• （{开发人员} && “设计师”）*
• 返回 {*
  [电话：（717）578-3243，
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

“愚蠢和聪明之间的界限是如此微妙。”

2019 年 10 月 30 日星期三上午 10:15 Sergey Chikuyonok [email protected]
写道：

哦，那它还没有。 新 Emmet 版本仅适用于
新的 Sublime Text 插件

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECUK2HI#issuecomment-54792
或退订
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

对 css 模板文字的支持也会很棒。

例如

const style = css`
  background-color: red;
  /* Auto-expand css props */
`;

编辑：别管我，我只需要安装vscode-styled-components扩展。

谢谢！

这很棒！ 请@sergeche ，让我知道我是否可以对这个功能有任何帮助。

我昨天公开了 Emmet 2.0（只是核心部分本身），它在 Sublime Text、CodeMirror 和 Nova 编辑器中可用。 你可以给我一些实际用例的代码片段，这样我就可以调整编辑器以更好地检测上下文。

例如，在 JS(X) 中，缩写必须以<为前缀，以免因错误匹配分散用户的注意力。 例如，您应该编写类似<div.my-class的内容。 我可以制作自定义前缀，这样您就可以清楚地说明您输入的缩写必须扩展为 CSS 对象文字。 |m10+p5之类的东西

棒极了！ 至于片段，它取决于您正在使用的 CSS-in-JS（甚至您如何配置它）。 这个问题的原始示例是一个很好的示例（我调整了margin ）：

{
  display: 'flex',
  fontSize: '16px',
  margin: '10px 5px',
}

您也可以这样做并获得相同的结果（至少在 JSS 中）：

{
  display: 'flex',
  fontSize: 16,
  margin: [[5, 10]],
}

由于 CSS-in-JS 有多种风格，我认为最安全的默认设置是在第一个示例中使用引号内的值。

有机会在 VS Code 中尝试这个吗？

我计划在不久的将来重写 VSCode 扩展以支持所有 Emmet 功能

Отправлено с iPhone

2 мая 2020 г., в 15:25，Thomas [email protected] написал(а)：

有机会在 VS Code 中尝试这个吗？

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看，或退订。

你好👋
根据上面的对话，听起来 Emmet 确实支持.js文件中的 CSS 对象语法，但 VS Code 尚不支持。

这是准确的吗？ ☝️

我搜索了谷歌，但我找不到一个直接的答案。
@sergeche 非常感谢您在此功能上所做的工作！

是的，新的 Emmet 版本（已经在 VSCode 中）已经支持输出为 JSON 属性。 它需要插件本身的额外支持

嘿，太棒了！ 我还没有弄清楚如何使它工作。

它需要插件本身的额外支持

☝️您能否详细说明一下或指出正确的方向？ 是否有关于如何使其工作的文档？
再次感谢！

将emmet.includeLanguages设置为"javascript": "css"给了我标准的 CSS（不是对象语法）。
将其设置为"javascript": "javascriptreact"会尝试将 CSS 转换为 JSX。

我应该使用其他设置来获取 CSS 对象语法吗？ 我在任何地方都找不到可能的选项列表。 在这里你可以看到我的settings.json和我遇到的问题：

https://user-images.githubusercontent.com/19367659/113518218-ebbfbb00-9552-11eb-8963-eadef0b15f06.mp4

需要明确的是，我希望在我的.js文件中输入这个：
d:f+jc:c+ai:c+mt10

并得到这个输出：

display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,

此选项必须设置为true ： https ://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

不确定如何在 VSCode 插件中设置 Emmet 选项（我不是维护者）

我认为你是对的@sergeche ，你找到将配置添加到 VSCode 的方法了吗？

@josegutierro还没有尝试过。 我想这不仅仅是 VSCode 插件中的一个选项，它应该得到插件的适当支持才能工作。

感谢@sergeche ，我正在使用这个扩展程序nativeEmmet 。 不是真正的 Emmet，但有很多带有选项卡完成的片段。 这是完整列表