Comment puis-je personnaliser le facteur de conversion tabulation-espace?

854

Comment personnaliser le facteur de conversion tabulation-espace lors de l'utilisation de Visual Studio Code?

Par exemple, actuellement en HTML, il semble produire deux espaces par pression sur TAB, mais en TypeScript, il en produit 4.

J. Abrahamson
la source

Réponses:

1363

Par défaut, Visual Studio Code essaiera de deviner vos options de retrait en fonction du fichier que vous ouvrez.

Vous pouvez désactiver la devinette d'indentation via "editor.detectIndentation": false.

Vous pouvez personnaliser cela facilement via ces trois paramètres pour Windows dans le menu FichierPréférencesParamètres utilisateur et pour Mac dans le menu CodePréférencesParamètres ou ⌘,:

// The number of spaces a tab is equal to. This setting is overridden
// based on the file contents when `editor.detectIndentation` is true.
"editor.tabSize": 4,

// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you've explicitly set, above.
"editor.detectIndentation": false
Alex Dima
la source
1
Hey Guss, seriez-vous prêt à me pointer vers un fichier où la supposition est fausse? Veuillez également partager la façon dont vous avez configuré ces deux paramètres (tabSize & insertSpaces) et ce que vous attendez. Merci! :)
Alex Dima
5
J'ai configuré les deux paramètres sur "auto", et le comportement n'est pas celui que j'attends (bien que je n'irais pas jusqu'à l'appeler "mauvais"). Je ne sais pas quel fichier doit être modifié pour prendre en charge ma convention, mais j'ai ouvert un ticket de service utilisateur pour cela , comme suggéré dans la réponse à la question # 30057721
Guss
4
Existe-t-il également une option pour définir la valeur par défaut pour les nouveaux fichiers vierges? Il n'y a pas grand-chose à deviner dans ce scénario et je pense que VSCode utilisera par défaut les espaces (ce que je ne préfère pas) ...
Stijn de Witt
Fwiw, il existe également une option de paramètres de lieu de travail afin que vous puissiez définir un comportement différent par projet qui remplace les paramètres utilisateur. 2 ¢
ruffin
1
Merci Ruffin. Existe-t-il un moyen de changer tabSizepar langue? par exemple lors de l'édition de plusieurs fichiers avec différentes langues dans le même espace de travail (par exemple Ruby, JavaScript, CSS, etc.) - Ruby serait des 2espaces, mais CSS serait 4... généralement.
Jacob Barnard
693

J'utilise la version 1.21, mais je pense que cela peut également s'appliquer aux versions antérieures.

Jetez un œil en bas à droite de l'écran. Vous devriez voir quelque chose qui dit Spacesou Tab-Size.

Le mien montre des espaces, →

Entrez la description de l'image ici

  1. Cliquez sur les espaces (ou la taille des onglets )
  2. Choisissez Retrait à l'aide d'espaces ou Retrait à l'aide d'onglets
  3. Sélectionnez le nombre d'espaces ou d'onglets que vous aimez.

Cela ne fonctionne que par document, pas à l'échelle du projet. Si vous souhaitez l'appliquer à l'ensemble du projet, vous devez également l'ajouter "editor.detectIndentation": falseà vos paramètres utilisateur.

Rusé
la source
comment se fait le # 3? Après avoir choisi le numéro 2, il ne semble pas y avoir de moyen de simplement "sélectionner la quantité d'espaces ... que vous aimez". Merci.
Chris22
Tout le temps, je pensais: "Cela doit être possible en quelque sorte ..." Cela explique comment.
vlz
189

Eh bien, si vous aimez la méthode développeur, Visual Studio Code vous permet de spécifier les différents types de fichiers pour le tabSize. Voici l'exemple de my settings.jsonavec quatre espaces par défaut et JavaScript / JSON deux espaces:

{
  // I want my default to be 4, but JavaScript/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

PS: Eh bien, si vous ne savez pas comment ouvrir ce fichier (spécialement dans une nouvelle version de Visual Studio Code), vous pouvez:

  1. Engrenage en bas à gauche →
  2. Paramètres → en haut à droite Ouvrir les paramètres

 

Entrez la description de l'image ici

Xin
la source
105

Par défaut, Visual Studio Code détecte automatiquement l'indentation du fichier ouvert actuel. Si vous souhaitez désactiver cette fonctionnalité et créer une indentation, par exemple, deux espaces, vous devez effectuer les opérations suivantes dans vos paramètres utilisateur ou paramètres d'espace de travail.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}
Jim Doyle
la source
57

Nous pouvons contrôler la taille des onglets par type de fichier avec EditorConfig et son extension EditorConfig pour VS Code . On peut alors faire Alt+ Shift+F spécifique à chaque type de fichier.

Installation

ext install EditorConfig

Exemple de configuration

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig remplace toutes les configurations de settings.json pour l'éditeur. Il n'est pas nécessaire de changer editor.detectIndentation.

Shaun Luttin
la source
De quoi extparlez-vous (veuillez répondre en modifiant votre réponse, pas ici dans les commentaires (le cas échéant))? Quelque chose de Node.js? Quelle plateforme?
Peter Mortensen
12

Si vous utilisez l'extension plus jolie dans Visual Studio Code, essayez de l'ajouter au fichier settings.json:

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me
slowpoke123
la source
8

Dans Visual Studio Code version 1.31.1 ou ultérieure (je pense): comme sed Alex Dima , vous pouvez facilement personnaliser cela via ces paramètres pour

  • Windows dans le menu FichierPréférencesParamètres utilisateur ou utilisez les touches courtes Ctrl+Shift +P
  • Mac dans le menu CodePréférencesParamètres ou ,

Entrez la description de l'image ici

Entrez la description de l'image ici

Andrey Patseiko
la source
7

Vous voulez vous assurer que votre configuration d'éditeur n'est pas en conflit avec la configuration des paramètres de votre utilisateur ou de votre espace de travail, car je ressentais un peu de gêne en pensant que les paramètres des fichiers de paramètres n'étaient pas appliqués lorsque c'était ma configuration d'éditeur qui annulait ces modifications.

Travis Brown
la source
7

C'est lonefy.vscode-js-css-html-formatterà blâmer. Désactivez-le et installez HookyQR.beautify.

Maintenant, lors de l'enregistrement, vos onglets ne seront pas convertis.

user3550138
la source
7

Dans votre coin inférieur droit, vous avez des espaces: Espaces: 2

Là, vous pouvez modifier l'indentation en fonction de vos besoins: Options d'indentation

Dacomis
la source
4

Lorsque vous utilisez TypeScript, la largeur de tabulation par défaut est toujours de deux, indépendamment de ce qu'elle indique dans la barre d'outils. Vous devez définir "prettier.tabWidth" dans vos paramètres utilisateur pour le modifier.

Ctrl+ P, Tapez → paramètres utilisateur, ajoutez:

"prettier.tabWidth": 4
Steve Hanov
la source
4

Si la réponse acceptée sur ce message ne fonctionne pas, essayez ceci:

J'avais EditorConfig pour Visual Studio Code installé dans mon éditeur, et il continuait de remplacer mes paramètres utilisateur qui étaient définis pour indenter les fichiers en utilisant des espaces. Chaque fois que je basculais entre les onglets de l'éditeur, mon fichier était automatiquement indenté avec des onglets même si j'avais converti l'indentation en espaces !!!

Juste après avoir désinstallé cette extension, l'indentation ne change plus entre les changements d'onglets de l'éditeur et je peux travailler plus confortablement plutôt que d'avoir à convertir manuellement les onglets en espaces chaque fois que je change de fichier, ce qui est pénible.

dhruvpatel
la source
4

Il y a déjà beaucoup de bonnes réponses fournies par les membres de notre communauté bien-aimée. J'ai en fait voulu ajouter le tabSize de code C # et j'ai trouvé ce fil. Il y a de nombreuses solutions que j'ai trouvées et les documents officiels VS Code sont géniaux. Je veux juste partager mon paramètre C #:

"[csharp]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

copiez et collez le code ci-dessus dans votre settings.jsonfichier et enregistrez. Merci

Md. Jamal Uddin
la source
1
Oui, c'est la voie à suivre si vous souhaitez définir un format différent pour une langue spécifique. J'aime utiliser des onglets avec tabWidth = 2, mais autopep8 déteste ça.
Abhishek Kasireddy
2

Fichier de menu → PréférencesParamètres

Ajouter aux paramètres utilisateur:

"editor.tabSize": 2,
"editor.detectIndentation": false

puis cliquez avec le bouton droit sur votre document si vous en avez déjà un ouvert et cliquez sur Formater le document pour que votre document existant suive ces nouveaux paramètres.

Gmoney Mozart
la source
2

La solution de @ alex-dima de 2015 changera la taille des onglets et les espaces pour tous les fichiers et la solution de @ Tricky de 2016 ne semble modifier que les paramètres du fichier actuel.

En 2017, j'ai trouvé une autre solution qui fonctionne sur une base par langue. Visual Studio Code n'utilisait pas les tailles d'onglet ou les paramètres d'espace appropriés pour Elixir , j'ai donc découvert que je pouvais modifier les paramètres de tous les fichiers Elixir.

J'ai cliqué sur la langue dans la barre d'état ("Elixir" dans mon cas), choisi "Configurer les paramètres basés sur la langue" Elixir "...", et modifié les paramètres de langue spécifiques à Elixir. Je viens de copier les paramètres "editor.tabSize" et "editor.insertSpaces" à partir des paramètres par défaut à gauche (je suis tellement content que ceux-ci soient affichés), puis je les ai modifiés à droite.

Cela fonctionnait très bien, et maintenant tous les fichiers de langue Elixir utilisent la taille d'onglet et les paramètres d'espace appropriés.

Kevin Peter
la source
1

J'ai dû faire beaucoup de modifications de paramètres comme les réponses précédentes, donc je ne sais pas ce qui a fonctionné après beaucoup de modifications.

Rien n'a fonctionné jusqu'à ce que je fermais et openen mon IDE, mais les trois dernières choses que j'ai été le désactiver lonefy.vscode-js-css-html-formatter, "html.format.enable": true,et redémarrez Visual Studio.

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Default Light+",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.tabSize": 2,
        "editor.detectIndentation": false,
        "editor.insertSpaces": true
    },
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceAfterConstructor": true,
    "files.autoSave": "afterDelay",
    "html.format.indentHandlebars": true,
    "html.format.indentInnerHtml": true,
    "html.format.enable": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
}
user742102
la source
0

S'il s'agit d'Angular 2 et que la CLI génère des fichiers que vous souhaitez mettre en forme différemment, vous pouvez modifier ces fichiers pour modifier ce qui est généré:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

Non massivement recommandé car une mise à jour npm supprimera votre travail, mais cela m'a fait gagner beaucoup de temps.

Ben Taliadoros
la source
0

J'ai essayé de changer l'éditeur .tabSizeen 4, mais .editorConfigremplace tous les paramètres que j'avais spécifiés, il n'est donc pas nécessaire de modifier la configuration des paramètres utilisateur. Il vous suffit de modifier le fichier .editorConfig:

set indent_size = 4
Gh111
la source
-1

L'utilisateur 3550138 est correct. lonefy.vscode-js-css-html-formatterremplace tous les paramètres mentionnés dans les autres réponses. Cependant, vous n'avez pas besoin de le désactiver ou de le désinstaller car il peut être configuré.

Des instructions complètes peuvent être trouvées en ouvrant la barre latérale des extensions et en cliquant sur cette extension et elle affichera les instructions de configuration dans l'espace de travail de l'éditeur. Au moins, c'est le cas pour moi dans Visual Studio Code version 1.14.1.

DRL
la source