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

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.

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 Fichier → Préférences → Paramètres utilisateur et pour Mac dans le menu Code → Préférences → Paramè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

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, →

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.

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

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
}

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.

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

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 Fichier → Préférences → Paramètres utilisateur ou utilisez les touches courtes Ctrl+Shift +P
• Mac dans le menu Code → Préférences → Paramètres ou ⌘,

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.

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.

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

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

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.

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

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

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.

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,
}

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.

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

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.