Ekstensi ini secara otomatis mengubah kelas CSS menjadi sintaks Modul CSS
Untuk mengaktifkan ekstensi secara manual, tekan Ctrl+Shift+P dan pilih Transform classes into CSS module syntax;
Masalah Dikenal
- Mengonversi secara otomatis saat menyimpan hanya berfungsi jika Anda telah mengonversinya secara manual minimal satu kali
Instalasi
- Instal melalui pasar Visual Studio Code
- Unduh dan instal paket vsix_ dari Rilis Github
Menyumbang
Berkontribusi di Github
Ekstensi ini memperluas pengeditan kode HTML dan ejs dengan dukungan Go To Definition dan Go To Symbol in Workspace untuk css/scss/less (kelas dan ID) yang ditemukan dalam string di dalam kode sumber
Ini sangat terinspirasi oleh fitur serupa di Brackets yang disebut CSS Inline Editors
Ekstensi mendukung semua kemampuan normal pelacakan definisi simbol, tetapi apakah itu untuk pemilih css (kelas, ID, dan tag HTML). Ini termasuk
- Mengintip. muat file css sebaris dan lakukan pengeditan cepat di sana. (Ctrl+Shift+F12)
- Pergi ke. lompat langsung ke file css atau buka di editor baru (F12)
- Arahkan. tampilkan definisi dengan mengarahkan kursor ke simbol (Ctrl+hover)
Selain itu, ini mendukung Penyedia Simbol sehingga Anda dapat dengan cepat beralih ke kode CSS/SCSS/KURANG yang tepat jika Anda sudah mengetahui nama kelas atau ID
Mengizinkan Pergi ke Definisi dari HTML ke CSS / Sass / Kurang, menyediakan Simbol Penyelesaian dan Ruang Kerja untuk nama kelas & id, dan mendukung Temukan Referensi dari CSS ke HTML
Fitur
Pergi ke Definition dan Peek Definition
Dalam dokumen HTML, pilih Go to definition_ atau Peek definition, ekstensi akan mencari pemilih CSS & Scss & Kurang terkait di folder ruang kerja saat ini. Dapat juga mencari pemilih dalam referensi bersarang &... untuk Sass & Less
Tempat Anda dapat menemukan definisi
- HTML (or files whose extension specified by activeHTMLFileExtensions option): , class="class-name", id="id-name".
- BEJ dan TSX. namakelas="class-name", namakelas={"class-name"}
- Dokumen seperti CSS. Go to definition0, Go to definition1, Go to definition2
Perhatikan bahwa template JSX tidak memberikan penyelesaian untuk nilai atribut secara default, Anda dapat memicunya secara manual dengan mengklik Go to definition3, atau mengubah pengaturan
editor.quickSuggestions": { "other": true, "comments": false, "strings": false },Simbol ruang kerja
Memungkinkan untuk mencari simbol ruang kerja di file CSS & Scss & Kurang di semua folder ruang kerja yang diaktifkan
Penyelesaian Nama Kelas dan ID
Memberikan nama kelas dan penyelesaian id untuk file HTML Anda
Perhatikan bahwa ekstensi tidak mendukung sumber jarak jauh, dan tidak mengikuti Go to definition4 tag di file HTML Anda untuk membatasi hasil penyelesaian, itu hanya mencantumkan semua nama kelas & id yang ditentukan di file CSS & Scss & Less di folder ruang kerja Anda
Temukan Semua Referensi dan Intip Referensi
Mendukung pencarian referensi pemilih CSS di file HTML Anda
Fungsionalitas ini seharusnya tidak terlalu berguna, dan perlu memuat dan mem-parsing semua file yang dikonfigurasi di activeHTMLFileExtensions sebagai tambahan. tetapi jika Anda suka memeriksa dan memfaktorkan ulang kode CSS, setidaknya itu jauh lebih baik daripada mencarinya di folder