如何更改Visual Studio Code中的格式设置选项?


84

我知道您可以在Visual Studio Code中使用ctrl + cmd + f设置代码格式,但是如何更改每种语言的格式设置选项?

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

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


1
可能不会。如果您已阅读在线文档,则可能会注意到Microsoft仅提及TypeScript的格式功能。
yushulx'5

它适用于C#和JavaScript,我找不到正式的列表,但不仅仅是TypeScript。
马特·麦凯布

1
是2017年,还不支持吗?
阿斯坎

Answers:


18

编辑:

现在支持(如2019年)。请参阅下面的sajad saderi的答案以获取指示。

不,目前不支持此功能 (2015年)


11
真可惜,我将其投票并拭目以待。我怀疑这将是另一个json设置文件,这似乎是他们前进的方向。
马特·麦凯布

9
不再正确了吗?那怎么办 至少为此提供一个URL。
该死的蔬菜

2
抱歉,含糊不清。visualStudio uservoice链接已损坏。应该是github问题,我能够找到github.com/Microsoft/vscode/issues/1533。您也可以在设置中搜索“格式”,然后找到javascript.format选项。
SgtPooki

78

在VS代码

Ctrl+Shift+P

然后输入 Format Document With...

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

现在,您可以从列表中选择自己喜欢的美容师。


19

我刚刚在Market Place中发现了这个名为beautify的扩展,是的,这是另一个config \ settings文件。:)

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

VS Code在内部使用js-beautify,但缺乏修改您希望使用的样式的能力。此扩展允许在VS Code中运行js-beautify,并尊重打开文件路径树中的任何.jsbeautifyrc文件以加载代码样式。使用F1 Beautify(美化选择)或F1 Beautify文件运行。

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

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


谢谢,它看起来还不错,我在CSS中找不到它,javascript / typescript和html似乎可以立即使用。它看起来像你也许可以把它的一些在你的.editorconfig
马特·麦凯布

最好的解决方案之一,因为它使用.jsbeautifyrc配置文件,这反过来将对可能正在使用其他IDE编写代码的其他团队成员有所帮助。对于Sublime Text,最好使用HTML-CSS-JS-Prettify插件。不幸的是,对于Eclipse而言,市场上的实现存在很多问题。我仍然需要使用editorconfig它做得不错。
Shiyaz

美化是很好的,但总是给我带来麻烦。我发现更漂亮,更好,更可配置。
Trevor Jex

8

如果我们对Visual Studio代码现在你设置一个默认格式化你的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
            }
        }
    ]
}


6

对我有效的解决方案(2017年7月)是利用ESLint。众所周知,您可以在全局或本地以多种方式使用lint。我在本地和Google样式指南中使用它。我设置的方式如下...

  • 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规则打开该文件并根据需要进行修改。旁边cmd+,打开vscode系统偏好设置。在搜索栏中键入eslint并查找"eslint.autoFixOnSave": false。复制设置并粘贴到用户设置文件中,然后更改falsetrue。希望这可以帮助使用vscode的人


1

要专门更改C#(OmniSharp)格式设置,可以使用json文件:
User: ~/.omnisharp/omnisharp.json%USERPROFILE%\.omnisharp\omnisharp.json
Workspace: omnisharp.json在工作目录中已指向OmniSharp的文件。

例:

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

此帖子的详细信息| omn​​isharp.json模式(它已经在vscode中,您只需CTRL + SPACE即可)

其他语言扩展名可能具有类似的文件来进行设置。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.