Wie ändere ich den Einzug in Visual Studio Code?

341

Für jede Typoskriptdatei verwendet Visual Studio Code eine automatische Einrückung von 8 Leerzeichen. Das ist etwas zu viel für meinen Geschmack, aber ich kann nicht finden, wo ich es ändern kann.

Vielleicht ist es als Einstellung verfügbar, aber unter einem anderen Namen, da ich nichts im Zusammenhang mit Einrückungen finden kann.

AKTUALISIEREN

Ich verwende derzeit den Prettier-Code-Formatierer , der alle Formatierungsprobleme durch automatische Formatierung beim Speichern löst (wenn kein Syntaxfehler vorliegt).

HMR
quelle

Antworten:

109

Sie können dies auf globaler UserEbene oder WorkspaceEbene ändern .

Öffnen Sie die Einstellungen: Mit der Verknüpfung ctrl + ,oder klicken File> Preferences> Settingswie unten dargestellt.

Einstellungen im VS Code-Menü

Nehmen Sie dann die folgenden 2 Änderungen vor: (Geben Sie tabSizein die Suchleiste ein)

  1. Deaktivieren Sie das Kontrollkästchen von Detect Indentation
  2. Ändern Sie die Tabulatorgröße auf 2/4 (obwohl ich fest davon überzeugt bin, dass 2 für JS korrekt ist :))

Geben Sie hier die Bildbeschreibung ein

Xin
quelle
1
Bitte verwenden Sie 4 Leerzeichen zum Einrücken.
Bohdan Kuts
3
@BohdanKuts ha ha, das wird ein endloses Argument sein
Xin
Ja :) Ich habe danach gesucht und herausgefunden, warum es 2 Leerzeichen wurden. Und für mich scheint der Grund veraltet zu sein, daher werde ich empfehlen, auf jeden Fall 4 Leerzeichen zu verwenden.
Bohdan Kuts
Dies ist subjektiv und hat keinen wirklichen Vorteil. Ich behalte 2 Leerzeichen für einige Dateitypen wie js, html und css und 3 Leerzeichen für Code, nur zur besseren Lesbarkeit. In HTML und XML mit 4 Leerzeichen müssen Sie sehr bald nach rechts scrollen.
Pablo Pazos
574

In der Symbolleiste in der unteren rechten Ecke sehen Sie ein Element, das wie folgt aussieht: Geben Sie hier die Bildbeschreibung ein Nachdem Sie darauf geklickt haben, können Sie entweder Leerzeichen oder Tabulatoren einrücken. Nachdem Sie Ihren Einzugstyp ausgewählt haben, können Sie ändern, wie groß ein Einzug ist. Im obigen Beispiel wird der Einzug auf 4 Leerzeichen pro Einzug gesetzt. Wenn die Registerkarte als Einrückungszeichen ausgewählt ist, wird anstelle der Leerzeichen die Tabulatorgröße angezeigt

Wenn dies für alle Dateien und nicht für einzelne Dateien gelten soll, überschreiben Sie die Einstellungen Editor: Tab Sizeund Editor: Insert Spacesin den Benutzereinstellungen oder Arbeitsbereichseinstellungen je nach Ihren Anforderungen

Bearbeiten 1

Um zu Ihren Benutzer- oder Arbeitsbereichseinstellungen zu gelangen, gehen Sie zu Einstellungen -> Einstellungen . Stellen Sie sicher, dass Sie sich je nach Bedarf auf der Registerkarte Benutzer oder Arbeitsbereich befinden, und verwenden Sie die Suchleiste, um die Einstellungen zu suchen. Möglicherweise möchten Sie auch deaktivieren, Editor: Detect Indentationda diese Einstellung überschreibt, was Sie festgelegt haben Editor: Insert Spacesund Editor: Tab Sizewann sie aktiviert ist

Elliot-j
quelle
Der Bildlink ist defekt.
34
Ändern editor.tabSpacessich nicht in allen Dateien , den Abstand verändern. Es wird nur für zukünftig erstellte Dateien geändert. Es gibt immer noch keine Lösung, um alle Dateien in einer Aktion zu reparieren.
Jacob Stamm
3
Beeindruckend. verblüfft. manchmal verstecken sich die Dinge nur in Sichtweite
Pingo
4
Das ist super unintuitiv. Ich habe bereits Einrückungen festgelegt, um Leerzeichen zu verwenden. Warum muss ich auf die Leerzeichenoption klicken, um zu einem zweiten, ausgeblendeten Menü zu gelangen und die Anzahl der Leerzeichen festzulegen? Jeder andere Editor, den ich verwendet habe, ist ein Klick auf die Einrückungsdetails in der Statusleiste und es gibt eine Option für mehrere Leerzeichen. In VS Code muss ich dies bei Stack Overflow nachschlagen, da das gewünschte Menü hinter einer Option verborgen ist, die ich nicht ändern möchte.
ian.pvd
1
Jedes Mal, wenn ich eine neue Datei erstelle, scheint es immer wieder auf die Standardeinstellung von 4 Speicherplätzen zurückzusetzen?!?!
Oldboy
141

So ändern Sie den Einzug basierend auf der Programmiersprache :

  1. Öffnen Sie die Befehlspalette ( CtrlShiftP| macOS: P)
  2. Einstellungen: Konfigurieren von sprachspezifischen Einstellungen ... (Befehl - ID: workbench.action.configureLanguageBasedSettings)
  3. Programmiersprache auswählen (zum Beispiel TypeScript)
  4. Fügen Sie diesen Code hinzu:

    "[typescript]": {
        "editor.tabSize": 2
    }
    

Siehe auch: VS Code Docs

Martin Schneider
quelle
Wie (wo) verwendet man die Befehls-ID? Ich sehe "Sprachspezifische Einstellungen konfigurieren" nicht unter "Dateieinstellungen".
Alan Baljeu
@AlanBaljeu Sie können die Befehls-ID für Tastaturkürzel, Erweiterungen usw. verwenden. Gehen Sie also zu Datei > Einstellungen > Tastaturkürzel , fügen Sie die ID in die Eingabe ein und weisen Sie dem Befehl beispielsweise Strg + K Strg + L zu.
Martin Schneider
55

Möglicherweise möchten Sie editor.detectIndentationzusätzlich zu Elliot-Js Antwort auch den Wert auf false setzen .

VSCode überschreibt Ihre editor.tabSizeund editor.insertSpacesEinstellungen pro Datei, wenn festgestellt wird, dass eine Datei ein anderes Einrückungsmuster für Registerkarten oder Leerzeichen aufweist. Dieses Problem kann auftreten, wenn Sie Ihrem Projekt vorhandene Dateien hinzufügen oder Dateien mithilfe von Codegeneratoren wie Angular Cli hinzufügen. Die obige Einstellung verhindert, dass VSCode dies tut.

RMuesi
quelle
44

Verknüpfung zur Code-Formatierung:

VSCode unter Windows - Umschalt + Alt + F.

VSCode unter MacOS - Umschalt + Option + F.

VSCode unter Ubuntu - Strg + Umschalt + I.

Sie können diese Verknüpfung bei Bedarf auch mithilfe der Voreinstellungen anpassen.

Spaltenauswahl mit Tastatur Ctrl + Shift + Alt + Arrow

Sujatha Girijala
quelle
1
Shift + Alt + FAlle Einrückungen in meiner Datei wurden von 8 Leerzeichen auf meine Standard-4 Leerzeichen geändert. Genau das, wonach ich gesucht habe :)
Harry12345
24

In meinem Fall " EditorConfig für VS Code überschreibt die Erweiterung " die VSCode-Einstellungen. Wenn Sie es installiert haben, überprüfen Sie die Datei .editorconfig im Stammordner des Projekts.

Hier ist eine Beispielkonfiguration. Die "indent_size" legt die Anzahl der Leerzeichen für eine Registerkarte fest.

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
Aviw
quelle
7

Vereinfachte Erklärung mit Bildern für diejenigen, die gegoogelt haben "Einrückung in VS-Code ändern"

Schritt 1: Klicken Sie auf Einstellungen> Einstellungen

Geben Sie hier die Bildbeschreibung ein

Schritt 2: Die gesuchte Einstellung ist "Einkerbung erkennen". Geben Sie diese ein. Klicken Sie auf "Editor: Tab Size"

Geben Sie hier die Bildbeschreibung ein

Schritt 3: Scrollen Sie nach unten zu "Editor: Tab Size" und geben Sie 2 ein (oder was auch immer Sie benötigen).

Geben Sie hier die Bildbeschreibung ein



Änderungen werden automatisch gespeichert

Geben Sie hier die Bildbeschreibung ein

Beispiel meiner Änderungen

Geben Sie hier die Bildbeschreibung ein

JGallardo
quelle
6

Um alle vorhandenen und neuen Dateien auf die Speicherplatzidentifikation 2 zu setzen, fügen Sie sie einfach in Ihre settingsns.json (im Stammverzeichnis von json) ein:

"[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 }

Sie können den Sprachtyp der Konfiguration hinzufügen:

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
} 
Reculos Gerbi Neto
quelle
Heutzutage verwende ich prettier.js und das js-Plugin, da es sich um Abstände und andere Neuausrichtungen langer Zeilen sowie um fast alles andere kümmert.
HMR
1
Danke, tolle Antwort, der beste Weg für mich.
Swetabja Hazra
5

So verwandeln Sie 4 Leerzeicheneinrückungen in allen Dateien in VS Code in 2 Leerzeichen

  • Öffnen Sie die Dateisuche
  • Aktivieren Sie reguläre Ausdrücke
  • Geben Sie Folgendes ein: ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)]))in das Suchfeld
  • Geben Sie Folgendes ein: $1in das Feld Ersetzen

So drehen Sie 2 Leerzeicheneinrückungen in allen Dateien in VS Code in 4 Leerzeichen

  • Öffnen Sie die Dateisuche
  • Aktivieren Sie reguläre Ausdrücke
  • Geben Sie Folgendes ein: ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)]))in das Suchfeld
  • Geben Sie Folgendes ein: $1$1in das Feld Ersetzen

HINWEIS: Sie müssen zuerst PERL Regex aktivieren. Das ist wie:

  • Öffnen Sie die Einstellungen und wechseln Sie zur JSON-Datei
  • Fügen Sie der JSON-Datei Folgendes hinzu "search.usePCRE2": true

Hoffe jemand sieht das.

casual234
quelle
1
Speziell für VS-Code gibt es auch eine Erweiterung zum Konvertieren von 4 in 2 Leerzeichen.
Tanius
4

Problem: Die akzeptierte Antwort behebt den Einzug im aktuellen Dokument nicht.

Lösung: Führen Sie Format Documentdas Dokument aus, um es gemäß den aktuellen (neuen) Einstellungen erneut zu verarbeiten.

Problem: Die HTML-Dokumente in meinen Projekten sind vom Typ "Django HTML", nicht "HTML", und es ist kein Formatierer verfügbar.

Lösung: Wechseln Sie in die Syntax "HTML", formatieren Sie sie und wechseln Sie dann wieder zu "Django HTML".

Problem: Der HTML-Formatierer weiß nicht, wie er mit Django-Vorlagen-Tags umgehen soll, und macht einen Großteil meiner sorgfältig angewendeten Verschachtelung rückgängig.

Lösung: Installieren Sie die Erweiterung Indent 4-2 , die den Einzug streng ausführt, ohne Rücksicht auf die aktuelle Sprachsyntax (was ich in diesem Fall möchte).

Shacker
quelle
2

Ich wollte den Einzug meiner vorhandenen HTML-Datei von 4 Leerzeichen in 2 Leerzeichen ändern .

Ich habe in der Statusleiste auf die Schaltfläche 'Leerzeichen: 4' geklickt und sie im nächsten Dialogfeld in zwei geändert.

Ich benutze die Erweiterung 'vim'. Ich weiß nicht, wie ich ohne vim wieder einrücken soll

Um meine aktuelle Datei erneut einzurücken, habe ich Folgendes verwendet:

gg

=

G
Rounak
quelle
0

Hinzufügen: Ja, Sie können die Speicherplatzeinstellungen über die Benutzeroberfläche unten rechts konfigurieren. Wenn Sie jedoch Code haben, der nicht mit dem neuen Abstand formatiert ist, können Sie mit der rechten Maustaste auf eine beliebige Stelle in der Datei klicken und auf Dokument formatieren klicken . Ich habe eine Weile gebraucht, um das herauszufinden, bis ich über dieses Problem gestolpert bin .

Menü Dokument formatieren

Wompinalong
quelle