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

Posted

技术标签:

【中文标题】如何更改 Visual Studio Code 中的格式选项？【英文标题】：How do you change the formatting options in Visual Studio Code? 【发布时间】：2015-07-15 20:47:36 【问题描述】：

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

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

是否有另一个隐藏的 JSON 文件可以做到这一点？

【问题讨论】：

可能不会。如果你看过online doc，你可能会注意到微软只提到了TypeScript的格式化功能。 它适用于 C# 和 javascript，我找不到官方列表，但它不仅仅是 TypeScript。 2017年了，还不支持吗？ 【参考方案1】：

在 VS 代码中：

按Ctrl+Shift+P

然后输入Format Document With...

在列表末尾点击Configure Default Formatter...

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

2021 年更新

如果 "Format Document With..." 不再存在，请转到 file -> preferences -> settings -> Extensions -> Vetur 滚动一下，您将看到 format -> defaultFormatter:css，现在您可以为不同的文件类型扩展名选择您之前安装的任何文档格式化程序。

【讨论】：

用...格式化文档不再存在 Vetur 也不存在！ 'Format Document With...' 在进入设置后显示给我，搜索'formatter'，选择树上的'html'选项并选中'Enable/disable default HTML formatter' “使用...格式化文档”又回到了 1.56.2 :) @Gremi64：是吗？我在 VSCode 1.59.1 中没有选项。【参考方案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"
,

还有see here。

您还可以在键盘快捷键 (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
            
        
    ]

【讨论】：

format-specific 应该覆盖default，但它不会。我有prettier 为default，autopep8 为python，但只有当我评论默认值时，才会使用 autopep8。如果没有：extension prettier cannot format <repo><file>【参考方案3】：

我刚刚在 Market Place 中找到了这个名为 beautify 的扩展，是的，它是另一个配置\设置文件。 :)

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

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

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

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

【讨论】：

谢谢，它看起来不错，我在我的 CSS 中缺少它，javascript/typescript 和 html 似乎可以开箱即用。看起来您可以将其中一些放入您的 .editorconfig 最好的解决方案之一，因为它使用.jsbeautifyrc 配置文件，这反过来将有助于其他可能使用其他 IDE 编写代码的团队成员。对于 Sublime Text，the HTML-CSS-JS-Prettify plugin 是最好的。不幸的是，对于 Eclipse，市场上的实现是错误的。我仍然需要使用editorconfig，它做得不错。 美化很好，但总是给我带来问题。我发现更漂亮更好，更可配置。【参考方案4】：

编辑：

这个是现在支持（截至 2019 年）。有关说明，请参阅sajad saderi's answer below。

不，目前不支持 （2015 年）。

【讨论】：

那太可惜了，我会投票赞成并拭目以待。我怀疑这将是另一个 json 设置文件，这似乎是他们要去的方向。 不再正确？那怎么办？至少为此提供一个 URL。 抱歉含糊不清。 visualStudio 用户语音链接已损坏。应该是 github 问题，我找到了github.com/Microsoft/vscode/issues/1533。您也可以在设置中搜索“格式”，您会找到 javascript.format 选项。【参考方案5】：

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

Rules settings for the format code command

【讨论】：

【参考方案6】：

一个适合我的解决方案（2017 年 7 月）是使用 ESLint。众所周知，您可以在全球或本地以多种方式使用 linter。我在本地和谷歌风格指南中使用它。他们的设置方式如下...

cd to your working directory npm init npm install --save-dev eslint node_modules/.bin/eslint --init I use google style and json config file

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

【讨论】：

【参考方案7】：

我刚才也发生了同样的事情。我在设置中将 prettier 设置为默认格式化程序，它又开始工作了。我的默认格式化程序是 null。

设置 VSCODE 默认格式化程序

文件 -> 首选项 -> 设置（适用于 Windows） 代码 -> 首选项 -> 设置（适用于 Mac）

搜索“默认格式化程序”。在下拉列表中，prettier 将显示为 esbenp.prettier-vscode。

【讨论】：

【参考方案8】：

要专门更改 C# (OmniSharp) 格式设置，您可以使用 json 文件：用户： ~/.omnisharp/omnisharp.json 或 %USERPROFILE%\.omnisharp\omnisharp.json工作区： omnisharp.json OmniSharp 指向的工作目录中的文件。

例子：


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

Details on this post | omnisharp.json schema（已经在vscode里了，CTRL+SPACE就可以了）

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

【讨论】：

以上是关于如何更改 Visual Studio Code 中的格式选项？的主要内容，如果未能解决你的问题，请参考以下文章

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

在 Visual Studio Code 中更改文件的编码

Visual Studio Code 状态栏文本颜色

Visual Studio Code 如何解决与 git 的合并冲突？

Visual Studio Code更改语言

在 Visual Studio Code 中动态更改行号设置