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

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 ..

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:
- Mempercantik css / sass / scss / kurang
  - Tapi, JS, TS sudah didukung oleh kode VS.
Untuk memformat file JS, CSS, HTML, JSON (membungkus js-beautify)
- JS-CSS-HTML Formatter
  - tapi, sudah JS, HTML, JSON didukung oleh kode VS.
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

0

Beautify ( Github ) & Prettier ( Github ) adalah plugin terbaik untuk pengembangan web dalam Visual Studio Code.

— wiretext
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