Emmet: Emmet für CSS-in-JS

@renatorib Hast du schon eine Lösung gefunden, um emmet für CSS-inJS zu verwenden?

NÖ

Wenn Sie Atom verwenden, sehen Sie sich https://atom.io/packages/atom-emmet-css-in-js an

für vscode gibt es zwei pakete:

• js-Schnipsel
• CSS-in-JS

Der zweite hat mehr Installationen, aber ich konnte ihn nicht zum Laufen bringen :/

Arbeite daran als Teil von Emmet v2: https://github.com/emmetio/emmet/tree/v2
Können Sie einige Angaben zum gewünschten Verhalten machen (ich persönlich verwende CSS-in-JS nicht)?

@sergeche das Verhalten wäre sehr ähnlich:

zum Beispiel innerhalb einer .jsx Datei würde das Drücken bgc<TAB> zu ` backgroundColor: '#' erweitern - mit dem Cursor hinter dem # .

Notiz:

1. Eigenschaften sind camelCased
2. der Wert ist in diesem Fall ein String
3. der Wert kann auch eine Zahl sein, zB für opacity , also lassen wir die Anführungszeichen weg, dh das Drücken op<TAB> würde zu opacity: erweitern

Was denkst du?

@goldylucks ja, aktuelle Implementierung funktioniert so: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
Ich dachte, dass es einige Macken gibt, wie mehrere Werte müssen Arrays sein ( margin: 10px 20px → margin: [10, 20] ) oder so etwas.

Wenn es sich hauptsächlich um eine JSON-ähnliche Ausgabe von CSS-Eigenschaften handelt, ist sie bereits im neuen Emmet implementiert

@sergeche sollten die lg()-Gradient-CSS-Abkürzungen in css-in-js funktionieren? Ich kann es anscheinend nicht zum Laufen bringen.

@tayler-ramsay sollte funktionieren. Verwenden Sie die neueste RC-Version von Emmet (v2.0.0rc-5)?

@sergeche Danke für die schnelle Antwort. Ich arbeite in VS-Code. Gibt es eine Möglichkeit, die verwendete Version sicherzustellen?

Ich denke, es ist nur v2. Ich könnte es einfach als Abhängigkeit installieren, das ist gut. Ich frage mich nur, ob ich es in VS-Code aktualisieren könnte. Entschuldigung für die Bearbeitung meiner Antwort ;/

Oh, dann ist es noch nicht verfügbar. Die neue Emmet-Version ist nur im neuen Sublime Text-Plugin verfügbar

Beifall!
Mit freundlichen Grüßen,

Tayler Ramsay ({

• ({Entwickler} && "Designer")*
• Rückkehr {*
  [Telefon: (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"Es ist so ein schmaler Grat zwischen dumm und clever."

Am Mittwoch, 30. Oktober 2019 um 10:15 Uhr Sergey Chikuyonok [email protected]
schrieb:

Oh, dann ist es noch nicht verfügbar. Die neue Emmet-Version ist nur in verfügbar
neues Sublime Text-Plugin

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECUK2HI#issuecomment-547,747
oder abbestellen
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

Unterstützung für CSS-Vorlagenliterale wäre auch großartig.

Z.B

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

Bearbeiten: Vergiss mich, ich musste nur die Erweiterung vscode-styled-components installieren.

Danke!

Das ist toll! Bitte, @sergeche , lassen Sie mich wissen, ob ich Ihnen bei dieser Funktion behilflich sein kann.

Ich habe Emmet 2.0 gestern öffentlich zugänglich gemacht (nur der Kernteil selbst), es ist in den Editoren Sublime Text, CodeMirror und Nova verfügbar. Sie können mir einige Code-Snippets mit realen Anwendungsfällen geben, damit ich den Editor für eine bessere Kontexterkennung optimieren kann.

Beispielsweise müssen in JS(X) Abkürzungen < vorangestellt werden, um Benutzer nicht durch falsche Übereinstimmungen abzulenken. Sie sollten zB etwas wie <div.my-class schreiben. Ich kann ein benutzerdefiniertes Präfix erstellen, damit Sie klar angeben können, dass die von Ihnen eingegebene Abkürzung als CSS-Objektliteral erweitert werden muss. So etwas wie |m10+p5

Das ist großartig! Was die Snippets betrifft, hängt es von dem CSS-in-JS ab, das Sie verwenden (und sogar davon, wie Sie es konfiguriert haben). Das ursprüngliche Beispiel aus dieser Ausgabe ist ein gutes Beispiel (ich habe margin optimiert):

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

Sie könnten auch so etwas tun und die gleichen Ergebnisse erhalten (zumindest in JSS):

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

Da es viele Arten von CSS-in-JS gibt, denke ich, dass die sicherste Standardeinstellung darin besteht, Werte in Anführungszeichen zu verwenden, wie im ersten Beispiel.

Gibt es eine Möglichkeit, dies in VS Code zu versuchen?

Ich plane, die VSCode-Erweiterung in naher Zukunft neu zu schreiben, um alle Emmet-Funktionen zu unterstützen

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

2. Mai 2020, um 15:25 Uhr, Thomas [email protected]

,
Gibt es eine Möglichkeit, dies in VS Code zu versuchen?

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder kündigen Sie sie.

Hallo 👋
Basierend auf der obigen Konversation klingt es so, als hätte Emmet Unterstützung für die CSS-Objektsyntax in .js -Dateien, aber dies wird in VS Code noch nicht unterstützt.

Ist das richtig? ☝️

Ich habe Google gesucht, aber ich konnte keine klare Antwort finden.
@sergeche Vielen Dank für deine Arbeit an dieser Funktion!

Ja, die neue Emmet-Version (bereits in VSCode) unterstützt bereits die Ausgabe als JSON-Eigenschaften. Es erfordert zusätzliche Unterstützung vom Plugin selbst

He, das ist toll! Ich habe noch nicht herausgefunden, wie es funktioniert.

Es erfordert zusätzliche Unterstützung vom Plugin selbst

☝️ Kannst du das etwas näher erläutern oder mich in die richtige Richtung weisen? Gibt es irgendwo Docs, wie man es zum Laufen bringt?
Danke noch einmal!

Das Setzen emmet.includeLanguages auf "javascript": "css" gibt mir Standard-CSS (keine Objektsyntax).
Wenn Sie es auf "javascript": "javascriptreact" setzen, wird versucht, das CSS in JSX umzuwandeln.

Gibt es eine andere Einstellung, die ich verwenden sollte, um die CSS-Objektsyntax zu erhalten? Ich kann nirgendwo eine Liste mit möglichen Optionen finden. Hier sehen Sie meine settings.json und das Problem, das ich habe:

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

Um klar zu sein, hoffe ich, dies in meine .js -Datei einzugeben:
d:f+jc:c+ai:c+mt10

Und bekomme diese Ausgabe:

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

Diese Option muss auf true gesetzt werden: https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

Nicht sicher, wie man Emmet-Optionen im VSCode-Plugin einstellt (ich bin nicht der Betreuer)

Ich denke, Sie haben Recht @sergeche , haben Sie den Weg gefunden, die Konfiguration zu VSCode hinzuzufügen?

@josegutierro hat es noch nicht versucht. Ich denke, es ist nicht nur eine Option im VSCode-Plugin, es sollte vom Plugin ordnungsgemäß unterstützt werden, um zu funktionieren.

Vielen Dank @sergeche für den Moment, in dem ich diese Erweiterung nativeEmmet verwende . Ist nicht wirklich Emmet, aber es gibt viele Snippets mit Tab-Vervollständigung. Hier ist die vollständige Liste