CSS-Einrückung und Formatierung für Visual Studio-Code

100

Ich würde gerne wissen , ob es eine Möglichkeit zu aktivieren Auto ist eine CSS - Datei in Visual Studio - Code mit dem Kontext einrücken ALT+ SHIFT+ F?

Es funktioniert gut mit JavaScript, aber seltsamerweise nicht mit CSS.

css visual-studio-code A. DC
quelle
Haben Sie diese Erweiterung ausprobiert? marketplace.visualstudio.com/…
Moped

Antworten:

104

Ja, versuchen Sie, die Erweiterung vscode-css-formatter zu installieren .
Es fügt lediglich die Funktionalität zum Formatieren von .cssDateien hinzu und die Verknüpfung bleibt gleich Alt+ Shift+ F.

NValchev
quelle
Dieser macht den Job perfekt. Ich habe den anderen von Moped vorgeschlagenen ausprobiert, aber jedes Mal, wenn ich eine Datei gespeichert habe, musste ich zweimal speichern.
A. DC
1
Wie verwende ich diese Erweiterung unter Windows? Alt + Umschalt + F funktioniert nicht und es gibt keine Option 'Code formatieren', wenn Sie mit der rechten Maustaste klicken.
Kyw
1
Haben Sie vs-code nach der Installation der Erweiterung neu gestartet? In welchen Dateien versuchen Sie, diesen Befehl auszuführen?
NValchev
13
Hat bei mir nicht funktioniert. Alt+Shift+Fgibt immer noch: Sorry, aber es ist kein Formatierer für 'CSS'-Dateien installiert. Nach dem Nachladen. Verschönern Sie CSS / Sass / SCSS / weniger funktioniert.
Leo
Funktioniert hervorragend auf Mac (Cmd + K, Cmd + F) und hat die Formatierung anderer Dateitypen mit derselben Tastenkombination nicht beeinflusst. Danke
Mojave
44

Verschönern Sie css / sass / scss / less

um dies auszuführen

eingeben alt+shift+f

oder

Drücken Sie F1oder ctrl+shift+p und geben Sie dann verschönern ein.

Geben Sie hier die Bildbeschreibung ein

ein anderer - JS-CSS-HTML-Formatierer

Ich denke , beide diese Erweiterung verwendet js-verschönern intern

bhv
quelle
alt + shift + f hat nichts getan, aber tippen verschönern ... funktioniert.
Rtaft
Eine andere Möglichkeit, JS-CSS-HTML-Formatierer zu verwenden, besteht darin, -> das Kontextmenü zu öffnen und Formatcode zu wählen
Chanaka Fernando
23

Verschwendete eine Stunde damit, die beste Option zu finden.

Einfach zusammenstellen, um sie leicht zu lesen und auszuwählen.

Anmerkungen:

  • CSS und SASS / SCSS / LESS sind alle miteinander verbunden
  • HTML-, Javascript-, Typescript-, JSON-VS-Code wird bereits formatiert
  • CSS und verwandter - VS-Code wird derzeit nicht formatiert

Optionen:

  • So formatieren Sie css / sass / scss / less:
    • Schöner
      • Alle CSS-bezogenen unterstützt, und nicht andere, ich wähle dies, es funktioniert großartig.
  • So formatieren Sie JavaScript / TypeScript / CSS:
  • Zum Formatieren von JS-, CSS-, HTML- und JSON-Dateien (Wraps js-beautify)
  • CSS formatieren
    • CSS-Formatierer
      • aber nur CSS unterstützt, nicht alle verwandten - nicht mehr als 6 Monate gewartet

Formatieren:

Drücken Sie Alt+ Shift+ Fin VS - Code, nach Prettier installieren.

Manohar Reddy Poreddy
quelle
Schönere Listen scss, aber nicht sass. Beautify behauptet, Sass zu unterstützen, aber meiner Erfahrung nach zerschmettert alles in einer einzigen Zeile. (spricht ausdrücklich Sass, nicht Scss)
Frank Nocke
5

Nach dem Öffnen der lokalen Datei bootstrap.min.css in Visual Studio-Code sah sie nicht eingerückt aus. Versuchte das Kommando ALT + Umschalt + F aber vergebens.

Dann installiert

CSS Formatter- Erweiterung.

Hat es neu geladen und ALT + Umschalt + F hat meine CSS-Datei mit Charme eingerückt.

Bingo !!!

Shahbaaz Khan
quelle
4

In der Galerie stehen mehrere zur Auswahl, aber die von mir verwendete, die ein beträchtliches Maß an Konfigurierbarkeit bietet und für die übrigen Einstellungen immer noch unauffällig bleibt, ist Beautify von Michele Melluso . Es funktioniert sowohl mit CSS als auch mit SCSS und lässt Sie 3 Leerzeichen einrücken, wobei der Rest des Codes auf 2 Leerzeichen bleibt, was sehr schön ist.

Sie können es von GitHub schnappen und selbst anpassen, falls Sie Lust dazu haben.

Konrad Viltersten
quelle
4

Ich empfehle die Verwendung von Prettier, da es sehr erweiterbar ist, aber sofort einsatzbereit funktioniert:

1. CMD + Shift + P -> Format Document

oder

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

Gehen Sie zum Menü Dateien -> Einstellungen -> Erweiterungen. Geben Sie dann CSS Formatter ein, warten Sie, bis es geladen ist, und klicken Sie auf Installieren

Ahmed Adewale
quelle
1

Installieren Sie die HookyQR.beautify-Erweiterung. Es verschönert Ihr Javascript, JSON, CSS, Sass und HTML in Visual Studio Code. Es sind die am häufigsten verwendeten Erweiterungen für diesen Zweck

William Dekou
quelle
-8

Um den Code in Visual Studio zu formatieren, drücken Sie: (Strg + K) & (Strg + F)

Die Regeln für die automatische Formatierung finden Sie unter: Extras / Optionen -> (linke Seitenleiste): Texteditor / CSS (oder eine andere Sprache, die Sie ändern möchten)

Für die CSS-Sprache sind die Möglichkeiten leider sehr begrenzt. Sie können auch einige Änderungen vornehmen in: ... / Texteditor / Alle Sprachen

Sion
quelle
6
Frage ist für Visual Studio Code (VSCode) nicht Visual Studio
Pierre