Javascript 如何设置 VSCode 将花括号放在新行上？

How do I set up VSCode to put curly braces on a new line?

提问by M. Fatih

Let's say I type in the following code and format it.

假设我输入以下代码并对其进行格式化。

if (condition) { /* Hello! */ }

If this is C# code, it is formatted like this:

如果这是 C# 代码，则其格式如下：

if (condition)
{
    // Hello!
}

If it is JavaScript, VSCode formats it like this:

如果是 JavaScript，VSCode 的格式如下：

if (condition) {
    // Hello!
}

So how can I use the first formatting style (curly braces on new lines) for all languages? I can't find a setting or something similar. Suggestions?

那么如何为所有语言使用第一种格式样式（新行上的花括号）？我找不到设置或类似的东西。建议？

回答by Advait Baxi

Follow the steps below to make Visual Studio Codeformat opening curly braces on a new line for Java Scriptand Type Script.

按照以下步骤使Visual Studio Code格式在Java Script和Type Script的新行上打开大括号。

In Visual Studio Code (v1.20.0)

在Visual Studio Code (v1.20.0) 中

1. Go to File\Preferences\Settings

2. Add the following lines in 'User Settings' (in the right side pane)

   "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, 
   "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
   
   "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
   "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
   

3. Save 'User Settings' and you are done!

1. 转到文件\首选项\设置

2. 在“用户设置”中添加以下几行（在右侧窗格中）

   "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, 
   "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
   
   "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
   "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
   

3. 保存“用户设置”就大功告成了！

回答by Charley Ramm

Go to File\Preferences\Settings and search for 'curly'.

转到 File\Preferences\Settings 并搜索“curly”。

Enable the settings illustrated below.

启用下图所示的设置。

This allows me to auto-format code with curly braces on the following line for function definitions and control blocks.

这允许我在函数定义和控制块的下一行中使用花括号自动格式化代码。

Tested with Visual Studio Code 1.30.2

使用 Visual Studio Code 1.30.2 测试

回答by SridharKritha

By default VS code don't support customization in formatting. But you could do your format customization using js-beautifyextension. You can find the free version on VS code Marketplace (https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify).

默认情况下，VS 代码不支持格式自定义。但是您可以使用js-beautify扩展进行格式自定义。您可以在 VS 代码市场 ( https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)上找到免费版本。

For your requirement of curly braces on new linecan be setup by creating a '.jsbeautifyrc' config file on your project root folder and define a following line.

对于您在新行上使用花括号的要求，可以通过在项目根文件夹中创建一个“ .jsbeautifyrc”配置文件并定义以下行来设置。

{
     "brace_style": "expand"
}

For more formatting options you can find from the following link: https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md

有关更多格式选项，您可以从以下链接找到：https: //github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md

回答by Shanoor

To answer the question, you can't customize the auto-formatting in VSCode yet but you can vote for the feature request here: https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7756212-format-beautify-source-code

要回答这个问题，您还不能在 VSCode 中自定义自动格式化，但您可以在此处为功能请求投票：https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7756212 -格式美化源代码

回答by toonice

The following instruction apply to VS Pro 2012...

以下说明适用于 VS Pro 2012...

1. On the menu bar choose Tools.
2. Choose Options...
3. Expand the Text Editor list.
4. Expand the JavaScript list.
5. Expand the Formatting list.
6. Choose New Lines.
7. Choose Place open brace on new line for control blocks.

1. 在菜单栏上选择工具。
2. 选择选项...
3. 展开文本编辑器列表。
4. 展开 JavaScript 列表。
5. 展开格式列表。
6. 选择新行。
7. 为控制块选择在新行上放置左括号。

I hope this is helpful. Feel free to reply if you have any questions.

我希望这是有帮助的。如果您有任何问题，请随时回复。