如何在Visual Studio Code中更改格式选项？

Question

我知道在 Visual Studio Code 中可以使用 Ctrl+F / Cmd+F 来格式化代码，但是如何为每种语言更改格式选项呢？

例如，在 Visual Studio 2013 中，我可以选择 CSS 的紧凑模式。

是否有另一个隐藏的 JSON 文件可以完成这个任务？

- Matt McCabe

---

可能不行。如果您已经阅读了在线文档，您可能会注意到Microsoft仅提到了TypeScript的格式化函数。 - yushulx

它适用于C#和JavaScript，我找不到官方列表，但它不仅限于TypeScript。 - Matt McCabe

它已经是2017年了，但它仍然没有得到支持吗？ - Asqan

我感到困惑。所有的答案，包括被选中的那个，似乎都是关于选择默认格式化程序的。然而，根据我的理解，问题是在询问如何调整每种语言可用的特定格式化程序选项。 - Chuck Batson

@ChuckBatson 我也有同样的问题 - 答案只解决了一个微不足道的“我太瞎了”的问题，而原始问题则暗示了更深入的洞察力。 - undefined

Answer 1

2022更新

方案A：

按Ctrl+Shift+P

然后输入格式化文档为...

在列表底部点击配置默认格式化程序...

现在您可以从列表中选择您喜欢的美化器。

方案B：

进入文件 -> 首选项 -> 设置，搜索格式， 在左侧，单击文本编辑器，右侧的第一项是编辑器：默认格式化程序，从下拉菜单中选择之前安装的任何文档格式化程序。

- Sajad Saderi

---

"Format Document With..."不再存在。 - Aero Wang

Vetur也不存在！ - Martijn Hiemstra

"Format Document With..."回归于1.56.2版本中 :) - Gremi64

@Gremi64：是吗？我在VSCode 1.59.1中没有这个选项。 - fritzmg

v1.74.3版本中不支持使用“格式化文档”功能。 - mikep

Answer 2

如果我们现在谈论的是 Visual Studio Code，你可以在你的settings.json中设置一个默认格式化程序：

  // Defines a default formatter which takes precedence over all other formatter settings. 
  // Must be the identifier of an extension contributing a formatter.
  "editor.defaultFormatter": null,

指向任何已安装扩展程序的标识符，即：

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

你也可以这样做，按特定格式：

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[sass]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
},

还可以在你的键盘快捷方式(keybindings.json)中为不同的格式化程序分配其他键。默认情况下，它读取：

---

也可以在这里查看。

{
  "key": "shift+alt+f",
  "command": "editor.action.formatDocument",
  "when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
}

---

最后，如果您决定使用Prettier 插件和 prettier.rc，并且您想为 HTML、SCSS、JSON 等设置不同的缩进等格式...

{
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none",
    "useTabs": false,

    "overrides": [
        {
            "files": "*.component.html",
            "options": {
                "parser": "angular",
                "tabWidth": 4
            }
        },
        {
            "files": "*.scss",
            "options": {
                "parser": "scss",
                "tabWidth": 2
            }
        },
        {
            "files": ["*.json", ".prettierrc"],
            "options": {
                "parser": "json",
                "tabWidth": 4
            }
        }
    ]
}

- Frank N

---

format-specific should overwrite default, but it does not. I have prettier as default, and autopep8 for python, but only when I comment the default, autopep8 is used. If not: extension prettier cannot format <repo><file> - Timo

非常感谢您的帖子！我已经设置了 "editor.defaultFormatter": "dbaeumer.vscode-eslint"，但我把我的 TypeScript 默认格式化程序改回默认格式化程序后，将其改回来就解决了问题："[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }。这让我疯狂了，谢谢！ - nkhil

editor.defaultFormatter 的文档在哪里？我找不到它。而且，似乎设置值只允许您指定扩展名，而不能提供命令行工具？ - bmitc

Answer 3

我刚在市场中发现了一个名为beautify的扩展程序，它是另一个配置文件。 :)

引用：

在Visual Studio Code中美化javascript、JSON、CSS、Sass和HTML。

VS Code内部使用js-beautify，但它缺乏修改所需使用的样式的功能。此扩展程序使js-beautify在VS Code中运行，并尊重打开文件路径树中的任何.jsbeautifyrc文件以加载您的代码样式。使用F1 Beautify（美化选择）或F1 Beautify file（美化文件）来运行。

有关.jsbeautifyrc中设置的帮助，请参见Settings.md。

这是GitHub存储库：https://github.com/HookyQR/VSCodeBeautify

- Leniel Maccaferri

---

谢谢，看起来很不错，我在我的CSS中缺少它，但JavaScript/TypeScript和HTML似乎可以直接使用。看起来你可以把其中一些放到你的.editorconfig文件中。 - Matt McCabe

这是最好的解决方案之一，因为它使用.jsbeautifyrc配置文件，这对于可能使用其他IDE编写代码的其他团队成员非常有帮助。对于Sublime Text，HTML-CSS-JS-Prettify插件是最好的选择。不幸的是，对于Eclipse，市场上的实现存在缺陷。我仍然需要使用editorconfig，它可以做出不错的效果。 - Shiyaz

Beautify很好，但总是给我带来问题。我发现prettier更好，更可配置。 - Trevor Jex

Answer 4

编辑：

现在已经支持了（截至2019年）。请参见下面sajad saderi的回答获取指示。

不，这在2015年目前还不支持。

- Isidor Nikolic

---

很遗憾，我会点赞并静待结果。我猜想这可能是另一个 JSON 配置文件，因为这似乎是他们目前的发展方向。 - Matt McCabe

不再正确了？那怎么办？至少提供一个网址。 - Damn Vegetables

抱歉表述不够清晰。VisualStudio的uservoice链接已经失效了。可能应该在Github上开一个issue，我找到了https://github.com/Microsoft/vscode/issues/1533。你也可以在设置中搜索“format”，然后你会找到javascript.format选项。 - SgtPooki

Answer 5

您可以从“设置”中进行一些更改。例如，JavaScript规则以“javascript.format”开头。但是对于高级格式控制，仍需要使用一些扩展程序。

格式化代码命令的规则设置

- Hayk

Answer 6

我刚才也遇到了同样的问题。我在设置中将Prettier作为默认格式化程序，然后它就重新开始工作了。我的默认格式化程序是null。

如何设置VSCODE默认格式化程序：

对于Windows：文件 -> 首选项 -> 设置

对于Mac：Code -> 首选项 -> 设置

搜索“Default Formatter”。在下拉菜单中，Prettier 将显示为 esbenp.prettier-vscode。

- Hitesh Subnani

Answer 7

我在2017年7月找到了一个适合我的解决方案，就是使用ESLint。众所周知，你可以以全局或本地的方式使用这个linter。我使用它作为本地的，并且与谷歌的样式指南一起使用。我设置的方式如下...

• cd到你的工作目录
• npm init
• npm install --save-dev eslint
• node_modules/.bin/eslint --init
• 我使用谷歌的样式和json配置文件

现在，您将在工作目录的根目录下拥有一个名为.eslintrc.json的文件。您可以打开该文件并根据需要使用eslint规则进行修改。接下来，按cmd+,以打开vscode系统首选项。在搜索栏中键入eslint，查找"eslint.autoFixOnSave": false。复制该设置并粘贴到用户设置文件中，然后将false更改为true。希望这可以帮助使用vscode的某些人。

- redeemefy

Answer 8

要更改C#（OmniSharp）的格式设置，您可以使用json文件：

用户: ~/.omnisharp/omnisharp.json 或 %USERPROFILE%\.omnisharp\omnisharp.json
工作区: 工作目录中指向的OmniSharp的omnisharp.json 文件。

示例:

{
  "FormattingOptions": {
    "NewLinesForBracesInMethods": false,
    "NewLinesForBracesInProperties": false,
    "NewLinesForBracesInAccessors": false,
    "NewLinesForBracesInAnonymousMethods": false,
    "NewLinesForBracesInControlBlocks": false,
    "NewLinesForBracesInObjectCollectionArrayInitializers": false,
    "NewLinesForBracesInLambdaExpressionBody": false
  }
}

这篇文章详细介绍了此主题 | omnisharp.json模式文件（它已经在VS Code中，您只需使用CTRL+SPACE即可）

其他语言扩展可能也有类似的设置文件。

- geekley

Answer 9

在文档化的默认设置中搜索"LANGUAGE.format."（例如"javascript.format."或"typescript.format."）以查看您可以如何配置内置格式化程序以及如何配置。

原则上，VS Code是一个用于托管不同任务的扩展的框架，主要用于编辑文件。它默认提供了最常见的编程语言的扩展，其中内置的格式化功能因语言而异（请参阅文档），并且基本上是概念验证，明确建议您为您的用例添加更适当和充分文档化的格式化扩展。

- hh skladby