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

Question

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

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

还有另一个隐藏的json文件吗？

Answer 1

如果我们对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
            }
        }
    ]
}

Answer 2

我刚在Market Place 找到了这个名为beautify的扩展名,是的,它是另一个config\settings文件.:)

在Visual Studio代码中美化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

Answer 3

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

设置 VSCODE 默认格式化程序

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

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

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

Answer 4

不,目前不支持此功能.

Answer 5

在VS代码中

按 Ctrl+Shift+P

然后输入

Format Document With...

在列表末尾单击

Configure Default Formatter...

并在下一步中选择您最喜欢的美容师

Answer 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规则打开该文件并进行修改.旁边cmd+,打开vscode系统首选项.在搜索栏中键入eslint并查找"eslint.autoFixOnSave": false.复制设置并粘贴到用户设置文件中并更改false为true.希望这可以帮助使用vscode的人.

Answer 7

您可以从"设置"进行一些更改.例如,javascript规则以"javascript.format"开头.但是对于高级格式控制,仍然需要使用一些扩展.

格式代码命令的规则设置