Emmet: Emmet para CSS em JS

@reatorib Você já encontrou uma solução para usar o emmet para CSS-inJS?

não

Se você estiver usando o Atom, confira https://atom.io/packages/atom-emmet-css-in-js

para vscode existem dois pacotes:

• trechos js
• CSS em JS

O segundo tem mais instalações, mas não consegui fazê-lo funcionar :/

Trabalhando nele como parte do Emmet v2: https://github.com/emmetio/emmet/tree/v2
Você pode fornecer algumas especificações sobre o comportamento desejado (eu pessoalmente não uso CSS-in-JS)?

@sergeche o comportamento seria bem parecido:

por exemplo, dentro de um arquivo .jsx , pressionar bgc<TAB> expandiria para ` backgroundColor: '#' - com o cursor após o # .

Aviso prévio:

1. propriedades são camelCased
2. o valor neste caso é uma string
3. o valor também pode ser um número, ou seja, para opacity , então omitimos as aspas, ou seja, pressionar op<TAB> expandiria para opacity:

O que você acha?

@goldylucks sim, a implementação atual funciona assim: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
Eu pensei que existem algumas peculiaridades como vários valores devem ser arrays ( margin: 10px 20px → margin: [10, 20] ) ou algo assim.

Se for principalmente uma saída semelhante a JSON de propriedades CSS, ela já está implementada no novo Emmet

@sergeche as abreviações CSS gradientes lg() devem funcionar em css-in-js? Eu não consigo fazê-lo funcionar.

@tayler-ramsay deve funcionar. Você usa a versão RC mais recente do Emmet (v2.0.0rc-5)?

@sergeche obrigado pela rápida resposta. Estou trabalhando no código VS, existe uma maneira de ter certeza da versão que está usando?

Eu acho que é apenas v2. Eu poderia apenas instalar é como uma dependência que é boa. Apenas querendo saber se eu poderia atualizá-lo no código VS. Desculpe por editar minha resposta ;/

Ah, então ainda não está disponível. A nova versão do Emmet está disponível apenas no novo plugin Sublime Text

Felicidades!
Atenciosamente,

Tayler Ramsay ({

• ({Desenvolvedor} && "Designer")*
• Retorna {*
  [Telefone: (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"É uma linha tão tênue entre estúpido e inteligente."

Quarta-feira, 30 de outubro de 2019 às 10h15 Sergey Chikuyonok [email protected]
escreveu:

Ah, então ainda não está disponível. A nova versão do Emmet só está disponível em
novo plugin Sublime Text

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZ7GOECUK2HI#issuecomment-
ou cancelar
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

O suporte para literais de modelo css também seria ótimo.

Por exemplo

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

Edit: não importa, eu só precisava instalar a extensão vscode-styled-components .

Obrigado!

Isso é ótimo! Por favor, @sergeche , deixe-me saber se posso ajudar com esse recurso.

Eu disponibilizei o Emmet 2.0 publicamente ontem (apenas a parte principal), está disponível nos editores Sublime Text, CodeMirror e Nova. Você pode me dar alguns trechos de código com casos de uso do mundo real para que eu possa ajustar o editor para uma melhor detecção de contexto.

Como exemplo, em JS(X), as abreviações devem ser prefixadas com < para não distrair os usuários com correspondências falsas. Por exemplo, você deve escrever algo como <div.my-class . Eu posso fazer um prefixo personalizado para que você possa afirmar claramente que a abreviação que você está digitando deve ser expandida como literal de objeto CSS. Algo como |m10+p5

Fantástico! Quanto aos snippets, depende do CSS-in-JS que você está usando (e até mesmo de como você o configurou). O exemplo original desta edição é um bom exemplo (eu ajustei o margin ):

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

Você também pode fazer algo assim e obter os mesmos resultados (pelo menos em JSS):

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

Como existem muitos tipos de CSS-in-JS, acho que o padrão mais seguro seria usar valores entre aspas, como no primeiro exemplo.

Alguma chance de tentar isso no VS Code?

Pretendo reescrever a extensão VSCode em um futuro próximo para oferecer suporte a todos os recursos do Emmet

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

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

Em
Alguma chance de tentar isso no VS Code?

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou cancele a inscrição.

Oi 👋
Com base na conversa acima, parece que Emmet tem suporte para sintaxe de objeto CSS em arquivos .js , mas isso ainda não é suportado no VS Code.

Isso é preciso? ☝️

Pesquisei no Google mas não encontrei uma resposta direta.
@sergeche Muito obrigado pelo seu trabalho neste recurso!

Sim, a nova versão do Emmet (já no VSCode) já suporta saída como propriedades JSON. Requer suporte adicional do próprio plugin

Ei, isso é incrível! Ainda não descobri como fazer isso funcionar.

Requer suporte adicional do próprio plugin

☝️ Você pode elaborar um pouco sobre isso ou me apontar na direção certa? Existem documentos em algum lugar sobre como fazê-lo funcionar?
Obrigado novamente!

Definir emmet.includeLanguages para "javascript": "css" me dá CSS padrão (não sintaxe de objeto).
Defini-lo como "javascript": "javascriptreact" tenta transformar o CSS em JSX.

Existe outra configuração que devo usar para obter a sintaxe do objeto CSS? Não consigo encontrar uma lista de opções possíveis em nenhum lugar. Aqui você pode ver meu settings.json e o problema que estou tendo:

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

Para ser claro, espero digitar isso no meu arquivo .js :
d:f+jc:c+ai:c+mt10

E obtenha esta saída:

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

Esta opção deve ser definida como true : https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

Não tenho certeza de como definir as opções do Emmet no plugin VSCode (não sou o mantenedor)

Eu acho que você está certo @sergeche , você encontrou a maneira de adicionar a configuração ao VSCode?

@josegutierro ainda não experimentou. Eu acho que não é apenas uma opção no plugin VSCode, ele deve ser devidamente suportado pelo plugin para funcionar.

Obrigado @sergeche no momento estou usando essa extensão nativeEmmet . Não é realmente Emmet, mas existem muitos trechos com preenchimento de guias. Aqui está a lista completa