Come si formatta il codice in Visual Studio Code (VSCode)


990

Qual è l'equivalente di Ctrl+ K+ Fe Ctrl+ K+ Dsu Windows in Visual Studio per la formattazione o il codice "abbellimento" nell'editor di codice di Visual Studio?


47
Per tutti coloro che cercano disperatamente di formattare XML (che al momento non sembra possibile) è possibile farlo installando un'estensione. Ho trovato gli strumenti XML per fare il lavoro bene. Disclaimer: non sono l'autore né correlato a questo progetto ...
informatik01

Mentre VSCode ha molte meno opzioni di menu rispetto a VS (nuova tendenza?), Ha ampie informazioni ed esercitazioni nel menu HELP, che potrebbero aver risposto a questa domanda.
Roland,

Per tutti coloro che lottano per far funzionare la formattazione anche dopo aver provato le combinazioni valide in Visual Studio Code, non dimenticare di selezionare il tipo di linguaggio di programmazione appropriato, si trova in basso a destra nella finestra del codice di Visual Studio accanto a quella faccina. Una volta fatto ciò, ho scoperto che funziona immediatamente e non è necessario alcun plug-in aggiuntivo per formattare il codice.
Mr.Hunt,

Risposte:


3845

La formattazione del codice è disponibile in Visual Studio Code tramite le seguenti scorciatoie:

  • Su Windows Shift+ Alt+F
  • Su Mac Shift+ Option+F
  • Su Linux Ctrl+ Shift+I

In alternativa, puoi trovare la scorciatoia, così come altre scorciatoie, attraverso la 'Tavolozza comandi' fornita nell'editor con Ctrl+ Shift+ P(o Command+ Shift+ Psu Mac) e quindi cercare il documento in formato .


28
Si noti inoltre che il codice Lingua deve essere corretto. vale a dire che il formato del codice non sarà disponibile se è selezionato il testo normale ma il passaggio a JSON (ad esempio) formatterà felicemente il testo selezionato. (felice come può essere un editor di testo)
Stephen Price,

4
@JoSmo: su Ubuntu ho aperto File> Preferenze> Scorciatoie da tastiera. C'è un elemento per {"chiave": "ctrl + maiusc + i", "comando": "editor.action.format", "quando": "editorTextFocus"}. Il comando "ctrl + shift + i" funziona per me.
Asheesh,

18
Inoltre, a quanto pare il file deve essere prima salvato su disco. Avevo un pezzo di HTML + Javascript in cui non poteva formattare il JS, quindi l'ho incollato in una finestra temporanea e impostato la lingua, ma questo non ha aiutato neanche fino a quando non è stato salvato.
Jonas,

9
Per le persone che dicono che non funziona su un Mac, questo sembra un conflitto tra il collegamento e il sistema di input di testo OS X per i caratteri accentati che dipende dalle impostazioni locali configurate e dalle impostazioni della tastiera: github.com/Microsoft/vscode/issues / 8914 # issuecomment-245947844
Chris Adams,

8
Questo non funziona per me sull'ultima versione di VS Code e su Win 10: si presume che abbia installato una determinata estensione?
JayPex,

479

Scorciatoia per la formattazione del codice:

Codice di Visual Studio su Windows - Shift+ Alt+F

Codice di Visual Studio su MacOS - Shift+ Option+F

Codice di Visual Studio su Ubuntu - Ctrl+ Shift+I

Puoi anche personalizzare questo collegamento usando un'impostazione delle preferenze, se necessario.

Formattazione del codice durante il salvataggio del file:

Visual Studio Code consente all'utente di personalizzare le impostazioni predefinite.

Se si desidera formattare automaticamente il contenuto durante il salvataggio, aggiungere lo snippet di codice seguente nelle impostazioni dello spazio di lavoro di Visual Studio Code.

Menu FilePreferenzeImpostazioni area di lavoro

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Nota: ora è possibile formattare automaticamente i file TypeScript. Controlla il mio aggiornamento.


Funziona anche con un'altra lingua con questo: Beautify Extension
equiman,

3
non so perché sia ​​diverso in CentOS, ma lo èShift + Alt + I
a11smiles

2
beautify.onSave non è valido con l'estensione eslint installata
Ben Petersen

Su Ubuntu 17.04 accoppiano è Shift + Alt + Itroppo
Pini Cheyni

2
@ClintEeastwood prova a utilizzare prettier.singleQuote: truenelle impostazioni vs code.
Enn,

216

È possibile aggiungere un'associazione di tasti nel menu FilePreferenze → Scorciatoie da tastiera .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

O Visual Studio come:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

23
In Windows, sostituisci cmdcon ctrl- non solo copiare e incollare alla cieca come ho fatto io!
Jens Ehrich,

3
"editor.action.format" funziona di nuovo. Ora formatta l'intero documento se non viene selezionato nulla, altrimenti formatta la selezione.
Cappuccetto rosso

199
  1. Fare clic con il tasto destro del mouse sul file
  2. Seleziona Formatta documento dal menu:
    • Finestre: Alt Shift F
    • Linux: Alt Shift I
    • Mac OS: F

Inserisci qui la descrizione dell'immagine


18
Per Linux le scorciatoie da tastiera sono Ctlr + Shift + I
Lucas

Che cos'è una finestra di menu?
Peter Mortensen,

@PeterMortensen la casella in cui viene visualizzato il menu. Nella schermata, è la casella bianca con "Formato documento", "Taglia", "Copia", "Incolla", ecc.
Ben Leggiero

117

La giusta combinazione di tasti è Shift+ Alt+ F.


2
Quando copi e incolli il codice dagli appunti in una nuova scheda , non succede nulla. Soluzione: salvare il codice in un file con un'estensione di file correlata (ad es. * .Json). Quindi funziona. Suppongo che il motivo sia che il beautifyer conosce la lingua dall'estensione e non fa un rilevamento automatico basato sul codice.
Beauty

Questo collegamento funziona per MAC. In Windows formatta il codice.
C. Damoc,

63

Per Fedora

  1. Fare clic su File-> Preferences-> Keyboard shortcuts.
  2. Sotto Default Keyboard Shortcuts, cerca ( Ctrl+ F) per editor.action.format.

Mio letto "key": "ctrl+shift+i"

Puoi anche cambiarlo. Fai riferimento a questa risposta su come ... o se ti senti un po 'pigro per scorrere verso l'alto:


Puoi aggiungere un'associazione di tasti in "Preferenze-> Scorciatoie da tastiera"

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

O Visual Studio come:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }


Nota: la cmdchiave è solo per Mac. Per Windows e Fedora (tastiera Windows) usareCtrl


MODIFICA :

Secondo la versione di Visual Code 1.28.2questo è quello che ho trovato.

editor.action.formatnon esiste più. Ora è stato sostituito da editor.action.formatDocumente editor.action.formatSelection.

Digita editor.action.formatnella casella di ricerca per visualizzare le scorciatoie esistenti.

Per modificare le combinazioni di tasti, attenersi alla seguente procedura:

  1. Clicca editor.action.formatDocumentoeditor.action.formatSelection
  2. Un'icona a forma di penna appare a sinistra: fai clic su di essa.
  3. Viene visualizzato un popup. Premere la combinazione di tasti desiderata e premere Invio.

Con questo comando, nei miei file TypeScript, la virgoletta singola diventa virgoletta doppia. Come risolverlo?
DioBrando il

Sembra che non riesca a individuarlo nella nuova IU delle immondizie delle impostazioni.
Oliver Dixon,

63

Su Linux è Ctrl+ Shift+ I.

Su Windows è Alt+ Shift+ F. Testato con HTML / CSS / JavaScript e Visual Studio Code 1.18.0.

Per altre lingue, potrebbe essere necessario installare un pacchetto di lingue specifico.


61

Visual Studio Code 1.6.1 supporta " Formatta su salvataggio " che preleva automaticamente le estensioni di formattazione installate pertinenti e formatta l'intero documento su ogni salvataggio.

Abilita "Formatta su Salva" impostando

"editor.formatOnSave": true

E ci sono scorciatoie da tastiera disponibili (codice Visual Studio 1.7 e versioni successive):

Formatta l'intero documento : Shift+ Alt+F

Solo selezione formato : Ctrl+ K, Ctrl+F


Suggerisco l'estensione EsLint per VS Code marketplace.visualstudio.com/…
Dariusz,

44

Su Ubuntu è Ctrl+ Shift+ I.


7
Immagino che dipenda dalla lingua. CTRL + SHIFT + Ifunziona per JavaScript ma non per PHP, ad esempio.
Jamie Carl,

32

Basta fare clic destro sul testo e selezionare "Formato codice".

Visual Studio Code utilizza js-beautifyinternamente, ma manca la possibilità di modificare lo stile che si desidera utilizzare. L'estensione "abbellisci" ti consente di aggiungere impostazioni.


1
Certo, sto usando Windows e funziona come descritto - potrebbe dipendere dalla versione di VScode (per favore aggiorna!) E dall'estensione del file. Si prega di testare con HTML.
Gerfried,


32

Menu FilePreferenzeImpostazioni

"editor.formatOnType": true

Quando inserisci il punto e virgola, verrà formattato.

In alternativa, puoi anche usare "editor.formatOnSave": true.


stranamente, ho scoperto che il comportamento di questa impostazione può essere diverso rispetto shift+alt+fa certe situazioni. non so perché però!
JzInqXc9Dg,

Quando ho questa abilitazione e creo una funzione in C #, posso completare tutto e andare avanti, ma la funzione non è formattata fino a quando non eseguo la funzione "Formatta documento". Non so perché l'impostazione sopra non si formatta dopo aver digitato una funzione.
Daniel Jackson,


24

Per qualche motivo Alt+ Shift+ Fnon ha funzionato per me su Mac Visual Studio Code 1.3.1 e in realtà il comando "Formato documento" non ha funzionato affatto. Ma comando Formatter funzionato molto bene.

Quindi puoi usare Command+ Shift+ Pe digitare Formatter o creare la tua scorciatoia nel menu FilePreferenzeScorciatoie da tastieraCommand+ K Command+ Squindi digitare Formatter e aggiungere la scorciatoia.

Vedi un esempio:

Inserisci qui la descrizione dell'immagine


23

Formattazione del codice in Visual Studio.

Ho provato a formattare in Windows 8.

Segui le schermate seguenti.

  1. Fai clic su Visualizza nella barra dei menu in alto, quindi fai clic su Tavolozza comandi.

    Inserisci qui la descrizione dell'immagine

  2. Quindi verrà visualizzata una casella di testo in cui è necessario digitare Formato

    Shift+ Alt+F

    Inserisci qui la descrizione dell'immagine


1
Alcune volte copio incolla xml in un nuovo file e desidero formattarlo senza salvare il file. Questo è perfetto per tali situazioni!
user3885927

19

In Visual Studio Code, Shift+ Alt+ Fsta facendo quello che Ctrl+ K+ Dsta facendo in Visual Studio.


18

Il collegamento al formato in C # non ha funzionato per me fino a quando non ho installato Mono per Mac OS X, DNVM e DNX .

Prima di installare Mono, il collegamento di formattazione automatica ( Shift+ Alt+ F) funzionava solo per i .jsonfile.


Per formattare C # è necessario installare estensioni. Normalmente l'omnisharp dovrebbe funzionare. Tuttavia, c'è un bug in omnisharp. Fino a quando il bug non è stato corretto, dobbiamo usare l'estensione Leopotam.csharpfixformat. Sostituisce omnisharp. Dopo aver installato l'estensione FixFormat di C #, posso formattare nuovamente i documenti.
Oncel Umut TURER

18

Su Mac, Shift+ Alt+F funziona per me.

Puoi sempre controllare le combinazioni di tasti nel menu:

Menu FilePreferenzeScorciatoie da tastiera e filtro per parola chiave 'formato'.


14

Mentre la modifica del comportamento predefinito per Visual Studio Code richiede un'estensione, è possibile ignorare il comportamento predefinito nell'area di lavoro o a livello utente. Funziona per la maggior parte delle lingue supportate (posso garantire HTML, JavaScript e C #).

Livello di spazio di lavoro

Benefici

  • Non richiede un'estensione
  • Può essere condiviso tra le squadre

risultati

  • .vscode/settings.json viene creato nella cartella principale del progetto

Come?

  1. Vai a: Menu FilePreferenzeImpostazioni area di lavoro

  2. Aggiungi e salva "editor.formatOnType": truein settings.json (che sostituisce il comportamento predefinito per il progetto su cui lavori creando il file .vscode / settings.json).

    Come appare

Livello di ambiente dell'utente

Benefici

  • Non richiede estensione
  • Ambiente di sviluppo personale che cerca di dominarli tutti (impostazioni :))

risultati

  • L'utente settings.jsonè stato modificato (vedere la posizione per sistema operativo di seguito)

Come?

  1. Vai a: menu FilePreferenzeImpostazioni utente

  2. Aggiungi o modifica il valore di "editor.formatOnType": falsein "editor.formatOnType": truenelle impostazioni dell'utente.json

Il tuo utente di Visual Studio Code settings.json posizione è:

Posizioni dei file delle impostazioni a seconda della piattaforma, il file delle impostazioni dell'utente si trova qui:

  • Finestre: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.jsonil file di impostazione dell'area di lavoro si trova nella cartella .vscode del progetto.

Maggiori dettagli possono essere trovati qui .


9

L'impostazione predefinita di questa chiave non funzionava per me su documenti HTML, CSS e JavaScript.

Dopo la ricerca, ho trovato il popolare plug -in JS-CSS-HTML Formatter con 133.796 installazioni .

Dopo l'installazione basta ricaricare le finestre e premere Ctrl+ Shift+ F, e ha funzionato!


Sì, ma solo 2 su 5 stelle? Sul serio?
kmoser

Solo un promemoria: questa risposta è stata originariamente scritta nel 2017 e quella volta la funzionalità VS Code era praticamente funzionale tramite plug-in o altri hack, nessuna delle altre soluzioni ha funzionato per me in quel momento, quindi la scopro da sola che ha funzionato in quel momento e non ha funzionato importava quante stelle ha :-) Ora 2020 e il supporto per la formattazione è fantastico e pronto all'uso.
mamma

Non credo che VS Code supporti ancora la formattazione CSS pronta all'uso. Ho installato il plug-in Prettier ( prettier.io ) che gestisce JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML. 5,6 milioni di installazioni e 4 stelle.
kmoser

Sono contento che tu abbia trovato più bello: P Il supporto per la formattazione è lì ma non è buono come più bello, io uso più bello come dipendenza da sviluppo in tutti i miei progetti con .prettierrce plugin. Temo che un giorno più bello si fonderà in vs-code :)
mamma

8

Seleziona il testo, fai clic destro sulla selezione e seleziona l'opzione "palette comandi":

Inserisci qui la descrizione dell'immagine

Si apre una nuova finestra. Cerca "formato" e seleziona l'opzione che ha la formattazione secondo il requisito.




7

Per coloro che desiderano personalizzare i file JavaScript da formattare, è possibile utilizzare qualsiasi estensione sulla JSfilesproprietà. Lo stesso vale per HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Ciò consentirà di abbellire al salvataggio per TypeScript e puoi aggiungere in XML all'opzione HTML.


1
Dove lo metto? Aiuta anche ad aggiungere che abbellire è un'estensione ...
rotgers

Avresti potuto menzionare dove mettere questo codice.
gromit190,

6

Se vuoi personalizzare lo stile del documento di formato, dovresti usare Beautify estensione .

Fare riferimento a questo screenshot:

img


6

Devi prima installare il plug-in appropriato (es. XML, C #, ecc.).

La formattazione non sarà disponibile fino a quando non avrai installato il plugin pertinente e non avrai salvato il file con un'estensione appropriata.


Beautify ti chiede se non sa quale formattatore utilizzare, consentendo di modellare cshtml.
Cees Timmerman,

6

Il modo più semplice che uso in Visual Studio Code (Ubuntu) è:

Seleziona il testo che desideri formattare con il mouse.

Fare clic con il tasto destro e selezionare "Selezione formato" .


5

Non questo. Usa questo:

Menu FilePreferenzeImpostazioni area di lavoro , "editor.formatOnType" : vero


3
Non questo cosa? Ti riferisci ad un'altra risposta? Se si quale?
Peter Mortensen,


2

Codice di Visual Studio su Linux:

Ctrl+ [al blocco di codice indelebile e

Ctrl+ ]per fare un rientro di massa

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.