Rientro e formattazione CSS del codice di Visual Studio

102

Vorrei sapere se esiste un modo per attivare il rientro automatico di un file CSS nel codice di Visual Studio con la scorciatoia ALT+ SHIFT+ F?

Funziona bene con JavaScript ma stranamente non con CSS.

css visual-studio-code

— A. DC
fonte

hai provato questa estensione? marketplace.visualstudio.com/…

— ciclomotore

105

Sì, prova a installare l' estensione vscode-css-formatter .
Aggiunge solo la funzionalità per formattare i .cssfile e il collegamento rimane lo stesso Alt+ Shift+ F.

— NValchev
fonte

Questo sta facendo il lavoro perfettamente. Ho provato l'altro suggerito dal ciclomotore ma ogni volta che ho salvato un file ho dovuto salvare due volte ..

— A. DC

1

Come utilizzare questa estensione su Windows? alt + maiusc + f non funziona e non è presente l'opzione "Formato codice" quando si fa clic con il pulsante destro del mouse.

— kyw

1

Hai riavviato vs-code dopo l'installazione dell'estensione? Inoltre, in quali file stai tentando di eseguire questo comando?

— NValchev

13

Non ha funzionato per me. Alt+Shift+Fdando ancora: Mi dispiace, ma non è installato alcun formattatore per i file "css". dopo la ricarica. Abbellisci css / sass / scss / less ha funzionato.

— Leone

Funziona alla grande su Mac, (Cmd + K, Cmd + F) e non ha influito sulla formattazione di altri tipi di file utilizzando la stessa scorciatoia da tastiera. Grazie

— mojave

44

Abbellisci css / sass / scss / less

per eseguire questo

accedere alt+shift+f

o

premere F1o ctrl+shift+p e quindi immettere abbellire ..

un altro - JS-CSS-HTML Formatter

Penso che entrambe queste estensioni utilizzino internamente js-beautify

— bhv
fonte

alt + maiusc + f non ha fatto nulla, ma la digitazione abbellire ... ha funzionato.

— rtaft

Un altro modo per utilizzare JS-CSS-HTML Formatter è -> apri il menu

— contestuale

23

Ho sprecato un'ora per trovare l'opzione migliore.

Basta metterlo insieme, per una facile lettura e sceglierne uno.

Appunti:

CSS e SASS / SCSS / LESS sono tutti correlati
HTML, Javascript, Typescript, JSON - Il codice VS è già formattato
CSS e correlati: il codice VS non si sta formattando al giorno d'oggi

Opzioni:

Per formattare css / sass / scss / less:
- Più carina
  - Sono supportati tutti i css correlati, e non altri, scelgo questo, funziona alla grande.
Per formattare JavaScript / TypeScript / CSS:
- Abbellisci css / sass / scss / less
  - ma, già JS, TS sono supportati dal codice VS
Per formattare JS, CSS, HTML, file JSON (avvolge js-beautify)
- Formattatore JS-CSS-HTML
  - ma, già JS, HTML, JSON sono supportati dal codice VS
Per formattare CSS
- Formattatore CSS
  - ma solo CSS supportato, non tutti i relativi - non mantenuti 6+ mesi

Per formattare:

Premere Alt+ Shift+ Fin VS Code, dopo aver installato Prettier.

— Manohar Reddy Poreddy
fonte

Elenca più carina scss, ma non sass. Beautify afferma di supportare Sass, ma dalla mia esperienza distrugge tutto su una singola riga. (parlando esplicitamente Sass, non Scss)

— Frank Nocke

5

Dopo aver aperto bootstrap.min.css locale nel codice di Visual Studio, sembrava non rientrato. Ho provato il comando ALT + Maiusc + F ma invano.

Quindi installato

Estensione CSS Formatter .

L'ho ricaricato e ALT + Maiusc + F ha rientrato il mio file CSS con fascino.

Bingo !!!

— Shahbaaz Khan
fonte

4

Ce ne sono diversi tra cui scegliere nella gallery ma quello che sto utilizzando, che offre un notevole livello di configurabilità pur rimanendo discreto rispetto al resto delle impostazioni è Beautify di Michele Melluso . Funziona sia su CSS che su SCSS e ti consente di indentare 3 spazi mantenendo il resto del codice su 2 spazi, il che è carino.

Puoi prenderlo da GitHub e adattarlo da solo, se ne hai voglia anche tu.

— Konrad Viltersten
fonte

4

Consiglio di utilizzare Prettier in quanto è molto estensibile ma funziona ancora perfettamente fuori dagli schemi:

1. CMD + Shift + P -> Format Document

o

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

— feihcsim
fonte

3

Vai al menu File -> Preferenze -> Estensioni Quindi digita CSS Formatter, attendi che venga caricato e fai clic su Installa

— Ahmed Adewale
fonte

1

Installa l'estensione HookyQR.beautify. Abbellirà il tuo javascript, JSON, CSS, Sass e HTML in Visual Studio Code. Sono le estensioni più utilizzate per questo scopo

— William Dekou
fonte

0

Beautify ( Github ) e Prettier ( Github ) sono i migliori plugin per lo sviluppo web in Visual Studio Code.

— wiretext
fonte

-8

Per formattare il codice in Visual Studio quando lo desideri, premi: (Ctrl + K) e (Ctrl + F)

Le regole di formattazione automatica possono essere trovate e modificate in: Strumenti / Opzioni -> (Barra laterale sinistra): Editor di testo / CSS (o qualsiasi altra lingua che si desidera modificare)

Per il linguaggio CSS le opzioni sono purtroppo molto limitate. Puoi anche apportare alcune modifiche in: ... / Editor di testo / Tutte le lingue

— Sion
fonte

6

La domanda è per Visual Studio Code (VSCode) non Visual Studio

— Pierre