Comment formater du code dans Visual Studio Code (VSCode)

990

Quel est l'équivalent de Ctrl+ K+ Fet Ctrl+ K+ Dsous Windows dans Visual Studio pour le formatage, ou "embellir" le code dans l'éditeur de code Visual Studio?

Brandon Clapp
la source
47
Pour tous ceux qui tentent désespérément de formater XML (ce qui ne semble pas possible actuellement), vous pouvez y parvenir en installant une extension. J'ai trouvé des outils XML pour bien faire le travail. Avertissement: je ne suis pas l'auteur ni lié à ce projet ...
informatik01
Alors que VSCode a beaucoup moins d'options de menu que VS (nouvelle tendance?), Il contient de nombreuses informations et tutoriels sous le menu AIDE, qui peuvent avoir répondu à cette question.
Roland
Pour tous ceux qui ont du mal à obtenir le travail de formatage même après avoir essayé les combinaisons valides dans Visual Studio Code, n'oubliez pas de sélectionner le type de langage de programmation approprié, il est en bas à droite dans la fenêtre de code de Visual Studio à côté de ce smiley. Une fois que vous avez fait cela, j'ai trouvé que cela fonctionne hors de la boîte et que vous n'avez pas besoin de plugin supplémentaire pour formater le code.
Mr.Hunt

Réponses:

3847

La mise en forme du code est disponible dans Visual Studio Code via les raccourcis suivants:

  • Sous Windows Shift+ Alt+F
  • Sur Mac Shift+ Option+F
  • Sur Linux Ctrl+ Shift+I

Alternativement, vous pouvez trouver le raccourci, ainsi que d'autres raccourcis, via la 'Palette de commandes' fournie dans l'éditeur avec Ctrl+ Shift+ P(ou Command+ Shift+ Psur Mac), puis rechercher le document de format .

Brandon Clapp
la source
28
Notez également que la langue du code doit être correcte. c'est-à-dire que Format Code ne sera pas disponible si du texte brut est sélectionné mais le passage à JSON (par exemple) formatera le texte sélectionné avec plaisir. (aussi heureux qu'un éditeur de texte puisse l'être de toute façon)
Stephen Price
4
@JoSmo: Sur Ubuntu, j'ai ouvert Fichier> Préférences> Raccourcis clavier. Il existe un élément pour {"key": "ctrl + shift + i", "command": "editor.action.format", "when": "editorTextFocus"}. La commande "ctrl + shift + i" fonctionne pour moi.
Asheesh
18
De plus, le fichier doit apparemment d'abord être enregistré sur le disque. J'avais un morceau de HTML + Javascript où il ne pouvait pas formater le JS, alors je l'ai collé dans une fenêtre temporaire et défini la langue, mais cela n'a pas aidé non plus jusqu'à ce qu'il soit enregistré.
Jonas
9
Pour les personnes disant que cela ne fonctionne pas sur un Mac, cela ressemble à un conflit entre le raccourci et le système de saisie de texte OS X pour les caractères accentués qui dépend de vos paramètres régionaux et du clavier configurés: github.com/Microsoft/vscode/issues / 8914 # issuecomment-245947844
Chris Adams
8
Cela ne fonctionne pas pour moi sur la dernière version de VS Code et gagner 10, cela suppose-t-il d'avoir une certaine extension installée?
JayPex
479

Raccourci de mise en forme du code:

Code Visual Studio sous Windows - Shift+ Alt+F

Code Visual Studio sur MacOS - Shift+ Option+F

Code Visual Studio sur Ubuntu - Ctrl+ Shift+I

Vous pouvez également personnaliser ce raccourci en utilisant un paramètre de préférence si nécessaire.

Formatage du code lors de l'enregistrement du fichier:

Visual Studio Code permet à l'utilisateur de personnaliser les paramètres par défaut.

Si vous souhaitez formater automatiquement votre contenu lors de l'enregistrement, ajoutez l'extrait de code ci-dessous dans les paramètres de l'espace de travail de Visual Studio Code.

Fichier de menu → PréférencesParamètres de l'espace de travail

{
    // 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"
    ]
}

Remarque: vous pouvez désormais formater automatiquement les fichiers TypeScript. Vérifiez ma mise à jour.

Bharathi Devarasu
la source
Fonctionne
3
Je ne sais pas pourquoi c'est différent dans CentOS, mais c'estShift + Alt + I
a11smiles
2
beautify.onSave n'est pas valide avec l'extension eslint installée
Ben Petersen
Sur ubuntu mate 17.04 Shift + Alt + Iaussi
Pini Cheyni
2
@ClintEeastwood essayez d'utiliser prettier.singleQuote: truedans vos paramètres de code vs.
Enn
216

Vous pouvez ajouter une liaison de touches dans le menu FichierPréférences → Raccourcis clavier .

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

Ou Visual Studio comme:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }
hardkoded
la source
23
Sous Windows, remplacez cmdpar ctrl- ne faites pas que copier et coller aveuglément comme je l'ai fait!
Jens Ehrich
3
"editor.action.format" fonctionne à nouveau. Il formate maintenant tout le document si rien n'est sélectionné, sinon formate la sélection.
Red Riding Hood
199
  1. Faites un clic droit sur le fichier
  2. Sélectionnez Formater le document dans le menu:
    • Les fenêtres: Alt Shift F
    • Linux: Alt Shift I
    • macOS: F

Entrez la description de l'image ici

Siddarth Kanted
la source
18
Pour Linux, les raccourcis clavier sont Ctlr + Shift + I
Lucas
Qu'est-ce qu'une boîte de menu?
Peter Mortensen
@PeterMortensen la boîte dans laquelle vous voyez le menu. Dans la capture d'écran, c'est la boîte blanche avec "Format du document", "Couper", "Copier", "Coller", etc.
Ben Leggiero
117

La bonne combinaison de touches est Shift+ Alt+ F.

César
la source
2
Lorsque vous copiez et collez du code du presse-papiers dans un nouvel onglet , rien ne se passe. Solution: enregistrez le code dans un fichier avec une extension de fichier associée (par exemple * .json). Alors ça marche. Je suppose que la raison en est que l'embellisseur connaît la langue de l'extension et ne fait pas de détection automatique basée sur le code.
Beauté
Ce raccourci fonctionne pour MAC. Sous Windows, il formate le code.
C. Damoc
63

Pour Fedora

  1. Cliquez sur File-> Preferences-> Keyboard shortcuts.
  2. Sous Default Keyboard Shortcuts, recherchez ( Ctrl+ F) pour editor.action.format.

Le mien a lu "key": "ctrl+shift+i"

Vous pouvez également le modifier. Reportez-vous à cette réponse sur la façon de ... ou si vous vous sentez un peu paresseux pour faire défiler vers le haut:


Vous pouvez ajouter une liaison de touches dans "Préférences-> Raccourcis clavier"

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

Ou Visual Studio comme:

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


Veuillez noter: la cmdclé est uniquement pour les Mac. Pour Windows et Fedora (clavier Windows), utilisezCtrl


MODIFIER :

Selon la version de Visual Code, 1.28.2c'est ce que j'ai trouvé.

editor.action.formatn'existe plus. Il a maintenant été remplacé par editor.action.formatDocumentet editor.action.formatSelection.

Tapez editor.action.formatdans la zone de recherche pour afficher les raccourcis existants.

Pour modifier les combinaisons de touches, procédez comme suit:

  1. Cliquez editor.action.formatDocumentoueditor.action.formatSelection
  2. Une icône semblable à un stylo apparaît à gauche - cliquez dessus.
  3. Une fenêtre contextuelle apparaît. Appuyez sur la combinaison de touches souhaitée et appuyez sur Entrée.
abyshukla
la source
Avec cette commande, dans mes fichiers TypeScript, les guillemets simples deviennent des guillemets doubles. Comment résoudre ça?
DioBrando
Impossible de trouver cela dans l'interface utilisateur des nouveaux paramètres.
Oliver Dixon
63

Sous Linux, c'est Ctrl+ Shift+ I.

Sous Windows, c'est Alt+ Shift+ F. Testé avec HTML / CSS / JavaScript et Visual Studio Code 1.18.0.

Pour d'autres langues, vous devrez peut-être installer un package de langue spécifique.

Niklas R.
la source
61

Visual Studio Code 1.6.1 prend en charge « Format lors de l'enregistrement » qui récupérera automatiquement les extensions de formateur installées pertinentes et formatera le document entier à chaque enregistrement.

Activez "Format lors de l'enregistrement" en définissant

"editor.formatOnSave": true

Et il existe des raccourcis clavier disponibles (Visual Studio Code 1.7 et supérieur):

Formater tout le document : Shift+ Alt+F

Sélection du format uniquement : Ctrl+ K, Ctrl+F

Dariusz
la source
Je suggère l'extension EsLint pour VS Code marketplace.visualstudio.com/…
Dariusz
44

Sur Ubuntu, c'est Ctrl+ Shift+ I.

ranbuch
la source
7
Je suppose que cela dépend de la langue. CTRL + SHIFT + Ifonctionne pour JavaScript mais pas pour PHP, par exemple.
Jamie Carl
32

Faites simplement un clic droit sur le texte et sélectionnez "Formater le code".

Visual Studio Code utilise en js-beautifyinterne, mais il n'a pas la possibilité de modifier le style que vous souhaitez utiliser. L'extension "embellir" vous permet d'ajouter des paramètres.

Gerfried
la source
1
Bien sûr, j'utilise Windows et cela fonctionne comme décrit - cela peut dépendre de la version de VScode (veuillez mettre à jour!) Et de l'extension de fichier. Veuillez tester avec HTML.
Gerfried
1
Il s'agit de l'extension: marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Highmastdon
32

Fichier de menu → PréférencesParamètres

"editor.formatOnType": true

Lorsque vous entrez le point-virgule, il va être formaté.

Alternativement, vous pouvez également utiliser "editor.formatOnSave": true.

M Fatih Koca
la source
curieusement, j'ai trouvé que le comportement de ce paramètre peut être différent de celui shift+alt+fde certaines situations. Je ne sais pas pourquoi!
JzInqXc9Dg
Lorsque j'ai cette activation et que je crée une fonction en C #, je peux terminer le tout et continuer, mais la fonction n'est pas formatée jusqu'à ce que je fasse la fonction "Formater le document". Je ne sais pas pourquoi le paramètre ci-dessus ne se met pas en forme après avoir tapé une fonction.
Daniel Jackson
25

Shift+ Alt+ Ffait très bien le travail en 1.17.2 et au-dessus.

Piotrek Hryciuk
la source
24

Pour une raison quelconque, Alt+ Shift+ Fne fonctionnait pas pour moi sur Mac Visual Studio Code 1.3.1, et en fait la commande "Formater le document" ne fonctionnait pas du tout. Mais la commande Formatter a très bien fonctionné.

Vous pouvez donc utiliser Command+ Shift+ Pet taper Formatter ou créer votre propre raccourci dans le menu FichierPréférencesRaccourcis clavierCommand+ K Command+ Spuis taper Formatter et ajouter votre raccourci.

Voir un exemple:

Entrez la description de l'image ici

Aleksander Tymczenko
la source
23

Formatage du code dans Visual Studio.

J'ai essayé de formater sous Windows 8.

Suivez simplement les captures d'écran ci-dessous.

  1. Cliquez sur Affichage dans la barre de menu supérieure, puis sur Palette de commandes.

    Entrez la description de l'image ici

  2. Ensuite, une zone de texte apparaîtrait là où nous avons besoin de taper Format

    Shift+ Alt+F

    Entrez la description de l'image ici

afeef
la source
1
Parfois, je copie coller du xml dans un nouveau fichier et je veux le formater sans enregistrer le fichier. C'est parfait pour de telles situations!
user3885927
19

Dans Visual Studio Code, Shift+ Alt+ Ffait ce que Ctrl+ K+ Dfait dans Visual Studio.

Burk
la source
18

Le raccourci de format en C # n'a pas fonctionné pour moi jusqu'à ce que j'installe Mono pour Mac OS X, DNVM et DNX .

Avant d'installer Mono, le raccourci de formatage automatique ( Shift+ Alt+ F) ne fonctionnait que pour les .jsonfichiers.

Jo Smo
la source
Pour formater C #, il faut installer des extensions. Normalement, l'omnisharp devrait fonctionner. Cependant, il y a un bogue dans omnisharp. Jusqu'à ce que le bug soit corrigé, nous devons utiliser l'extension Leopotam.csharpfixformat. Il remplace l'omnisharp. Après avoir installé l'extension C # FixFormat, je peux à nouveau formater les documents.
Oncel Umut TURER
18

Sur Mac, Shift+ Alt+F fonctionne pour moi.

Vous pouvez toujours vérifier les raccourcis clavier dans le menu:

Fichier de menu → PréférencesRaccourcis clavier et filtrez par mot-clé «format».

Lukasz Czerwinski
la source
14

Bien que la modification du comportement par défaut pour Visual Studio Code nécessite une extension, vous pouvez remplacer le comportement par défaut dans l'espace de travail ou au niveau utilisateur. Il fonctionne pour la plupart des langues prises en charge (je peux garantir HTML, JavaScript et C #).

Niveau de l'espace de travail

Avantages

  • Ne nécessite pas d'extension
  • Peut être partagé entre les équipes

Résultats

  • .vscode/settings.json est créé dans le dossier racine du projet

Comment?

  1. Accédez à: Fichier de menu → PréférencesParamètres de l'espace de travail

  2. Ajoutez et enregistrez "editor.formatOnType": truedans settings.json (qui remplace le comportement par défaut du projet sur lequel vous travaillez en créant le fichier .vscode / settings.json).

    À quoi ça ressemble

Niveau d'environnement utilisateur

Avantages

  • Ne nécessite pas d'extension
  • Environnement de développement personnel tweeking pour les gouverner tous (paramètres :))

Résultats

  • L'utilisateur settings.jsonest modifié (voir l'emplacement par système d'exploitation ci-dessous)

Comment?

  1. Allez dans: menu FichierPréférencesParamètres utilisateur

  2. Ajoutez ou modifiez la valeur de "editor.formatOnType": falseà "editor.formatOnType": truedans les paramètres utilisateur.json

L' settings.jsonemplacement de votre utilisateur Visual Studio Code est:

Emplacements des fichiers de paramètres en fonction de votre plateforme, le fichier de paramètres utilisateur se trouve ici:

  • Les fenêtres: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.jsonle fichier de configuration de l'espace de travail se trouve dans le dossier .vscode de votre projet.

Plus de détails peuvent être trouvés ici .

Saturn Technologies
la source
9

Par défaut, cette clé ne fonctionnait pas pour moi sur les documents HTML, CSS et JavaScript.

Après la recherche, j'ai trouvé le plugin JS-CSS-HTML Formatter populaire avec 133 796 installations .

Après l'installation, rechargez simplement les fenêtres et appuyez sur Ctrl+ Shift+ F, et cela a fonctionné!

mumair
la source
Oui, mais seulement 2 étoiles sur 5? Sérieusement?
kmoser
Juste un rappel: cette réponse a été écrite à l'origine en 2017 et à l'époque où la fonctionnalité VS Code était à peu près fonctionnelle via des plugins ou d'autres hacks, aucune autre solution n'a fonctionné pour moi à cette époque, donc je la découvre par moi-même qui a réellement fonctionné à cette époque et n'a pas fonctionné Peu importe combien d'étoiles il a :-) Maintenant 2020 et le support de formatage est fantastique.
mumair
Je ne pense pas que VS Code supporte encore le formatage CSS hors de la boîte. J'ai installé le plus joli plug - in ( prettier.io ) qui gère JavaScript, tapuscrit, Flow, JSX, JSON, CSS, SCRT, Moins, HTML, Vue, angulaire, GraphQL, Markdown, YAML. 5,6 millions d'installations et 4 étoiles.
kmoser
Je suis heureux que vous ayez trouvé plus joli: P Le support de formatage est là mais pas aussi joli, j'utilise plus joli comme dépendance de développement dans tous mes projets avec .prettierrcet plugin. Je crains qu'un jour plus joli ne fusionne en vs-code :)
mumair
8

Sélectionnez le texte, faites un clic droit sur la sélection, puis sélectionnez l'option "palette de commandes":

Entrez la description de l'image ici

Une nouvelle fenêtre s'ouvre. Recherchez «format» et sélectionnez l'option dont le formatage est conforme à l'exigence.

Akhil Ghatiki
la source
7

Sous Mac, utilisez + Kpuis + F.

Gopal Devra
la source
7

Pour ceux qui souhaitent personnaliser les fichiers JavaScript à formater, vous pouvez utiliser n'importe quelle extension de la JSfilespropriété. La même chose s'applique au HTML.

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

Cela permettra d'embellir lors de l'enregistrement pour TypeScript, et vous pouvez ajouter en XML à l'option HTML.

Meule
la source
1
Où dois-je mettre ça? Cela aide également à ajouter que l'embellissement est une extension ...
rotgers
Vous auriez pu indiquer où mettre ce code.
gromit190
6

Si vous souhaitez personnaliser le style du format-document, vous devez utiliser l' extension Beautify .

Reportez-vous à cette capture d'écran:

img

Jerry Ni
la source
6

Vous devez d'abord installer le plug-in approprié (c'est-à-dire XML, C #, etc.).

Le formatage ne sera disponible qu'après avoir installé le plug-in correspondant et enregistré le fichier avec une extension appropriée.

Nigel Feasey
la source
Beautify vous demande s'il ne sait pas quel formateur utiliser, ce qui permet de styliser cshtml.
Cees Timmerman
6

La façon la plus simple que j'utilise dans Visual Studio Code (Ubuntu) est:

Sélectionnez le texte que vous souhaitez formater avec la souris.

Faites un clic droit et choisissez "Sélection du format" .

Ashutosh Jha
la source
5

Pas celui-ci. Utilisez ceci:

Fichier de menu → PréférencesParamètres de l'espace de travail , "editor.formatOnType" : vrai

杨恩锋
la source
3
Pas celui-ci quoi? Parlez-vous d'une autre réponse? Si oui, lequel?
Peter Mortensen
2

Code Visual Studio sur Linux:

Ctrl+ [au bloc de code non indenté et

Ctrl+ ]pour faire une indentation de masse

Hvitis
la source