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

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.

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.

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.

ein anderer - JS-CSS-HTML-Formatierer

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

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:
  • Verschönern Sie css / sass / scss / less
    • Aber bereits JS, TS werden von VS-Code unterstützt
• Zum Formatieren von JS-, CSS-, HTML- und JSON-Dateien (Wraps js-beautify)
  • JS-CSS-HTML-Formatierer
    • JS, HTML und JSON werden jedoch bereits von VS-Code unterstützt
• 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.

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

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.

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

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

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

Beautify ( Github ) & Prettier ( Github ) sind das beste Plugin für die Webentwicklung in Visual Studio Code.

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