Wie kann ich den Umrechnungsfaktor von Tab zu Leerzeichen anpassen?

853

Wie passe ich den Umrechnungsfaktor von Tab zu Space an, wenn ich Visual Studio Code verwende?

Zum Beispiel scheint TABes im Moment in HTML zwei Leerzeichen pro Druck von zu erzeugen , aber in TypeScript erzeugt es 4.

J. Abrahamson
quelle

Antworten:

1360

Standardmäßig versucht Visual Studio Code, Ihre Einrückungsoptionen abhängig von der von Ihnen geöffneten Datei zu erraten.

Sie können das Erraten von Einrückungen über deaktivieren "editor.detectIndentation": false.

Sie können dies einfach über diese drei Einstellungen für Windows im Menü DateiEinstellungenBenutzereinstellungen und für Mac im Menü CodeEinstellungenEinstellungen oder anpassen ⌘,:

// The number of spaces a tab is equal to. This setting is overridden
// based on the file contents when `editor.detectIndentation` is true.
"editor.tabSize": 4,

// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you've explicitly set, above.
"editor.detectIndentation": false
Alex Dima
quelle
1
Hey Guss, wären Sie bereit, mich auf eine Datei zu verweisen, in der die Vermutung falsch ist? Bitte teilen Sie uns auch mit, wie Sie diese beiden Einstellungen konfiguriert haben (tabSize & insertSpaces) und was Sie erwarten würden. Vielen Dank! :)
Alex Dima
5
Ich habe beide Einstellungen auf "Auto" konfiguriert und das Verhalten ist nicht so, wie ich es erwartet habe (obwohl ich nicht so weit gehen würde, es "falsch" zu nennen). Ich weiß nicht, welche Datei geändert werden soll, um meine Konvention zu unterstützen, aber ich habe ein Uservoice-Ticket dafür geöffnet , wie in der Antwort auf Frage # 30057721
Guss
4
Gibt es auch eine Option, um die Standardeinstellung für neue, leere Dateien festzulegen? In diesem Szenario gibt es nicht viel zu erraten, und ich denke, VSCode verwendet standardmäßig Leerzeichen (die ich nicht bevorzuge) ...
Stijn de Witt
Fwiw, es gibt auch eine Option für Arbeitsplatzeinstellungen , mit der Sie pro Projekt ein anderes Verhalten festlegen können, das die Benutzereinstellungen überschreibt. 2 ¢
Ruffin
1
Danke Ruffin. Gibt es eine Möglichkeit, sich tabSizepro Sprache zu ändern ? zB beim Bearbeiten mehrerer Dateien mit verschiedenen Sprachen im selben Arbeitsbereich (z. B. Ruby, JavaScript, CSS usw.) - Ruby wäre 2Leerzeichen, CSS jedoch 4... normalerweise.
Jacob Barnard
693

Ich verwende Version 1.21, aber ich denke, dass dies auch für frühere Versionen gilt.

Schauen Sie sich die untere rechte Seite des Bildschirms an. Sie sollten etwas sehen, das sagt Spacesoder Tab-Size.

Meins zeigt Leerzeichen, →

Geben Sie hier die Bildbeschreibung ein

  1. Klicken Sie auf die Leerzeichen (oder Tabulatorgröße ).
  2. Wählen Sie Einrücken mit Leerzeichen oder Einrücken mit Registerkarten
  3. Wählen Sie die Anzahl der Leerzeichen oder Tabulatoren aus, die Sie mögen.

Dies funktioniert nur pro Dokument, nicht projektweit. Wenn Sie es projektweit anwenden möchten, müssen Sie auch "editor.detectIndentation": falseIhre Benutzereinstellungen ergänzen .

Tricky
quelle
Wie wird # 3 gemacht? Nach Auswahl von # 2 scheint es keine Möglichkeit zu geben, einfach "die Anzahl der Leerzeichen auszuwählen ... die Sie mögen". Vielen Dank.
Chris22
Die ganze Zeit dachte ich: "Das muss irgendwie möglich sein ..." Das erklärt wie.
11.
189

Wenn Sie den Entwickler mögen, können Sie mit Visual Studio Code die verschiedenen Dateitypen für das angeben tabSize. Hier ist das Beispiel von my settings.jsonmit standardmäßig vier Leerzeichen und JavaScript / JSON zwei Leerzeichen:

{
  // I want my default to be 4, but JavaScript/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

PS: Wenn Sie nicht wissen, wie diese Datei geöffnet werden soll (insbesondere in einer neuen Version von Visual Studio Code), können Sie:

  1. Zahnrad links unten →
  2. Einstellungen → oben rechts Öffnen Sie Einstellungen

 

Geben Sie hier die Bildbeschreibung ein

Xin
quelle
105

Standardmäßig erkennt Visual Studio Code automatisch den Einzug der aktuell geöffneten Datei. Wenn Sie diese Funktion deaktivieren und alle Einrückungen vornehmen möchten, z. B. zwei Leerzeichen, gehen Sie in Ihren Benutzereinstellungen oder Arbeitsbereichseinstellungen wie folgt vor.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}
Jim Doyle
quelle
57

Mit EditorConfig und der EditorConfig for VS- Codeerweiterung können wir die Größe der Registerkarten nach Dateityp steuern . Wir können dann + + für jeden Dateityp spezifisch machen .AltShiftF

Installation

ext install EditorConfig

Beispielkonfiguration

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig überschreibt alle Einstellungen, die.json für den Editor konfiguriert. Es besteht keine Notwendigkeit, Änderungen vorzunehmen editor.detectIndentation.

Shaun Luttin
quelle
Wovon extsprichst du (bitte bearbeite deine Antwort, nicht hier in den Kommentaren (falls zutreffend))? Irgendein Node.js Ding? Welche Plattform?
Peter Mortensen
12

Wenn Sie die schönere Erweiterung in Visual Studio Code verwenden, fügen Sie diese zur Datei settings.json hinzu:

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me
slowpoke123
quelle
8

In Visual Studio Code Version 1.31.1 oder höher (glaube ich): Wie bei sed Alex Dima können Sie dies einfach über diese Einstellungen für anpassen

  • Windows im Menü DateiEinstellungenBenutzereinstellungen oder verwenden Sie die Tastenkombinationen Ctrl+ Shift+P
  • Mac im Menü CodeEinstellungenEinstellungen oder ,

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Andrey Patseiko
quelle
7

Sie möchten sicherstellen, dass Ihre editorconfig nicht mit der Konfiguration Ihrer Benutzer- oder Arbeitsbereichseinstellungen in Konflikt steht, da ich nur ein wenig verärgert darüber war, dass die Einstellungen für die Einstellungsdateien nicht angewendet wurden, als meine Editor-Konfiguration diese Änderungen rückgängig machte.

Travis Brown
quelle
7

Das ist lonefy.vscode-js-css-html-formatterschuld. Deaktivieren Sie es und installieren Sie es HookyQR.beautify.

Beim Speichern werden Ihre Tabs jetzt nicht konvertiert.

user3550138
quelle
7

In Ihrer unteren rechten Ecke haben Sie Leerzeichen: Leerzeichen: 2

Dort können Sie die Einrückung nach Ihren Wünschen ändern: Einrückungsoptionen

Dacomis
quelle
4

Bei Verwendung von TypeScript beträgt die Standard-Registerkartenbreite immer zwei, unabhängig davon, was in der Symbolleiste angegeben ist. Sie müssen "prettier.tabWidth" in Ihren Benutzereinstellungen festlegen, um es zu ändern.

Ctrl+ P, Typ → Benutzereinstellungen, hinzufügen:

"prettier.tabWidth": 4
Steve Hanov
quelle
4

Wenn die akzeptierte Antwort auf diesen Beitrag nicht funktioniert, probieren Sie Folgendes aus:

Ich hatte EditorConfig für Visual Studio Code in meinem Editor installiert und es überschrieb immer wieder meine Benutzereinstellungen, die so eingestellt waren, dass Dateien mit Leerzeichen eingerückt wurden. Jedes Mal, wenn ich zwischen Editor-Registerkarten wechselte, wurde meine Datei automatisch mit Registerkarten eingerückt, selbst wenn ich Einrückungen in Leerzeichen konvertiert hatte !!!

Unmittelbar nach der Deinstallation dieser Erweiterung ändert sich der Einzug zwischen den Editor-Registerkarten nicht mehr und ich kann komfortabler arbeiten, anstatt Tabulatoren jedes Mal, wenn ich Dateien wechsle, manuell in Leerzeichen konvertieren zu müssen - das ist schmerzhaft.

Dhruvpatel
quelle
4

Es gibt bereits viele gute Antworten von unseren geliebten Community-Mitgliedern. Ich wollte eigentlich den C # -Code tabSize hinzufügen und habe diesen Thread gefunden. Ich habe viele Lösungen gefunden und offizielle VS Code-Dokumente sind fantastisch. Ich möchte nur meine C # -Einstellung teilen:

"[csharp]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

Kopieren Sie einfach den obigen Code und fügen Sie ihn in Ihre settings.jsonDatei ein und speichern Sie ihn. Vielen Dank

Md. Jamal Uddin
quelle
1
Ja, dies ist der richtige Weg, wenn Sie ein anderes Format für eine bestimmte Sprache festlegen möchten. Ich mag es, Tabs mit tabWidth = 2 zu verwenden, aber autopep8 hasst das einfach.
Abhishek Kasireddy
2

Menü DateiEinstellungenEinstellungen

Zu den Benutzereinstellungen hinzufügen:

"editor.tabSize": 2,
"editor.detectIndentation": false

Klicken Sie dann mit der rechten Maustaste auf Ihr Dokument, falls Sie bereits eines geöffnet haben, und klicken Sie auf Dokument formatieren, damit Ihr vorhandenes Dokument diesen neuen Einstellungen folgt.

Gmoney Mozart
quelle
2

Die Lösung von @ alex-dima aus dem Jahr 2015 ändert die Tabulatorgrößen und Leerzeichen für alle Dateien, und die Lösung von @ Tricky aus dem Jahr 2016 scheint nur die Einstellungen für die aktuelle Datei zu ändern.

Ab 2017 habe ich eine andere Lösung gefunden, die pro Sprache funktioniert. Visual Studio Code verwendete nicht die richtigen Registerkartengrößen oder Speicherplatzeinstellungen für Elixir , sodass ich feststellen konnte, dass ich die Einstellungen für alle Elixir-Dateien ändern konnte.

Ich habe auf die Sprache in der Statusleiste geklickt (in meinem Fall "Elixier"), "Sprachbasierte Einstellungen für" Elixier "konfigurieren ..." ausgewählt und die Elixier-spezifischen Spracheinstellungen bearbeitet. Ich habe gerade die Einstellungen "editor.tabSize" und "editor.insertSpaces" aus den Standardeinstellungen links kopiert (ich bin so froh, dass diese angezeigt werden) und sie dann rechts geändert.

Es hat großartig funktioniert und jetzt verwenden alle Elixir-Sprachdateien die richtigen Einstellungen für Tabulatorgröße und Speicherplatz.

Kevin Peter
quelle
1

Ich musste viele Einstellungen wie in den vorherigen Antworten vornehmen, daher weiß ich nicht, warum es nach vielen Änderungen funktioniert hat.

Nichts funktionierte , bis ich geschlossen und openen meine IDE, aber die letzten drei Dinge , die ich tat , war disable das lonefy.vscode-js-css-html-formatter, "html.format.enable": true,und starten Sie Visual Studio.

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Default Light+",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.tabSize": 2,
        "editor.detectIndentation": false,
        "editor.insertSpaces": true
    },
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceAfterConstructor": true,
    "files.autoSave": "afterDelay",
    "html.format.indentHandlebars": true,
    "html.format.indentInnerHtml": true,
    "html.format.enable": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
}
user742102
quelle
0

Wenn dies für Angular 2 gilt und die CLI Dateien generiert, die Sie anders formatieren möchten, können Sie diese Dateien bearbeiten, um zu ändern, was generiert wird:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

Nicht massiv empfohlen, da ein npm-Update Ihre Arbeit löscht, aber es hat mir viel Zeit gespart.

Ben Taliadoros
quelle
0

Ich habe versucht, den Editor .tabSizeauf 4 zu ändern , .editorConfigüberschreibe jedoch alle von mir angegebenen Einstellungen, sodass keine Konfiguration in den Benutzereinstellungen geändert werden muss. Sie müssen nur die .editorConfig-Datei bearbeiten:

set indent_size = 4
Gh111
quelle
-1

User3550138 ist korrekt. lonefy.vscode-js-css-html-formatterüberschreibt alle in anderen Antworten genannten Einstellungen. Sie müssen es jedoch nicht deaktivieren oder deinstallieren, da es konfiguriert werden kann.

Vollständige Anweisungen finden Sie, indem Sie die Seitenleiste der Erweiterungen öffnen und auf diese Erweiterung klicken. Die Konfigurationsanweisungen werden im Editor-Arbeitsbereich angezeigt. Zumindest für mich in Visual Studio Code Version 1.14.1.

DRL
quelle