Comment personnaliser le facteur de conversion tabulation-espace lors de l'utilisation de Visual Studio Code?
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 de TAB, mais en TypeScript, cela produit 4.
Par défaut, Visual Studio Code essaiera de deviner vos options d'indentation en fonction du fichier que vous ouvrez.
Vous pouvez désactiver le test 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 pourrait également s'appliquer aux versions antérieures.
Regardez en bas à droite de l'écran. Vous devriez voir quelque chose qui dit Spaces ou Tab-Size.
Mine montre des espaces, -> 
- Cliquez sur la
Spaces(ouTab-Size) - Choisissez
Indent Using SpacesouIndent using Tabs - Sélectionnez le nombre d'espaces ou d'onglets que vous aimez.
Cela ne fonctionne que par document et non par projet. Si vous souhaitez l'appliquer à l'ensemble du projet, vous devez également ajouter "editor.detectIndentation": false à vos paramètres utilisateur.
Eh bien, la nouvelle version de Visual Studio Code vous permet de spécifier différemment le type de fichier pour tabSize. Voici l'exemple de mon settings.json avec 4 espaces par défaut et JavaScript/JSON 2:
{
// I want my default to be 4, but JS/JSON to be 2
"editor.tabSize": 4,
"[javascript]": {
"editor.tabSize": 2
},
"[json]": {
"editor.tabSize": 2
}
}
PS: Eh bien, si vous ne savez pas comment ouvrir ce fichier, vous pouvez: cliquer sur le pignon inférieur gauche -> puis sur les paramètres
Par défaut, Visual Studio Code détecte automatiquement l'indentation du fichier actuellement ouvert. Si vous souhaitez désactiver cette fonctionnalité et faire tout en retrait, par exemple deux espaces, procédez comme suit dans les paramètres utilisateur ou les paramètres de votre espace de travail.
{
"editor.tabSize": 2,
"editor.detectIndentation": false
}
Nous pouvons contrôler la taille de l'onglet par type de fichier avec EditorConfig et ses extension de code Visual Studio . Nous pouvons alors faire Alt + Shift + F spécifique à chaque type de fichier.
Installation
ext install EditorConfig
Exemple de configuration
.editorconfig
[*]
indent_style = space
[*.{cs,js}]
indent_size = 4
[*.json]
indent_size = 2
settings.json
EditorConfig remplace tout ce que settings.json configure pour l'éditeur. Il n'est pas nécessaire de changer editor.detectIndentation.
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 seraient pas convertis.
Vous voulez vous assurer que votre éditeur de configuration n'entre pas en conflit avec la configuration de vos paramètres d'utilisateur ou de votre espace de travail, car je venais d'être un peu gêné de penser que les paramètres des fichiers de paramètres n'étaient pas appliqués lorsqu'il s'agissait de la configuration de l'éditeur qui annulait ces modifications.
Dans votre coin inférieur droit, vous avez les espaces: Les espaces: 2
Vous pouvez y modifier l’indentation en fonction de vos besoins: Options d’indentation
Si la réponse acceptée sur ce message ne fonctionne pas, essayez ceci:
J'avais EditorConfig for Visual Studio Code installé dans mon éditeur, et il continuait de surcharger mes paramètres utilisateur qui étaient définis pour mettre en retrait des fichiers à l'aide d'espaces. Chaque fois que je changeais d'onglet d'éditeur, mon fichier était automatiquement mis en retrait 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 onglets d'éditeur de commutation, et je peux travailler plus confortablement plutôt que de devoir convertir manuellement des onglets en espaces à chaque fois que je change de fichier, ce qui est pénible.
Menu Fichier → Préférences → Paramètres
Ajouter aux paramètres de l'utilisateur:
"editor.tabSize": 2,
"editor.detectIndentation": false
cliquez ensuite avec le bouton droit de la souris sur votre document si vous en avez déjà un et cliquez sur Format du document pour que votre document existant respecte ces nouveaux paramètres.
Dans VSC version 1.31.1 ou plus (je pense) . Comme sed Alex Dima . Vous pouvez le personnaliser facilement via ces paramètres pour
- Windows dans le menu Fichier → Préférences → Paramètres utilisateur ou utilisez les touches courtes
ctr + shift + p - Mac dans le menu Code → Préférences → Paramètres ou,
Lorsque vous utilisez TypeScript, la largeur de tabulation par défaut est toujours deux, indépendamment de ce qu'elle dit dans la barre d'outils. Vous devez définir "prettier.tabWidth" dans vos paramètres utilisateur pour le modifier.
Ctrl + P, Type → paramètres utilisateur, ajoutez:
"prettier.tabWidth": 4
La solution de @ alex-dima à partir de 2015 modifiera la taille des tabulations et les espaces pour tous les fichiers. La solution de @ Tricky à partir de 2016 semble ne modifier que les paramètres du fichier actuel.
À partir de 2017, j'ai trouvé une autre solution qui fonctionne par langue. Le code Visual Studio n'utilisait pas les tailles d'onglets ni les paramètres d'espace appropriés pour Elixir. J'ai donc constaté 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 de 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 ravi qu'ils soient affichés), puis à les modifier à droite.
Cela a très bien fonctionné et désormais, tous les fichiers de langue Elixir utilisent les paramètres de taille et d'espace appropriés.
Si vous utilisez l'extension plus jolie dans vscode, essayez d'ajouter ceci 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
J'ai essayé de modifier editor.tabSize en 4, mais .editorConfig remplace les paramètres que j'avais spécifiés. Il n'est donc pas nécessaire de modifier la configuration dans les paramètres utilisateur. Il vous suffit d’éditer le fichier .editorConfig:
set indent_size = 4
Vous pouvez simplement cliquer sur votre clavier cmd, ou ctrl, il ouvre la page des paramètres puis faites défiler, vous devriez voir la taille de l'onglet.
S'il s'agit de Angular 2 et que la CLI génère des fichiers que vous souhaitez formater différemment, vous pouvez éditer ces fichiers pour modifier ce qui est généré:
npm_modules/@angular/cli/blueprints/component/files/__path__/*
Ce n'est pas recommandé massivement, car une mise à jour de npm supprimera votre travail, mais cela m'a fait gagner beaucoup de temps.
User3550138 est correct. lonefy.vscode-js-css-html-formatter remplace tous les paramètres mentionnés dans d'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. Les instructions de configuration s'afficheront dans l'espace de travail de l'éditeur. Au moins c'est le cas pour moi dans Visual Studio Code version 1.14.1.