如何在VS Code中保存时格式化代码

426

我想在保存文件时,使用Visual Studio Code的内置格式化程序自动格式化TypeScript代码。

我知道以下选项,但没有一个能够很好地满足我的需求:

  • 手动格式化 Shift + Alt + F
  • 实时格式化 "editor.formatOnType": true
    • 它只在按下回车键时格式化该行。不幸的是,当你单击另一行或按上/下箭头时,它会使该行未格式化。
  • 使用现有扩展
    • 我尝试了这个扩展,但它似乎效果不佳。
  • 使用美化插件 "beautify.onSave": true
    • 它无法与TypeScript配合使用。
  • 编写自定义扩展
    • 如果要正确处理自动保存和构建,则非常棘手。

1
如果您已经安装了prettier扩展程序。在Windows系统下,请按Alt + Shift + f键,或在设置中搜索@id:editor.defaultFormatter,并选择prettier作为默认格式化程序。 - DevAB
13个回答

604

截至2016年9月(VSCode 1.6),这现在已经正式支持

将以下内容添加到您的settings.json文件中:

"editor.formatOnSave": true

10
有没有办法排除一些文件?比如我只想格式化 .js 文件而不是 .html 文件。 - gabrielAnzaldo
19
自动保存时能够格式化吗?只有当我手动点击Cmd+S时,formatOnSave才会起作用。 - Freewalker
2
@gabrielAnzaldo 请参考以下问题,了解如何排除某些文件/文件类型:https://dev59.com/o1cP5IYBdhLWcg3wH24Z#44831631 - Gama11
1
@LukeWilliams 目前还不可能,这里有一个功能请求:https://github.com/microsoft/vscode/issues/45997 - Gama11
1
为了只在C#中起作用: "[csharp]": { "editor.formatOnSave": true }, - Dirk R
显示剩余4条评论

193

无需再添加命令。对于那些初次使用Visual Studio Code并正在寻找一种在保存时轻松格式化代码的方法的用户,请按照以下步骤操作。

  1. 通过按下Mac中的[Cmd+,](或Windows/Linux中的[Ctrl+,])或使用下面的截图打开设置。

VS Code - Open Settings Command Image

  1. 在搜索框中输入'format',并启用选项'Save On Format'。

enter image description here

完成了。谢谢。


100

如果您想要在保存时仅使用JavaScript源代码自动格式化,请将以下内容添加到用户设置中(按CmdShiftPCtrlShiftP,然后键入打开设置(JSON)以打开settings.json文件)

"[javascript]": { "editor.formatOnSave": true }

4
我的版本是,我开始搜索“formatOnSave”,然后只需在Vs Code设置界面中勾选一个复选框。 - Akin Hwan

25

对于 eslint:

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

20

对于任何语言的美化格式,您可以使用 Prettier - code formatter

应用此工具后,您可以使用 Alt + Shift + f 来格式化代码。

输入图片说明

10

避免冲突的最佳方法是为每种语言定义单独的格式化程序。例如,如果我正在使用RustTypescript,我想要分别使用扩展Rust-AnalyzerPrettier来格式化代码,因此在我的.vscode/settings.json中��

{
  "editor.defaultFormatter": null,
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

记住,首先必须安装Prettier和rust-analyzer扩展。

7
如果您使用 Prettier 并且这一行代码 "editor.formatOnSave": true 不能在保存时格式化代码,则可能需要在 settings.json 中添加另一个命令:"editor.defaultFormatter": "esbenp.prettier-vscode"

2
谢谢,"editor.defaultFormatter": "esbenp.prettier-vscode" 帮助了我。 - Anna Vlasenko
2
谢谢你,"editor.defaultFormatter": "esbenp.prettier-vscode",帮了我很大的忙。 - undefined

6

对于 MAC 用户,将以下一行添加到您的默认设置中:

文件路径为:/Users/USER_NAME/Library/Application Support/Code/User/settings.json

"tslint.autoFixOnSave": true

示例文件如下:

{
    "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
}

5

经过数小时的奋斗,以下步骤起作用了。
完整细节如下。

  1. 安装此扩展

https://marketplace.visualstudio.com/items?itemName=pucelle.run-on-save

  1. 添加以下JSON到下面的文件:

文件:

<your-project-directory>\.vscode\settings.json
    OR
%UserProfile%\AppData\Roaming\Code\User\settings.json

JSON:

注意:请确保以下代码块前后有逗号。

    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "runOnSave.statusMessageTimeout": 3000,
    "runOnSave.commands": [
        {
            "match": ".*\\.*",
            "command": "editor.action.formatDocument",
            "runIn": "vscode"
        }
    ],

现在,在代码被更改后的1秒内,它会自动进行格式化并保存。


这实际上运行得非常好。为了使它更好,您可以安装Prettier - Code formatter,这样格式化就会变得更清晰,而不是使用默认的vs code格式化程序。我还将runOnSave.statusMessageTimeout更改为稍微长一些,这样它就不会打断您的编码流程并进行格式化。 - Rdimo
我指的是 autoSaveDelay 而不是 statusMessageTimeout ,可能是笔误。 - Rdimo
玩转vscode,在安装扩展并在设置中添加了两个“runonsave”条目后,自动保存不再起作用。但是自动格式化可以正常工作。等等,它可以正常工作,我将延迟值设为了高值,所以加一,尽管您应该更详细地描述“runonsave”的两个关键描述。 - Timo

4
对我来说,formatOnSave 没有起作用是因为我安装了 prettier,但还没有选择内置格式化程序和 prettier 之间的默认格式化程序。
要触发选择对话框,我必须按下 Alt + Shift + f 键,在我的 JSON 文件上运行此操作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接