Indentasi dan pemformatan CSS kode studio visual

102

Saya ingin tahu apakah ada cara untuk mengaktifkan indentasi otomatis file CSS dalam kode studio visual dengan pintasan ALT+ SHIFT+ F?

Ini bekerja dengan baik dengan JavaScript tetapi anehnya tidak dengan CSS.

css visual-studio-code A. DC
sumber
sudahkah kamu mencoba ekstensi ini? marketplace.visualstudio.com/…
moped

Jawaban:

105

Ya, coba pasang ekstensi vscode-css-formatter .
Itu hanya menambahkan fungsionalitas untuk memformat .cssfile dan pintasannya tetap Alt+ Shift+ F.

NValchev
sumber
Yang ini melakukan pekerjaan dengan sempurna. Saya mencoba yang lain yang disarankan oleh moped tetapi setiap kali saya menyimpan file, saya harus menyimpan dua kali ..
A. DC
1
Bagaimana cara menggunakan ekstensi ini di windows? alt + shift + f tidak berfungsi dan dan tidak ada opsi 'Kode Format' saat klik kanan.
kyw
1
Sudahkah Anda memulai ulang vs-code setelah penginstalan ekstensi? Juga, di file apa Anda mencoba menjalankan perintah ini?
NValchev
13
Tidak berhasil untuk saya. Alt+Shift+Fmasih memberi: Maaf, tetapi tidak ada pemformat untuk file 'css'yang diinstal. afte reload. Mempercantik css / sass / scss / kurang bekerja.
Leo
Berfungsi dengan baik di Mac, (Cmd + K, Cmd + F), dan tidak memengaruhi pemformatan jenis file lain menggunakan pintasan keyboard yang sama. Terima kasih
mojave
44

Mempercantik css / sass / scss / kurang

untuk menjalankan ini

memasukkan alt+shift+f

atau

tekan F1atau ctrl+shift+p lalu masukkan beautify ..

masukkan deskripsi gambar di sini

satu lagi - JS-CSS-HTML Formatter

Saya pikir kedua ekstensi ini menggunakan js-beautify secara internal

bhv
sumber
alt + shift + f tidak melakukan apa-apa, tetapi mengetik beautify ... berhasil.
rtaft
Cara lain untuk menggunakan JS-CSS-HTML Formatter adalah -> buka Menu Konteks dan pilih Format Code
Chanaka Fernando
23

Membuang satu jam untuk menemukan opsi terbaik.

Gabungkan saja, agar mudah dibaca dan dipilih.

Catatan:

  • CSS dan SASS / SCSS / LESS semuanya terkait
  • HTML, Javascript, Ketikan, JSON - Kode VS sudah diformat
  • CSS dan yang terkait - Kode VS tidak diformat pada hari ini

Pilihan:

  • Untuk memformat css / sass / scss / kurang:
    • Lebih cantik
      • Semua terkait css didukung, dan bukan yang lain, saya memilih ini, ini berfungsi dengan baik.
  • Untuk memformat JavaScript / TypeScript / CSS:
  • Untuk memformat file JS, CSS, HTML, JSON (membungkus js-beautify)
  • Untuk memformat CSS
    • Pemformat CSS
      • tapi, hanya CSS yang didukung, tidak semua yang terkait - tidak dipertahankan 6+ bulan

Untuk memformat:

Tekan Alt+ Shift+ Fdi VS Code, setelah menginstal Prettier.

Manohar Reddy Poreddy
sumber
Daftar scss yang lebih cantik, tetapi tidak sass. Mempercantik klaim untuk mendukung Sass tetapi dari pengalaman saya menghancurkan segalanya menjadi satu baris. (secara eksplisit berbicara Sass, bukan Scss)
Frank Nocke
5

Setelah membuka bootstrap.min.css lokal dalam kode studio visual, itu tampak tidak menjorok. Mencoba perintah ALT + Shift + F tetapi sia-sia.

Kemudian dipasang

Ekstensi CSS Formatter .

Reload itu dan ALT + Shift + F menjorokkan file CSS saya dengan pesona.

Bingo !!!

Shahbaaz Khan
sumber
4

Ada beberapa yang dapat dipilih di galeri tetapi yang saya gunakan, yang menawarkan tingkat konfigurasi yang cukup besar masih tetap tidak mengganggu pengaturan lainnya adalah Beautify by Michele Melluso . Ini berfungsi pada CSS dan SCSS dan memungkinkan Anda membuat indentasi 3 spasi dengan menjaga sisa kode pada 2 spasi, yang bagus.

Anda dapat mengambilnya dari GitHub dan menyesuaikannya sendiri, jika Anda menginginkannya juga.

Konrad Viltersten
sumber
4

Saya merekomendasikan menggunakan Prettier karena sangat dapat diperluas tetapi masih berfungsi dengan sempurna di luar kotak:

1. CMD + Shift + P -> Format Document

atau

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
feihcsim
sumber
3

Masuk ke menu Files -> Preference -> Extentions Kemudian ketik CSS Formatter tunggu sampai loading dan klik install

Ahmed Adewale
sumber
1

Instal ekstensi HookyQR.beautify. Ini akan mempercantik javascript, JSON, CSS, Sass, dan HTML Anda dalam Visual Studio Code. Ini adalah ekstensi yang paling banyak digunakan untuk tujuan ini

William Dekou
sumber
-8

Untuk memformat kode di Visual Studio saat Anda inginkan, tekan: (Ctrl + K) & (Ctrl + F)

Aturan pemformatan otomatis dapat ditemukan dan diubah di: Alat / Opsi -> (Bilah sisi kiri): Editor Teks / CSS (atau bahasa lain apa pun yang ingin Anda ubah)

Sayangnya untuk bahasa CSS opsinya sangat terbatas. Anda juga dapat membuat beberapa perubahan di: ... / Editor Teks / Semua Bahasa

Sion
sumber
6
Pertanyaan untuk Visual Studio Code (VSCode) bukan Visual Studio
Pierre