Emmet: Emmet pour CSS-en-JS

@renatorib Avez-vous déjà trouvé une solution pour utiliser emmet pour CSS-inJS ?

non

Si vous utilisez Atom, consultez https://atom.io/packages/atom-emmet-css-in-js

pour vscode il y a deux packages :

• extraits js
• CSS-en-JS

Le second a plus d'installations mais je n'ai pas pu le faire fonctionner :/

Travailler dessus dans le cadre d'Emmet v2 : https://github.com/emmetio/emmet/tree/v2
Pouvez-vous fournir des spécifications sur le comportement souhaité (je n'utilise pas personnellement CSS-in-JS) ?

@sergeche le comportement serait très similaire :

par exemple dans un fichier .jsx , appuyer sur bgc<TAB> se développerait en ` backgroundColor: '#' - avec le curseur après le # .

Remarquer:

1. les propriétés sont camelCased
2. la valeur dans ce cas est une chaîne
3. la valeur peut également être un nombre, c'est-à-dire pour opacity , nous omettons donc les guillemets, c'est-à-dire qu'appuyer sur op<TAB> se développerait en opacity:

Qu'en penses-tu?

@goldylucks oui, l'implémentation actuelle fonctionne comme ceci : https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
Je pensais qu'il y avait des bizarreries comme plusieurs valeurs doivent être des tableaux ( margin: 10px 20px → margin: [10, 20] ) ou quelque chose comme ça.

S'il s'agit principalement d'une sortie de type JSON de propriétés CSS, elle est déjà implémentée dans le nouvel Emmet

@sergeche les abréviations CSS dégradées lg() devraient-elles fonctionner dans css-in-js? Je n'arrive pas à le faire fonctionner.

@tayler-ramsay devrait fonctionner. Utilisez-vous la dernière version RC d'Emmet (v2.0.0rc-5) ?

@sergeche merci pour la réponse rapide. Je travaille dans le code VS, y a-t-il un moyen de m'assurer de la version qu'il utilise ?

Je pense que ce n'est que la v2. Je pourrais juste installer est comme une dépendance qui est bonne. Je me demandais juste si je pouvais le mettre à niveau dans le code VS. Désolé d'avoir édité ma réponse ;/

Oh, alors ce n'est pas encore disponible. La nouvelle version d'Emmet n'est disponible que dans le nouveau plugin Sublime Text

Acclamations!
Meilleures salutations,

Taylor Ramsay ({

• ({Développeur} && "Concepteur")*
• retourner {*
  [ Téléphone : (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"C'est une ligne si fine entre stupide et intelligent."

Le mercredi 30 octobre 2019 à 10 h 15, Sergey Chikuyonok [email protected]
a écrit:

Oh, alors ce n'est pas encore disponible. La nouvelle version d'Emmet n'est disponible qu'en
nouveau plug-in Sublime Text

—
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECUK2HI7#issuecom,5
ou désabonnez-vous
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

La prise en charge des littéraux de modèles CSS serait également excellente.

Par exemple

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

Edit: peu importe, j'avais juste besoin d'installer l' extension vscode-styled-components .

Merci!

C'est bien! S'il vous plaît, @sergeche , faites-moi savoir si je peux vous aider avec cette fonctionnalité.

J'ai rendu Emmet 2.0 accessible au public hier (juste la partie principale elle-même), elle est disponible dans les éditeurs Sublime Text, CodeMirror et Nova. Vous pouvez me donner des extraits de code avec des cas d'utilisation réels afin que je puisse régler l'éditeur pour une meilleure détection du contexte.

Par exemple, dans JS(X), les abréviations doivent être précédées de < afin de ne pas distraire les utilisateurs avec de fausses correspondances. Par exemple, vous devriez écrire quelque chose comme <div.my-class . Je peux créer un préfixe personnalisé afin que vous puissiez clairement indiquer que l'abréviation que vous tapez doit être développée en tant qu'objet CSS littéral. Quelque chose comme |m10+p5

C'est génial! Quant aux extraits de code, cela dépend du CSS-in-JS que vous utilisez (et même de la façon dont vous l'avez configuré). L'exemple original de ce numéro est un bon exemple (j'ai modifié le margin ):

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

Vous pouvez également faire quelque chose comme ça et obtenir les mêmes résultats (au moins dans JSS):

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

Puisqu'il existe de nombreuses variantes de CSS-in-JS, je pense que la valeur par défaut la plus sûre serait d'utiliser des valeurs entre guillemets comme dans le premier exemple.

Une chance d'essayer cela dans VS Code ?

Je prévois de réécrire l'extension VSCode dans un avenir proche pour prendre en charge toutes les fonctionnalités d'Emmet

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

2 mai 2020 г., à 15:25, Thomas [email protected] написал(à):

En tant que
Une chance d'essayer cela dans VS Code ?

—
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub ou désabonnez-vous.

Salut 👋
D'après la conversation ci-dessus, il semble qu'Emmet prenne en charge la syntaxe d'objet CSS dans les fichiers .js , mais cela n'est pas encore pris en charge dans VS Code.

Est-ce exact ? ☝️

J'ai cherché sur Google mais je n'ai pas trouvé de réponse claire.
@sergeche Merci beaucoup pour votre travail sur cette fonctionnalité !

Oui, la nouvelle version d'Emmet (déjà dans VSCode) prend déjà en charge la sortie en tant que propriétés JSON. Il nécessite un support supplémentaire du plugin lui-même

Hé c'est génial ! Je n'ai pas encore compris comment le faire fonctionner.

Il nécessite un support supplémentaire du plugin lui-même

☝️ Pouvez-vous développer un peu cela ou m'orienter dans la bonne direction ? Existe-t-il des docs quelque part sur la façon de le faire fonctionner?
Merci encore!

Définir emmet.includeLanguages sur "javascript": "css" me donne un CSS standard (pas une syntaxe d'objet).
Le régler sur "javascript": "javascriptreact" essaie de transformer le CSS en JSX.

Existe-t-il un autre paramètre que je devrais utiliser pour obtenir la syntaxe d'objet CSS ? Je ne trouve nulle part la liste des options possibles. Ici vous pouvez voir mon settings.json et le problème que j'ai :

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

Pour être clair, j'espère taper ceci dans mon fichier .js :
d:f+jc:c+ai:c+mt10

Et obtenez cette sortie :

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

Cette option doit être définie sur true : https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

Je ne sais pas comment définir les options Emmet dans le plugin VSCode (je ne suis pas le responsable)

Je pense que tu as raison @sergeche , as-tu trouvé le moyen d'ajouter la config à VSCode ?

@josegutierro n'a pas encore essayé. Je suppose que ce n'est pas seulement une option dans le plugin VSCode, il doit être correctement pris en charge par le plugin pour fonctionner.

Merci @sergeche pour le moment j'utilise cette extension nativeEmmet . N'est-ce pas vraiment Emmet mais il y a beaucoup d'extraits avec complétion de tabulation. Voici la liste complète