Bootstrap intellisense visual studio 2022

Tailwind CSS menggunakan banyak aturan khusus CSS seperti @tailwind, @apply, dan @screen, dan di banyak editor hal ini dapat memicu peringatan atau error saat aturan ini tidak dikenali

Solusi untuk ini hampir selalu memasang plugin untuk editor/IDE Anda untuk dukungan bahasa PostCSS daripada CSS biasa

Jika Anda menggunakan Kode VS, plugin Tailwind CSS IntelliSense resmi kami menyertakan mode bahasa Tailwind CSS khusus yang mendukung semua aturan dan fungsi khusus yang digunakan Tailwind

Dalam beberapa kasus, Anda mungkin perlu menonaktifkan linting/validasi CSS asli jika editor Anda sangat ketat tentang sintaks yang diharapkan dalam file CSS Anda

IntelliSense untuk Kode VS

Ekstensi Tailwind CSS IntelliSense resmi untuk Visual Studio Code menyempurnakan pengalaman pengembangan Tailwind dengan menyediakan fitur lanjutan seperti pelengkapan otomatis, penyorotan sintaksis, dan linting kepada pengguna

• Pelengkapan otomatis. Saran cerdas untuk nama kelas, serta fungsi dan arahan CSS
• Linting. Menyoroti kesalahan dan potensi bug di CSS dan markup Anda
• Arahkan Pratinjau. Lihat CSS lengkap untuk nama kelas Tailwind dengan mengarahkan kursor ke atasnya
• Penyorotan Sintaks. Memberikan definisi sintaks sehingga fitur Tailwind disorot dengan benar

Lihat proyek di GitHub untuk mempelajari lebih lanjut, atau tambahkan ke Visual Studio Code untuk memulai sekarang

Penyortiran kelas otomatis dengan Prettier

Kami mengelola plugin Prettier resmi untuk Tailwind CSS yang secara otomatis mengurutkan kelas Anda mengikuti

Ia bekerja mulus dengan konfigurasi Tailwind kustom, dan karena ini hanya plugin Prettier, ia bekerja di mana pun Prettier bekerja — termasuk setiap editor dan IDE populer, dan tentu saja di baris perintah

Lihat plugin di GitHub, pelajari lebih lanjut dan mulai

IDE JetBrains

IDE JetBrains seperti WebStorm, PhpStorm, dan lainnya menyertakan dukungan untuk penyelesaian Tailwind CSS yang cerdas di HTML Anda dan saat menggunakan @apply

Jika Anda memilih untuk menggunakan perpustakaan eksternal seperti MudBlazor untuk proyek Blazor Anda, dan menggunakan Visual Studio 2022, Anda mungkin menemukan bahwa Anda kehilangan segala jenis intellisense untuk gaya yang dibundel (yang disertakan dengan perpustakaan)

Mengambil MudBlazor secara khusus, itu termasuk beberapa kelas utilitas berguna untuk mengatur hal-hal seperti margin dan padding

Masalahnya adalah, jika Anda menjalankan proyek MudBlazor baru kemudian mulai mencoba menggunakan kelas-kelas ini di komponen Blazor Anda, Anda akan menebak apa yang tersedia karena tidak ada intellisense untuk mereka.

Ambil kode ini misalnya…

<div class="d-flex">
    <div class="blue white-text pa-4">a</div>
    <div class="flex-grow-1 red white-text pa-4">b</div>
</div>

Di sini kami menggunakan kelas seperti pa-4 untuk menyetel padding di semua sisi ke 4 (yaitu , jika Anda tertarik)

Cobalah untuk mengerjakan kode ini di VS2022 (pada saat penulisan) dan Anda harus melakukannya tanpa Intellisense

Masalah

Setelah menjelajahi masalah ini selama beberapa jam, ternyata itu adalah batasan yang diketahui dari editor Razor baru (yang dikirimkan dengan VS 2022)

Saat Anda menggunakan MudBlazor (atau pustaka lain), Anda biasanya menambahkannya melalui paket Nuget

Anda kemudian dapat mereferensikan aset statis mereka (file CSS, JavaScript dll) melalui URL yang dimulai dengan _content/

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Di balik layar, saat Anda membuat aplikasi (selama pengembangan). NET mencari kumpulan web statis. runtime. json di direktori output build proyek Anda

Sebagai contoh…

\bin\Debug\net6.0\<project>.staticwebassets.runtime.json

File JSON ini kemudian mengarahkan. NET ke lokasi aset statis apa pun yang direferensikan oleh proyek

Dalam kasus proyek yang mereferensikan MudBlazor, file pemetaan kemungkinan akan menyertakan entri yang menunjuk ke Nuget Cache, seperti ini dari proyek saya

"D. \. nuget\mudblazor\6. 0. 2\basset statis\”

Saat proyek ini berjalan (selama pengembangan). NET akan mengalihkan semua permintaan untuk file MudBlazor CSS dan JavaScript ke cache Nuget (sesuai lokasi yang ditentukan dalam file pemetaan)

Inilah masalah Intellisense di VS… Editor pisau cukur baru belum memiliki dukungan untuk mengisi Intellisense berdasarkan aset statis yang ditautkan dari paket Nuget dengan cara ini

Seperti yang dikonfirmasi oleh MS di sini

Solusinya

Jadi ini menjengkelkan. Jika Anda membuat lembar gaya Anda sendiri dan meletakkannya di folder wwwroot proyek Anda, Anda akan mendapatkan intellisense, tetapi tidak jika Anda menggunakan paket melalui NuGet (seperti MudBlazor)

Cukup aman untuk menganggap Microsoft akan merilis pembaruan yang memperbaikinya di beberapa titik, tetapi sementara itu ada solusinya

Jika Anda dapat mengambil file dari cache NuGet dan menyalinnya ke folder wwwroot Anda, Anda mungkin dapat memiliki kue MudBlazor dan memakannya juga. 🙂

Tentu saja, Anda bisa melakukannya secara manual;

Tapi kemudian Anda harus melakukan ini setiap kali memperbarui MudBlazor, atau mengkloning proyek Anda ke mesin baru

Opsi yang lebih baik adalah mengintegrasikannya ke dalam proses pembangunan

Ternyata itu mungkin dengan sedikit bantuan dari MSBuild

Inilah tugas MSBuild yang dapat Anda tambahkan ke proyek Anda. csproj yang mengotomatiskan penyalinan file statis ke wwwroot

<Target Name="CollectMudBlazorStaticAssets" DependsOnTargets="ResolveStaticWebAssetsInputs" AfterTargets="Build" Condition=" '$(Configuration)' == 'Debug' ">
	<Copy SourceFiles="%(StaticWebAsset.Identity)" DestinationFolder="wwwroot/temp" Condition="$([System.String]::Copy(%(StaticWebAsset.Identity)).Contains('mudblazor'))" />
</Target>

Kelihatannya agak aneh (maksud saya, ini adalah MSBuild, dan jika Anda tidak menghabiskan banyak waktu di sini, sepertinya selalu sedikit asing) tetapi ini berjalan selama pengembangan (bukan untuk pembuatan produksi) dan mengambil keluaran dari

ResolveStaticWebAssetsInputs menempatkan semua file statis untuk proyek, dan merupakan Tugas Microsoft bawaan yang berjalan sebagai bagian dari proses pembuatan biasa

Panggilan ke <Copy SourceFiles= … /> beralih ke file statis ini, mencari apa pun yang berisi kata mudblazor, dan menyalinnya ke folder wwwroot/temp proyek

Dengan ini, ketika Anda membangun kembali proyek Anda, Anda akan menemukan aset statis MudBlazor di

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Peretasan?

Saya cukup yakin kode ini termasuk dalam wilayah "retas", dan hampir pasti akan memperlambat pengembangan Anda jika Anda memiliki banyak aset statis…

Tapi itu membuat intellisense berfungsi sampai Microsoft merilis sesuatu yang lebih resmi, jadi mungkin layak ditambahkan ke file csproj proyek Anda 🙂

Kode sumber, tutorial langkah demi langkah, video, dan lainnya

Saya telah mengumpulkan banyak sekali tutorial yang berguna, kode sumber untuk artikel (seperti ini) dan seri video mini untuk membantu Anda melewati semua kebisingan dan membangun ASP yang lebih baik. Aplikasi web NET, lebih cepat

Letakkan email Anda di kotak di bawah untuk mendapatkan posting baru terlebih dahulu, dan akses instan ke 'vault'

Kirimkan aku kunci lemari besi

saya menghargai privasi surat elektronik Anda. Berhenti berlangganan dengan satu klik

Satu langkah terakhir

Periksa kotak masuk Anda dan klik tautan di email untuk menyelesaikan prosesnya

Terima kasih telah menjadi pelanggan

Tahukah kamu?

Bagaimana cara mengaktifkan IntelliSense di Visual Studio 2022?

Bagaimana cara menggunakan Bootstrap di Visual Studio 2022?

Bagaimana cara memperbarui versi Bootstrap di Visual Studio 2022?

Apakah Visual Studio mendukung Bootstrap?