web-dev-qa-db-fra.com

Comment changer l'indentation dans Visual Studio Code?

Pour chaque fichier TypeScript, le code Visual Studio utilise une indentation automatique de 8 espaces. C’est un peu trop à mon goût mais je ne trouve pas où le changer.

Peut-être que c'est disponible en tant que paramètre mais sous un nom différent car je ne trouve rien qui soit lié à l'indentation.

formattingvisual-studio-code
124
HMR

Dans la barre d'outils située dans le coin inférieur droit, vous verrez un élément ressemblant à ceci:  enter image description here Après avoir cliqué dessus, vous aurez la possibilité de mettre en retrait en utilisant des espaces ou des tabulations. Après avoir sélectionné votre type de retrait, vous aurez ensuite la possibilité de changer la taille du retrait. Dans le cas de l'exemple ci-dessus, l'indentation est définie sur 4 caractères d'espacement par retrait. Si tabulation est sélectionnée comme caractère d'indentation, vous verrez alors Tab Size au lieu de Spaces

Si vous souhaitez que cela s'applique à tous les fichiers et non pas individuellement, remplacez les paramètres editor.tabSize et editor.insertSpaces dans Paramètres utilisateur ou Paramètres de l'espace de travail, selon vos besoins

245
elliot-j

Pour modifier l'indentation en fonction du langage de programmation , procédez de l'une des manières suivantes:

  • Ajoutez ceci à vos paramètres (Ctrl+,):
    (exemple pour les paramètres spécifiques à TypeScript):

    "[TypeScript]": {
    "editor.tabSize": 2
}

OR

  • Ctrl+Shift+P (ouvrez la palette de commandes)
  • Préférences: configurez les paramètres spécifiques à la langue ... (ID de commande: workbench.action.configureLanguageBasedSettings)
  • Sélectionnez le langage de programmation
  • Ajoutez le code comme ci-dessus.

Voir aussi: VS Code Docs

66
MA-Maddin

Vous pouvez également vouloir définir le editor.detectIndentation sur false, en plus de la réponse d'Elliot-J. 

VSCode écrasera vos paramètres editor.tabSize et editor.insertSpaces par fichier s'il détecte qu'un fichier a un motif d'indentation différent pour les onglets ou les espaces. Vous pouvez rencontrer ce problème si vous ajoutez des fichiers existants à votre projet ou si vous ajoutez des fichiers à l'aide de générateurs de code tels que Angular Cli. Le paramètre ci-dessus empêche VSCode de le faire.

36
RMuesi

Raccourci de formatage de code:

VSCode sous Windows - Maj + Alt + F

VSCode sur MacOS - Maj + Option + F

VSCode sur Ubuntu - Ctrl + Maj + I

Vous pouvez également personnaliser ce raccourci en utilisant des préférences si nécessaire.

sélection de colonne avec clavier Ctrl + Shift + Alt + Arrow

23
Sujatha Girijala

Dans mon cas, l'extension " EditorConfig for VS Code " remplace les paramètres VSCode . Si vous l'avez installé, vérifiez le fichier .editorconfig dans le dossier racine du projet.

Voici un exemple de configuration. "Indent_size" définit le nombre d'espaces pour un onglet.

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
9
Aviw

Problème: la réponse acceptée ne corrige pas l'indentation dans le document actuel.

Solution: Exécutez Format Document pour retraiter le document en fonction des (nouveaux) paramètres actuels.

Problème: Les documents HTML dans mes projets sont de type "Django HTML" et non "HTML" et aucun formateur n'est disponible.

Solution: changez-les en syntaxe "HTML", formatez-les, puis revenez en "HTML Django".

Problème: Le formateur HTML ne sait pas comment gérer les balises de modèle Django et annule la plupart de mes imbrications soigneusement appliquées.

Solution: Installez l’extension Indent 4-2 , qui effectue l’indentation de manière stricte, sans tenir compte de la syntaxe de la langue actuelle (ce que je veux dans ce cas).

4
shacker

Je voulais changer l'indentation de mon fichier HTML existant de 4 espaces à 2 espaces. 

J'ai cliqué sur le bouton "Espaces: 4" dans la barre d'état et les ai modifiés en deux dans la boîte de dialogue suivante.

J'utilise l'extension 'vim'. Je ne sais pas comment me réindenter sans vim

Pour réindenter mon fichier actuel, j'ai utilisé ceci:

gg

=

G
2
Rounak

Pour définir tous les fichiers existants et les nouveaux fichiers sur l'espace d'identification à 2, saisissez-le dans votre settingns.json (à la racine de json):

"[TypeScript]": {
        "editor.defaultFormatter": "vscode.TypeScript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 }

vous pouvez ajouter le type de langue de la configuration:

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
}
1
Reculos Gerbi Neto

Ajout sur: oui, vous pouvez utiliser l'interface utilisateur en bas à droite pour configurer les paramètres d'espace. Toutefois, si vous avez du code existant qui n'est pas formaté selon le nouvel espacement, vous pouvez cliquer avec le bouton droit de la souris sur un emplacement du fichier et cliquer sur Format Document. Il m'a fallu un certain temps pour comprendre cela jusqu'à ce que je tombe par hasard sur ce problème .

Menu Format du document

0
Wompinalong