web-dev-qa-db-fra.com

Comment formater le code dans le code Visual Studio (VSCode)

Quel est l'équivalent de Ctrl + K + F et Ctrl + K + D sous Windows dans Visual Studio pour le formatage ou "embellir" le code dans l'éditeur de code Visual Studio?

code-formattingvisual-studio-code
990
Brandon Clapp

Le formatage du code est disponible dans Visual Studio Code via les raccourcis suivants:

  • Sur Windows Shift + Alt + F
  • Sur Mac Shift + Option + F
  • Sur Ubuntu Ctrl + Shift + I

Alternativement, vous pouvez trouver le raccourci, ainsi que d’autres, à travers la fonctionnalité de recherche fournie dans l’éditeur avec Ctrl +Shift+ P (ou Command + Shift + P sur Mac), puis recherchez le document au format .

3188
Brandon Clapp

raccourci de formatage de 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 pendant l'enregistrement du fichier:

Le code Visual Studio 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 d'espace de travail de Visual Studio Code.

Menu Fichier → Préférences → Paramè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 maintenant formater automatiquement les fichiers TypeScript. Vérifiez ma mise à jour.

431
Bharathi Devarasu

Vous pouvez ajouter un raccourci clavier dans le menu Fichier → Pré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" }
200
hardkoded
  1. Clic droit sur le fichier
  2. Sélectionnez le format du document (Alt + Shift + F) de la boîte de menu.

Enter image description here

123
Siddarth Kanted

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

112
César

Notez également qu'à partir de ce jour, le formatage est disponible pour ces langues:

  • XML  (ils l'ont enlevé , trop de bugs)
  • HTML
  • JSON
  • JavaScript
  • Manuscrit
  • C #
69
Johannes Rieken

Pour Fedora

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

Mine lire "key": "ctrl+shift+i"

Vous pouvez aussi le changer. Reportez-vous à cette réponse pour savoir comment ... ou si vous vous sentez un peu paresseux pour faire défiler vers le haut:

Vous pouvez ajouter un raccourci clavier 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" }

Notez s'il vous plaît: cmd la clé est seulement pour les Mac. Pour Windows et Fedora (clavier Windows), utilisez Ctrl

EDIT:

Selon la version du code visuel 1.28.2 c'est ce que j'ai trouvé.

editor.action.format n'existe plus. Il a maintenant été remplacé par editor.action.formatDocument et editor.action.formatSelection.

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

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

  1. Cliquez sur editor.action.formatDocument ou editor.action.formatSelection
  2. Un stylo ressemblant à une icône apparaît à gauche - cliquez dessus.
  3. Un pop-up apparaît. Appuyez sur la combinaison de touches souhaitée, puis sur entrée.
60
abyshukla

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.

59
Niklas Rosencrantz

Le code Visual Studio 1.6.1 prend en charge " Formater à l’enregistrement ", qui détecte automatiquement les extensions de formateur installées appropriées et formate le tout. document sur chaque sauvegarde.

Activer "Formatage sur enregistrement" en définissant

"editor.formatOnSave": true

Et il existe des raccourcis clavier disponibles (Code Visual Studio 1.7 et ci-dessus):

Formate le document entier: Shift + Alt + F

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

56
Dariusz

Sur Ubuntu c'est Ctrl + Shift + I.

41
ranbuch

Faites un clic droit sur le texte et sélectionnez "Code du format".

Le code Visual Studio utilise js-beautify en interne, mais il ne lui est pas possible de modifier le style que vous souhaitez utiliser. L'extension "embellir" vous permet d'ajouter des paramètres.

28
Gerfried

Pour certaines raisons Alt + Shift + F n'a pas fonctionné pour moi sur Mac Visual Studio Code 1.3.1, et en fait la commande "Formater le document" ne fonctionne pas du tout. Mais la commande Formatter a très bien fonctionné.

Afin que vous puissiez utiliser Command + Shift + P et tapez Formateur ou créez votre propre raccourci dans le menu Fichier → Préférences → Raccourcis clavier → Command + KCommand + S puis tapez Formatter et ajoutez votre raccourci.

Voir un exemple:

Enter image description here

24
Aleksander Tymczenko

Shift + Alt + F fait très bien le travail dans 1.17.2 et au-dessus.

22
Piotrek Hryciuk

Formatage du code dans Visual Studio.

J'ai essayé de formater dans Windows 8.

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

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

    Enter image description here

  2. Ensuite, une zone de texte apparaîtrait où nous avons besoin du type Format

    Shift + Alt + F

    Enter image description here

19
afeef

Le raccourci de format dans C # ne fonctionnait pas pour moi tant que je n’avais pas installé 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 fichiers .json.

17
Jo Smo

Dans le code Visual Studio, Shift+Alt+F fait quoi Ctrl+K+D fait dans Visual Studio.

17
Burk

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

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

Menu Fichier → Préférences → Raccourcis clavier et filtrez par mot clé 'format'.

14
Lukasz Czerwinski

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 le niveau utilisateur. Cela 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. Aller à: Menu Fichier → Préférences → Paramètres de l'espace de travail

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

    How it looks

Niveau d'environnement utilisateur

Avantages

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

Résultats

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

Comment?

  1. Aller à: menu Fichier → Préférences → Paramètres utilisateur

  2. Ajoutez ou modifiez la valeur de "editor.formatOnType": false en "editor.formatOnType": true dans les paramètres utilisateur.json.

L'emplacement settings.json de votre utilisateur de code Visual Studio est:

Emplacement des fichiers de paramètres en fonction de votre plate-forme, le fichier de paramètres utilisateur se trouve ici:

  • Windows: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json Le 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 .

13
Saturn Technologies

Menu Fichier → Préférences → Paramètres

"editor.formatOnType": true

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

Vous pouvez également utiliser "editor.formatOnSave": true.

11
M Fatih Koca

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

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

Après l'installation, il suffit de recharger les fenêtres et d'appuyer sur Ctrl + Shift + Fet ça a marché!

8
mumair

Sélectionnez le texte, cliquez avec le bouton droit de la souris sur la sélection et sélectionnez l'option "Palette de commandes":

Enter image description here

Une nouvelle fenêtre s'ouvre. Recherchez "format" et sélectionnez l'option qui dispose du formatage selon l'exigence.

7
Akhil Ghatiki

Sous Mac, utilisez ⌘+K puis ⌘+F.

6
Gopal Devra

Installez simplement Visual Studio Keymap de Microsoft. Problème résolu. : p

6
Rudy

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

Reportez-vous à cette capture d'écran:

img

5
Jerry Ni

La manière la plus simple que j'utilise dans Visual Studio Code (Ubuntu) est la suivante:

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

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

5
Ashutosh Jha

Pour ceux qui souhaitent personnaliser les fichiers JavaScript à formater, vous pouvez utiliser l'extension any sur la propriété JSfiles. La même chose s'applique au HTML.

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

Cela activera l'embellissement lors de la sauvegarde pour TypeScript, et vous pourrez ajouter en XML à l'option HTML.

4
Rick

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

Le formatage ne sera disponible que si vous avez installé le plug-in approprié et enregistré le fichier avec une extension appropriée.

4
Nigel Feasey

Pas celui-ci. Utilisez ceci:

Menu Fichier → Préférences → Paramètres de l'espace de travail, "editor.formatOnType": true

3
杨恩锋

Code Visual Studio sous Linux:

Ctrl + [ débloquer un bloc de code et

Ctrl + ] faire une empreinte en masse

1
Hvitis

Utiliser l'extension ...

Active le formatage automatique du code lorsque vous enregistrez un fichier.

Lancer le code Visual Studio et Ouverture rapide (Ctrl + P), collez la commande suivante et appuyez sur Enter.

format d'installation externe lors de l'enregistrement

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

0
Gyuha Shin