Comment changer l'indentation dans Visual Studio Code?

Pour chaque fichier dactylographié, 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 qu'il est disponible en tant que paramètre mais sous un nom différent car je ne trouve rien lié à l'indentation.

METTRE À JOUR

J'utilise actuellement le formateur de code Prettier et cela résout tous les problèmes de formatage en formatant automatiquement lors de l'enregistrement (s'il n'y a pas d'erreur de syntaxe)

Vous pouvez changer cela au Userniveau global ou au Workspaceniveau.

Ouvrez les paramètres: À l' aide du raccourci ctrl + ,ou en cliquant sur File> Preferences> Settingscomme indiqué ci - dessous.

Ensuite, effectuez les 2 modifications suivantes: (tapez tabSizedans la barre de recherche)

1. Décochez la case de Detect Indentation
2. Modifiez la taille de l'onglet à 2/4 (bien que je pense fortement que 2 est correct pour JS :))

Dans la barre d'outils dans le coin inférieur droit, vous verrez un élément qui ressemble à ce qui suit: 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 alors la possibilité de modifier la taille d'un retrait. Dans le cas de l'exemple ci-dessus, l'indentation est définie sur 4 caractères d'espace par retrait. Si l'onglet est sélectionné comme caractère d'indentation, vous verrez alors la taille de l'onglet au lieu des espaces

Si vous souhaitez que cela s'applique à tous les fichiers et non sur une base de fichier individuelle, remplacez les paramètres Editor: Tab Sizeet Editor: Insert Spacesdans les paramètres utilisateur ou les paramètres de l'espace de travail en fonction de vos besoins

Modifier 1

Pour accéder aux paramètres de votre utilisateur ou de votre espace de travail, accédez à Préférences -> Paramètres . Vérifiez que vous vous trouvez dans l' onglet Utilisateur ou Espace de travail selon vos besoins et utilisez la barre de recherche pour localiser les paramètres. Vous pouvez également vouloir désactiver Editor: Detect Indentationcar ce paramètre remplacera ce que vous avez défini Editor: Insert Spaceset Editor: Tab Sizequand il est activé

Pour modifier l'indentation en fonction du langage de programmation :

1. Ouvrez la palette de commande ( CtrlShiftP| macOS: ⇧⌘P)
2. Préférences: Configuration des paramètres spécifiques de la langue ... (commande id: workbench.action.configureLanguageBasedSettings)
3. Sélectionnez le langage de programmation (par exemple TypeScript)

4. Ajoutez ce code:

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

Voir aussi: VS Code Docs

Vous pouvez également définir la valeur editor.detectIndentationfalse, en plus de la réponse d'Elliot-J.

VSCode remplacera vos paramètres editor.tabSizeet editor.insertSpacespar fichier s'il détecte qu'un fichier a un modèle d'indentation de tabulation ou d'espaces différent. 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 comme Angular Cli. Le paramètre ci-dessus empêche VSCode de le faire.

Raccourci de mise en forme du 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 le paramètre de préférence si nécessaire.

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

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

Explication simplifiée avec des images pour ceux qui ont googlé "Changer l'indentation dans le code VS"

Étape 1: cliquez sur Préférences> Paramètres

Étape 2: Le paramètre que vous recherchez est "Détecter l'indentation", commencez à le saisir. Cliquez sur "Editeur: Taille de l'onglet"

Étape 3: faites défiler vers le bas jusqu'à "Éditeur: Taille de l'onglet" et tapez 2 (ou tout ce dont vous avez besoin).

Les modifications sont automatiquement enregistrées

Exemple de mes changements

Pour définir tous les fichiers existants et les nouveaux fichiers sur une identification d'espace à 2, placez-le simplement 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
} 

Comment transformer 4 espaces en retrait dans tous les fichiers de VS Code en 2 espaces

• Ouvrir la recherche de fichiers
• Activer les expressions régulières
• Entrez: ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)]))dans le champ de recherche
• Entrez: $1dans le champ remplacer

Comment transformer 2 espaces en retrait dans tous les fichiers dans VS Code en 4 espaces

• Ouvrir la recherche de fichiers
• Activer les expressions régulières
• Entrez: ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)]))dans le champ de recherche
• Entrez: $1$1dans le champ remplacer

REMARQUE: vous devez d'abord activer PERL Regex. C'est ainsi:

• Ouvrez les paramètres et accédez au fichier JSON
• ajoutez ce qui suit au fichier JSON "search.usePCRE2": true

J'espère que quelqu'un le verra.

Problème: la réponse acceptée ne corrige pas réellement le retrait dans le document actuel.

Solution: exécutez Format Documentpour retraiter le document en fonction des (nouveaux) paramètres actuels.

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

Solution: passez-les à la syntaxe "HTML", formatez-les, puis revenez à "Django HTML".

Problème: le formateur HTML ne sait pas comment gérer les balises de modèle Django et annule une grande partie de mon imbrication soigneusement appliquée.

Solution: installez l' extension Indent 4-2 , qui effectue strictement l'indentation, sans tenir compte de la syntaxe actuelle du langage (ce que je veux dans ce cas).

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 remplacés par deux dans la boîte de dialogue suivante.

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

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

gg

=

G

Ajout: oui, vous pouvez utiliser l'interface utilisateur en bas à droite pour configurer les paramètres d'espace. Mais si vous avez un code existant qui n'est pas formaté selon le nouvel espacement, vous pouvez cliquer avec le bouton droit n'importe où dans le fichier et cliquer sur Format du document . Il m'a fallu un certain temps pour comprendre cela jusqu'à ce que je tombe sur cette question .

Menu Format du document