Come posso personalizzare il fattore di conversione da tabulazione a spazio?

Come si personalizza il fattore di conversione da tabulazione a spazio quando si utilizza Visual Studio Code?

Ad esempio, in questo momento in HTML sembra produrre due spazi per stampa di TAB, ma in TypeScript ne produce 4.

Per impostazione predefinita, Visual Studio Code proverà a indovinare le opzioni di rientro in base al file aperto.

Puoi disattivare il rientro indovinando tramite "editor.detectIndentation": false.

Puoi personalizzarlo facilmente tramite queste tre impostazioni per Windows nel menu File → Preferenze → Impostazioni utente e per Mac nel menu Codice → Preferenze → Impostazioni o ⌘,:

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

Sto eseguendo la versione 1.21, ma penso che questo possa applicarsi anche alle versioni precedenti.

Dai un'occhiata alla parte in basso a destra dello schermo. Dovresti vedere qualcosa che dice Spaceso Tab-Size.

Il mio mostra spazi, →

1. Fai clic su Spaces (o Tab-Size )
2. Scegli Rientro tramite spazi o Rientro tramite schede
3. Seleziona la quantità di spazi o schede che ti piace.

Funziona solo per documento, non a livello di progetto. Se si desidera applicarlo a tutto il progetto, è necessario aggiungere anche "editor.detectIndentation": falsealle impostazioni dell'utente.

Bene, se ti piace il modo di sviluppatore, Visual Studio Code ti consente di specificare i diversi tipi di file per il tabSize. Ecco l'esempio del mio settings.jsoncon quattro spazi predefiniti e due spazi JavaScript / JSON:

{
  // 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: Beh, se non sai come aprire questo file (specialmente in una nuova versione di Visual Studio Code), puoi:

1. Marcia inferiore sinistra →
2. Impostazioni → in alto a destra Apri Impostazioni

Per impostazione predefinita, Visual Studio Code rileva automaticamente il rientro del file aperto corrente. Se si desidera disattivare questa funzione e fare tutti i rientri, ad esempio due spazi, si dovrebbe fare quanto segue in Impostazioni utente o Impostazioni area di lavoro.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Siamo in grado di controllare le dimensioni della scheda per tipo di file con EditorConfig e l' EditorConfig per l' estensione VS Code . Quindi possiamo rendere Alt+ Shift+ Fspecifico per ogni tipo di file.

Installazione

ext install EditorConfig

Esempio di configurazione

.editorconfig

[*]
indent_style = space

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

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig sovrascrive qualunque sia settings.json configura per l'editor. Non è necessario cambiare editor.detectIndentation.

Se si utilizza l'estensione più carina in Visual Studio Code, provare ad aggiungere questo al file settings.json:

"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 versione 1.31.1 o successive (penso): Come sed Alex Dima , puoi personalizzarlo facilmente tramite queste impostazioni per

• Windows nel menu File → Preferenze → Impostazioni utente o utilizzare i tasti di scelta rapida Ctrl+ Shift+P
• Mac nel menu Codice → Preferenze → Impostazioni o ⌘,

Vuoi assicurarti che editorconfig non sia in conflitto con la configurazione delle impostazioni dell'utente o dello spazio di lavoro, dato che ho appena avuto un po 'di fastidio pensando che le impostazioni dei file delle impostazioni non venivano applicate quando era la mia configurazione dell'editor che annullava quelle modifiche.

Questo è lonefy.vscode-js-css-html-formatterda biasimare. Disabilitalo e installaloHookyQR.beautify .

Ora su Salva le tue schede non verrebbero convertite.

Nell'angolo in basso a destra, hai Spaces: Spaces: 2

Lì puoi modificare il rientro in base alle tue esigenze: Opzioni di rientro

Quando si utilizza TypeScript, la larghezza della scheda predefinita è sempre due indipendentemente da ciò che dice nella barra degli strumenti. È necessario impostare "prettier.tabWidth" nelle impostazioni utente per modificarlo.

Ctrl+ P, Tipo → impostazioni utente, aggiungi:

"prettier.tabWidth": 4

Se la risposta accettata su questo post non funziona, provaci:

Ho avuto EditorConfig per Visual Studio Code installato nel mio editor e continuava a sovrascrivere le mie impostazioni utente che erano impostate su rientri tramite spazi. Ogni volta che passavo tra le schede dell'editor, il mio file veniva automaticamente indentato con le schede anche se avessi convertito il rientro in spazi !!!

Subito dopo aver disinstallato questa estensione, il rientro non cambia più tra il cambio delle schede dell'editor e posso lavorare in modo più comodo piuttosto che dover convertire manualmente le schede in spazi ogni volta che cambio file - è doloroso.

Ci sono già molte buone risposte fornite dai nostri amati membri della comunità. In realtà volevo aggiungere la scheda del codice C # Dimensione e ho trovato questa discussione. Ci sono molte soluzioni che ho trovato e i documenti ufficiali VS Code sono fantastici. Voglio solo condividere le mie impostazioni C #:

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

basta copiare e incollare sopra il codice nel settings.jsonfile e salvare. Grazie

Menu File → Preferenze → Impostazioni

Aggiungi alle impostazioni utente:

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

quindi fai clic con il pulsante destro del mouse sul documento se ne hai già aperto uno e fai clic su Formato documento per fare in modo che il documento esistente segua queste nuove impostazioni.

La soluzione di @ alex-dima dal 2015 cambierà le dimensioni e gli spazi delle schede per tutti i file e la soluzione di @ Tricky dal 2016 sembra modificare solo le impostazioni per il file corrente.

A partire dal 2017, ho trovato un'altra soluzione che funziona in base alla lingua. Il codice di Visual Studio non utilizzava le dimensioni della scheda o le impostazioni dello spazio appropriate per Elisir , quindi ho scoperto che potevo modificare le impostazioni per tutti i file Elisir.

Ho fatto clic sulla lingua nella barra di stato ("Elisir" nel mio caso), ho scelto "Configura impostazioni basate sulla lingua" Elisir "..." e modificato le impostazioni della lingua specifiche per Elisir. Ho appena copiato le impostazioni "editor.tabSize" e "editor.insertSpaces" dalle impostazioni predefinite a sinistra (sono così felice che siano mostrate) e poi le ho modificate a destra.

Funzionava alla grande, e ora tutti i file in lingua Elixir utilizzano le dimensioni della scheda e le impostazioni dello spazio appropriate.

Ho dovuto fare molte modifiche alle impostazioni come le risposte precedenti, quindi non so quale sia stato il risultato dopo molte modifiche.

Niente ha funzionato fino a quando ho chiuso e openen mio IDE, ma le ultime tre cose che ho fatto era disabilitare la lonefy.vscode-js-css-html-formatter, "html.format.enable": true,e riavviare 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,
}

Se questo è per Angular 2 e la CLI sta generando file che desideri siano formattati in modo diverso, puoi modificare questi file per cambiare ciò che viene generato:

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

Non raccomandato in modo massiccio poiché un aggiornamento npm eliminerà il tuo lavoro, ma mi ha fatto risparmiare un sacco di tempo.

Ho provato a modificare l'editor .tabSizein 4, ma .editorConfigsovrascrive qualsiasi impostazione sia stata specificata, quindi non è necessario modificare alcuna configurazione nelle impostazioni utente. Hai solo bisogno di modificare il file .editorConfig:

set indent_size = 4

L'utente3550138 è corretto. lonefy.vscode-js-css-html-formatterignora tutte le impostazioni menzionate in altre risposte. Tuttavia, non è necessario disabilitarlo o disinstallarlo poiché può essere configurato.

Le istruzioni complete sono disponibili aprendo la barra laterale delle estensioni e facendo clic su questa estensione e verranno visualizzate le istruzioni di configurazione nell'area di lavoro dell'editor. Almeno lo fa per me in Visual Studio Code versione 1.14.1.