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
source

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
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
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
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.

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

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

Vous avez terminé. Je vous remercie.

— Balasubramani M
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
source