Emmet: Emmet untuk CSS-in-JS

@renatorib Sudahkah Anda menemukan solusi untuk menggunakan emmet untuk CSS-inJS?

Tidak

Jika Anda menggunakan Atom, lihat https://atom.io/packages/atom-emmet-css-in-js

untuk vscode ada dua paket:

• cuplikan js
• CSS-dalam-JS

Yang kedua memiliki lebih banyak pemasangan tetapi saya tidak dapat membuatnya berfungsi:/

Mengerjakannya sebagai bagian dari Emmet v2: https://github.com/emmetio/emmet/tree/v2
Bisakah Anda memberikan beberapa spesifikasi tentang perilaku yang diinginkan (saya pribadi tidak menggunakan CSS-in-JS)?

@sergeche perilakunya akan sangat mirip:

misalnya di dalam file .jsx , menekan bgc<TAB> akan memperluas ke ` backgroundColor: '#' - dengan kursor setelah # .

Melihat:

1. properti adalah untaCased
2. nilai dalam hal ini adalah string
3. nilainya juga bisa berupa angka yaitu untuk opacity , jadi kami menghilangkan tanda kutip, yaitu menekan op<TAB> akan memperluas ke opacity:

Bagaimana menurut anda?

@goldylucks ya, implementasi saat ini berfungsi seperti ini: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
Saya pikir ada beberapa kebiasaan seperti beberapa nilai harus berupa array ( margin: 10px 20px → margin: [10, 20] ) atau sesuatu.

Jika sebagian besar merupakan keluaran seperti JSON dari properti CSS maka itu sudah diimplementasikan di Emmet baru

@sergeche haruskah Singkatan CSS gradien lg() berfungsi di css-in-js? Saya tidak bisa membuatnya bekerja.

@tayler-ramsay harus bekerja. Apakah Anda menggunakan Emmet versi RC terbaru (v2.0.0rc-5)?

@sergeche terima kasih atas tanggapan cepatnya. Saya bekerja dalam kode VS apakah ada cara agar saya dapat memastikan versi yang digunakannya?

Saya pikir itu hanya v2. Saya hanya bisa menginstal adalah sebagai ketergantungan yang baik. Hanya ingin tahu apakah saya bisa memutakhirkannya dalam kode VS. Maaf untuk mengedit tanggapan saya ;/

Oh, maka itu belum tersedia. Versi Emmet baru hanya tersedia di plugin Sublime Text baru

Bersulang!
Salam,

Taylor Ramsay ({

• ({Pengembang} && "Desainer")*
• kembali {*
  [ Telepon: (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"Ini adalah garis tipis antara bodoh dan pintar."

Pada hari Rabu, 30 Okt 2019 jam 10:15 Sergey [email protected]
menulis:

Oh, maka itu belum tersedia. Versi Emmet baru hanya tersedia di
plugin Teks Sublim baru

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMZHW63LNMVXW52ZECLOUK5WS
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

Dukungan untuk literal template css juga bagus.

Misalnya

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

Sunting: tidak apa-apa, saya hanya perlu menginstal ekstensi komponen bergaya vscode .

Terima kasih!

Ini bagus! Tolong, @sergeche , beri tahu saya jika saya dapat membantu dengan fitur ini.

Saya membuat Emmet 2.0 tersedia untuk umum kemarin (hanya bagian inti itu sendiri), tersedia di editor Sublime Text, CodeMirror dan Nova. Anda dapat memberi saya beberapa cuplikan kode dengan kasus penggunaan dunia nyata sehingga saya dapat menyetel editor untuk deteksi konteks yang lebih baik.

Sebagai contoh, di JS(X), singkatan harus diawali dengan < agar tidak mengganggu pengguna dengan kecocokan yang salah. Misalnya Anda harus menulis sesuatu seperti <div.my-class . Saya dapat membuat awalan khusus sehingga Anda dapat dengan jelas menyatakan bahwa singkatan yang Anda ketik harus diperluas sebagai objek CSS literal. Sesuatu seperti |m10+p5

Itu luar biasa! Adapun cuplikan, itu tergantung pada CSS-in-JS yang Anda gunakan (dan bahkan bagaimana Anda mengonfigurasinya). Contoh asli dari masalah ini adalah contoh yang bagus (saya mengubah margin ):

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

Anda juga bisa melakukan sesuatu seperti ini dan mendapatkan hasil yang sama (setidaknya di JSS):

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

Karena ada banyak rasa CSS-in-JS, saya pikir default teraman adalah menggunakan nilai dalam tanda kutip seperti pada contoh pertama.

Adakah kesempatan untuk mencoba ini di VS Code?

Saya berencana untuk menulis ulang ekstensi VSCode dalam waktu dekat untuk mendukung semua fitur Emmet

авлено iPhone

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

Lalai
Adakah kesempatan untuk mencoba ini di VS Code?

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau berhenti berlangganan.

Hai
Berdasarkan percakapan di atas, sepertinya Emmet memang memiliki dukungan untuk sintaks objek CSS dalam file .js tetapi ini belum didukung di VS Code.

Apakah ini akurat? ️

Saya mencari di Google tetapi saya tidak dapat menemukan jawaban langsung.
@sergeche Terima kasih banyak atas pekerjaan Anda pada fitur ini!

Ya, versi Emmet baru (sudah di VSCode) sudah mendukung output sebagai properti JSON. Itu membutuhkan dukungan tambahan dari plugin itu sendiri

Hei itu luar biasa! Saya belum menemukan cara untuk membuatnya bekerja.

Itu membutuhkan dukungan tambahan dari plugin itu sendiri

️ Bisakah Anda menguraikan ini sedikit atau mengarahkan saya ke arah yang benar? Apakah ada dokumen di suatu tempat tentang cara membuatnya berfungsi?
Terima kasih lagi!

Menyetel emmet.includeLanguages ke "javascript": "css" memberi saya CSS standar (bukan sintaks objek).
Menyetelnya ke "javascript": "javascriptreact" mencoba mengubah CSS menjadi JSX.

Apakah ada pengaturan lain yang harus saya gunakan untuk mendapatkan sintaks objek CSS? Saya tidak dapat menemukan daftar opsi yang memungkinkan di mana pun. Di sini Anda dapat melihat settings.json saya dan masalah yang saya alami:

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

Untuk lebih jelasnya saya berharap untuk mengetik ini di file .js saya:
d:f+jc:c+ai:c+mt10

Dan dapatkan output ini:

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

Opsi ini harus disetel ke true : https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

Tidak yakin cara mengatur opsi Emmet di plugin VSCode (Saya bukan pengelola)

Saya pikir Anda benar @sergeche , sudahkah Anda menemukan cara menambahkan konfigurasi ke VSCode?

@josegutierro belum mencoba. Saya kira itu bukan hanya opsi di plugin VSCode, itu harus didukung dengan benar oleh plugin agar berfungsi.

Terima kasih @sergeche untuk saat ini saya menggunakan ekstensi ini nativeEmmet . Tidak benar-benar Emmet tetapi ada banyak cuplikan dengan penyelesaian tab. Berikut daftar lengkapnya