Emmet: Emmet para CSS en JS

@renatorib ¿Ya encontró una solución para usar emmet para CSS-inJS?

no

Si usa Atom, consulte https://atom.io/packages/atom-emmet-css-in-js

para vscode hay dos paquetes:

• fragmentos js
• CSS en JS

El segundo tiene más instalaciones pero no pude hacerlo funcionar :/

Trabajando en él como parte de Emmet v2: https://github.com/emmetio/emmet/tree/v2
¿Puede proporcionar algunas especificaciones sobre el comportamiento deseado (personalmente no uso CSS-in-JS)?

@sergeche el comportamiento sería muy similar:

por ejemplo, dentro de un archivo .jsx , al presionar bgc<TAB> se expandiría a ` backgroundColor: '#' - con el cursor después de # .

Aviso:

1. las propiedades son camelCased
2. el valor en este caso es una cadena
3. el valor también puede ser un número, es decir, para opacity , por lo que omitimos las comillas, es decir, al presionar op<TAB> se expandiría a opacity:

¿Qué piensas?

@goldylucks sí, la implementación actual funciona así: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
Pensé que hay algunas peculiaridades como que los valores múltiples deben ser matrices ( margin: 10px 20px → margin: [10, 20] ) o algo así.

Si se trata principalmente de una salida similar a JSON de propiedades CSS, entonces ya está implementada en el nuevo Emmet

@sergeche ¿deberían funcionar las abreviaturas CSS del gradiente lg() en css-in-js? Parece que no puedo hacerlo funcionar.

@ tayler-ramsay debería funcionar. ¿Utiliza la última versión RC de Emmet (v2.0.0rc-5)?

@sergeche gracias por la rápida respuesta. Estoy trabajando en el código VS, ¿hay alguna forma de asegurarme de la versión que está usando?

Creo que solo es v2. Podría simplemente instalarlo como una dependencia que es buena. Solo me preguntaba si podría actualizarlo en código VS. Perdón por editar mi respuesta ;/

Oh, entonces aún no está disponible. La nueva versión de Emmet solo está disponible en el nuevo complemento Sublime Text

¡Salud!
Atentamente,

Taylor Ramsay ({

• ({Desarrollador} && "Diseñador")*
• regreso {*
  [ Teléfono: (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"Es una línea muy fina entre estúpido e inteligente".

El miércoles 30 de octubre de 2019 a las 10:15 Sergey Chikuyonok [email protected]
escribió:

Oh, entonces aún no está disponible. La nueva versión de Emmet solo está disponible en
nuevo complemento de texto sublime

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECUK2HI7#issue25-574
o darse de baja
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

La compatibilidad con los literales de plantilla css también sería excelente.

P.ej

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

Editar: no se preocupe por mí, solo necesitaba instalar la extensión de componentes con estilo vscode .

¡Gracias!

¡Esto es genial! Por favor, @sergeche , avíseme si puedo ser de ayuda con esta función.

Hice Emmet 2.0 disponible públicamente ayer (solo la parte central en sí), está disponible en los editores Sublime Text, CodeMirror y Nova. Puede darme algunos fragmentos de código con casos de uso del mundo real para que pueda ajustar el editor para una mejor detección del contexto.

Por ejemplo, en JS(X), las abreviaturas deben tener el prefijo < para no distraer a los usuarios con coincidencias falsas. Por ejemplo, debe escribir algo como <div.my-class . Puedo hacer un prefijo personalizado para que pueda indicar claramente que la abreviatura que está escribiendo debe expandirse como objeto CSS literal. Algo así como |m10+p5

¡Eso es genial! En cuanto a los fragmentos, depende del CSS-in-JS que esté utilizando (e incluso de cómo lo haya configurado). El ejemplo original de este problema es un buen ejemplo (ajusté el margin ):

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

También podría hacer algo como esto y obtener los mismos resultados (al menos en JSS):

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

Dado que hay muchos tipos de CSS-in-JS, creo que el valor predeterminado más seguro sería usar valores entre comillas como en el primer ejemplo.

¿Alguna posibilidad de probar esto en VS Code?

Planeo reescribir la extensión VSCode en un futuro cercano para admitir todas las funciones de Emmet

Compatible con iPhone

2 de mayo de 2020, a las 15:25, Thomas [email protected] написал(а):

Prenda
¿Alguna posibilidad de probar esto en VS Code?

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o cancele la suscripción.

Hola 👋
Según la conversación anterior, parece que Emmet admite la sintaxis de objetos CSS dentro de los archivos .js , pero aún no es compatible con VS Code.

¿Es esto exacto? ☝️

Busqué en Google pero no pude encontrar una respuesta directa.
@sergeche ¡Muchas gracias por su trabajo en esta función!

Sí, la nueva versión de Emmet (ya en VSCode) ya admite la salida como propiedades JSON. Requiere soporte adicional del propio complemento.

¡Oye, eso es increíble! Todavía no he descubierto cómo hacer que funcione.

Requiere soporte adicional del propio complemento.

☝️ ¿Puedes dar más detalles sobre esto o indicarme la dirección correcta? ¿Hay documentos en alguna parte sobre cómo hacer que funcione?
¡Gracias de nuevo!

Establecer emmet.includeLanguages en "javascript": "css" me da CSS estándar (no sintaxis de objetos).
Establecerlo en "javascript": "javascriptreact" intenta convertir el CSS en JSX.

¿Hay otra configuración que debería usar para obtener la sintaxis de objetos CSS? No puedo encontrar una lista de posibles opciones en ninguna parte. Aquí puedes ver mis settings.json y el problema que tengo:

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

Para que quede claro, espero escribir esto en mi archivo .js :
d:f+jc:c+ai:c+mt10

Y obtener esta salida:

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

Esta opción debe establecerse en true : https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

No estoy seguro de cómo configurar las opciones de Emmet en el complemento VSCode (no soy el mantenedor)

Creo que tienes razón @sergeche , ¿has encontrado la forma de agregar la configuración a VSCode?

@josegutierro aún no lo probó. Supongo que no es solo una opción en el complemento VSCode, debe ser compatible correctamente con el complemento para que funcione.

Gracias @sergeche por el momento estoy usando esta extensión nativeEmmet . No es realmente Emmet, pero hay muchos fragmentos con pestañas completadas. Aquí está la lista completa