Wie kann ich den Umrechnungsfaktor von Tab zu Leerzeichen anpassen?

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.

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ü Datei → Einstellungen → Benutzereinstellungen und für Mac im Menü Code → Einstellungen → Einstellungen 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

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, →

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 .

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

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
}

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.

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

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ü Datei → Einstellungen → Benutzereinstellungen oder verwenden Sie die Tastenkombinationen Ctrl+ Shift+P
• Mac im Menü Code → Einstellungen → Einstellungen oder ⌘,

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.

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.

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

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

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

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.

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

Menü Datei → Einstellungen → Einstellungen

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.

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.

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,
}

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.

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

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.