Comment formater le code lors de l'enregistrement dans VS Code

185

Je souhaite formater automatiquement le code TypeScript à l'aide du formateur intégré lorsque j'enregistre un fichier dans Visual Studio Code.

Je connais les options suivantes, mais aucune d'entre elles n'est suffisante:

  • Formater manuellement Shift + Alt + F
  • Format sur type "editor.formatOnType": true
    • Il formate la ligne lorsque vous appuyez sur Entrée. Malheureusement, il ne le met pas en forme lorsque vous cliquez avec la souris sur une autre ligne ou appuyez sur la flèche haut / bas.
  • Utiliser l'extension existante
    • J'ai essayé celui- ci , mais il ne semble pas très bien fonctionner.
  • Utilisez embellir "beautify.onSave": true
    • Cela ne fonctionne pas avec TypeScript
  • Écrire une extension personnalisée
    • C'est délicat si vous voulez gérer correctement les sauvegardes automatiques et les builds.
visual-studio-code vscode-settings code-formatting Tomas Nikodym
la source

Réponses:

279

Depuis septembre 2016 (VSCode 1.6), cela est désormais officiellement pris en charge .

Ajoutez ce qui suit à votre settings.jsonfichier:

"editor.formatOnSave": true
Tomas Nikodym
la source
5
existe-t-il un moyen d'exclure certains fichiers? c'est-à-dire que je ne veux formater que les fichiers .js et non les fichiers .html.
gabrielAnzaldo
@ gabodev77prettier dans VS Code a des options pour cela (par exemple, prettier.javascriptEnable, prettier.cssEnable ...) mais pas pour HTML.
Freewalker
7
Peut-il formater sur la sauvegarde automatique? formatOnSave ne fonctionne pour moi que lorsque j'appuie manuellement sur Cmd + S.
Freewalker
@gabrielAnzaldo Voir cette question pour savoir comment exclure certains fichiers / types de fichiers: stackoverflow.com/questions/44831313/…
Gama11
@LukeWilliams Ce n'est actuellement pas possible, il y a une demande de fonctionnalité ici: github.com/microsoft/vscode/issues/45997
Gama11
63

Pour formater automatiquement le code lors de l'enregistrement:

  • Appuyez Ctrl ,pour ouvrir les préférences de l'utilisateur

  • Entrez le code suivant dans le fichier de paramètres ouvert

    {
    "editor.formatOnSave": true
}

  • Enregistrer le fichier

La source

Zameer
la source
33

Si vous souhaitez formater automatiquement lors de l'enregistrement uniquement avec la source Javascript, ajoutez celui-ci dans Users Setting(appuyez sur Cmd,ou Ctrl,):

"[javascript]": { "editor.formatOnSave": true }
Long Nguyen
la source
ma version, j'ai commencé à chercher "formatOnSave" et je devais simplement cliquer sur une case à cocher dans l'interface utilisateur des paramètres de code Vs
Akin Hwan
25

Plus besoin d'ajouter des commandes. Pour ceux qui découvrent Visual Studio Code et recherchent un moyen simple de formater le code lors de l'enregistrement, veuillez suivre les étapes ci-dessous.

  1. Ouvrez les paramètres en appuyant [Cmd+,]sur Mac ou en utilisant la capture d'écran ci-dessous.

Code VS - Image de la commande Ouvrir les paramètres

  1. Tapez « format » dans la zone de recherche et activez l'option « Formater lors de l'enregistrement ».

entrez la description de l'image ici

Vous avez terminé. Je vous remercie.

Balasubramani M
la source
4

Pour les utilisateurs MAC , ajoutez cette ligne dans vos paramètres par défaut

Le chemin du fichier est: / Users / USER_NAME / Library / Application Support / Code / User / settings.json

"tslint.autoFixOnSave": true

Un exemple de fichier serait:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}
Richard
la source