Comment formater du code dans Visual Studio Code (VSCode)

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?

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 .

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é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 désormais formater automatiquement les fichiers TypeScript. Vérifiez ma mise à jour.

Vous pouvez ajouter une liaison de touches 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" }

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

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

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.

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.

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

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

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.

Fichier de menu → Préférences → Paramètres

"editor.formatOnType": true

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

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

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

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 Fichier → Préférences → Raccourcis clavier → Command+ K Command+ Spuis taper Formatter et ajouter votre raccourci.

Voir un exemple:

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.

   

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

   Shift+ Alt+F

   

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

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.

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

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

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

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érences → Paramè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).

   

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 Fichier → Préférences → Paramè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 .

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é!

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

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

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

Sous Mac, utilisez ⌘+ Kpuis ⌘+ F.

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.

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

Reportez-vous à cette capture d'écran:

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.

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" .

Pas celui-ci. Utilisez ceci:

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

Utiliser l'extension ...

Active la mise en forme automatique du code lorsque vous enregistrez un fichier.

Lancez Visual Studio Code et Quick Open ( Ctrl+ P), collez la commande suivante et appuyez surEnter .

ext install format-on-save

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

Code Visual Studio sur Linux:

Ctrl+ [au bloc de code non indenté et

Ctrl+ ]pour faire une indentation de masse