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

Question

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

我知道以下选项,但它们都不够好:

• 手动格式化 Shift + Alt + F
• 格式类型 "editor.formatOnType": true
  • 按Enter键时会格式化该行.不幸的是,当您鼠标单击另一条线或按向上/向下箭头时,它会使其保持未格式化.
• 使用现有扩展
  • 我想这一个,但它似乎不工作也很好.
• 使用美化 "beautify.onSave": true
  • 它不适用于TypeScript
• 编写自定义扩展
  • 如果你想要正确处理自动保存和构建,这很棘手.

Answer 1

截至2016年9月(vscode 1.6),现在正式支持.

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

settings.json

Answer 2

要在保存时自动格式化代码:

• 按Ctrl ,可打开用户首选项
• 在打开的设置文件中输入以下代码

{
    "editor.formatOnSave": true
}

• 保存存档

资源

Answer 3

如果您想使用Javascript源自动格式保存,请将此添加到Users Setting(按Cmd,或Ctrl,):

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

Answer 4

对于您可以使用的任何语言的neet格式Prettier - code formatter。应用此后，您可以格式化代码Alt + Shift + f

Answer 5

无需再添加命令.对于那些不熟悉Visual Studio Code并且在保存时搜索格式化代码的简单方法的人,请按照以下步骤操作.

1. 按[Cmd+,]Mac或使用以下屏幕截图打开"设置" .

2. 在搜索框中输入" 格式 ",然后启用" 保存时格式化 "选项.

你完成了.谢谢.

Answer 6

避免冲突的最好方法是为每种语言定义单独的格式化程序，例如，如果我使用Rust和Typescript，我想分别使用扩展Rust-Analyzer和Prettier来格式化代码，因此在我的.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 扩展。

Answer 7

如果你使用Prettier和这一行

"editor.formatOnSave": true

无法在保存时进行格式化，您可能需要向settings.json添加另一个命令

"editor.defaultFormatter": "esbenp.prettier-vscode",

Answer 8

对于MAC用户，将此行添加到您的默认设置中

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

“tslint.autoFixOnSave”：真

该文件的样本将是：

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

Answer 9

对于eslint：

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

Answer 10

经过几个小时的奋斗...以下步骤有效。
完整详细信息如下。

1. 安装此扩展

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

2. 将以下 json添加到以下文件中：

文件：

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

JSON：

注意：确保下面的块之前和之后都有逗号。

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

现在，当代码更改时，1 秒后，它会自动格式化并保存。