VS-Code中写多行代码片段的最佳方法是什么？

Question

在 Sublime Text 中，可以使用代码片段文件中的空格来定义多行代码片段。

但据我所知，VS-Code 需要一个JSON条目。这些需要：

1. 将长字符串硬换行为双引号字符串列表，或者
2. 使用换行符 \n 软断行长字符串

与其他集成开发环境提供的所见即所得方法相比，这很不方便。

有更好的定义长代码块的方法吗？

- kakyo

Answer 1

您可以将代码片段的主体定义为字符串数组，每个字符串都从新行开始。

像这样：

  "Create for loop":{
    "prefix": "mkfor",
    "body":[
      "for(int i = 0; i < 3; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

或者如果您安装了 Easy Snippet Maker 扩展，您可以通过突出显示文本来创建自己的片段。

- Armin

---

谢谢。你给出的代码片段是我问题中确切的问题：我不想有多个带逗号的双引号字符串。我会尝试使用那个扩展。 - kakyo

你有没有找到一个更好的解决办法来创建多行而不使用每行都带逗号的字符串？ - Paulliano

Answer 2

你可以观看这个视频，了解一个快速简短的教程。 https://youtu.be/g1ouTcFxQSU 前往文件-->首选项-->用户代码片段。选择你喜欢的编程语言。 现在输入以下代码以创建一个for循环代码片段：

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

完成啦。
在编辑器中输入“for”，并使用第一个预测结果。

快捷方式--

1. 安装 Snippet-creator 扩展程序。
   
2. 选中需要创建代码片段的代码。
   
3. 按下 ctrl+shift+P，在命令面板中输入“Create snippet”，然后按 ENTER 键。
   
4. 选择要为其创建代码片段的语言（例如：CPP），然后输入代码片段名称、代码片段快捷键和代码片段描述。
   至此就可以了。
   在编辑器中输入您在步骤 4 中输入的代码片段快捷键，然后选择第一个预测结果（如果没有预测结果，请按 ctrl+space）。
   

希望这能帮到您 :)

注意：转到“文件”->“首选项”->“用户片段”。然后选择您创建代码片段的语言。您将在那里找到代码片段。

- vinod

---

附加说明：作为Mac用户，您可以从Code->Preferences-> User Snippets访问您的代码片段。 - Moff452

@moff [CMD] + [SHIFT] + [P] （适用于Mac用户） 该命令为Mac用户提供的键盘快捷键，可打开文本编辑器或其他应用程序中的命令面板。 - Michael Nelles

附注：代码片段创建器已被标记为弃用。 - Mr Washington

Answer 3

我也找不到一个好的方法来创建多行片段。这可能是我最想看到改进的功能之一。正如另一个答案所建议的那样，有几个扩展可用于帮助创建代码片段（例如此和此）。但是，它们不能正确转义美元符号并且缩进不够好。

在寻找答案时，我偶然发现了Denis Malinochkin的Pen（从这里的问题链接过来）。但是，它也不能正确转义美元符号，因此我forked它并添加了这一行以处理文字美元符号。 在这里可以看到：https://codepen.io/cbejensen/pen/WXLxaE 希望这会有所帮助！

P.S. - 这是我添加的行：

line = line.replace(new RegExp(/\$/, 'g'), '\\$');

- Christian Jensen

---

谢谢！真是疯狂，必须要黑客才能让这个工作。 - kakyo

请注意，原始笔没有转义美元符号的原因是，当您激活代码片段后，VS Code使用$1、$2等来定位光标。 - antoine

好观点，真没想到我会忽略那个！我已经更新了代码，以便考虑到紧跟美元符号后面的数字，尽管当然许多片段可能希望在数字之前有字面上的美元符号。我想没有很好的方法来处理字面上的美元符号，我可能应该把原始代码保留不变。 - Christian Jensen

Answer 4

我创建了一个扩展程序，可以将代码段存储在一个 Markdown 文件中: https://marketplace.visualstudio.com/items?itemName=usernamehw.snippets-in-markdown

- Alex

Answer 5

我使用这个JSON转义格式化程序来处理大量HTML，将其转换为片段： https://www.freeformatter.com/json-escape.html （此过程的结果应该用引号 "..." 添加到JSON对象的 "body" 部分中。）

- JCRC

Answer 6

在Mac机器上按下cmd+shift+p，搜索"配置用户片段"，然后创建一个文件并粘贴以下JSON代码。提供前缀、正文和描述。

参考：https://code.visualstudio.com/docs/editor/userdefinedsnippets

"Original Answer"的翻译是"最初的回答"。

{
    "forLoop": {
        "prefix": "forLoop",
        "body": [
            "for (const ${2:element} of ${1:array}) {",
            "\t$0",
            "}"
        ],
        "description": "For Loop"
    },

    "reactClass": {
        "prefix": "reactClass",
        "body": [
            "import React from 'react';",
            "class ${1:ComponentName} extends React.Component {",
            "\t$0constructor(props) {",
            "\t$0\t$0super(props)",
            "",
            "render() {",
            "return (<div> ${2:Component} </div>)",
            "}",
            "export default ${3:ComponentName}"
        ],
        "description": "For React Component class"
    },
    "function": {
    "scope": "javascript,typescript",
    "prefix": "function",
    "body": [
        "import React from 'react';",
        "import withStyles from '@material-ui/core/styles/withStyles';",
        "import { makeStyles } from '@material-ui/core/styles';",
        "",
        "import Styles from  './style.js';",
        "",
        "const useStyles = makeStyles(Styles);",
        "",
        "function $1(props){",
        "const classes = useStyles();",
        "\treturn (",
        "\t\t<React.Fragment>",
        "\t\t\t<div className={classes.root}>",
        "\t\t\t\t$1",
        "\t\t\t</div>",
        "\t\t</React.Fragment>",
        "\t)",
        "}",
        "export default withStyles(useStyles)($1);"
    ],
    "description": "react class"
  }
}

- Hank

Answer 7

我写了一个脚本，可以让你创建自己的复杂代码片段，只需使用你想要的文件即可，无需在字符串或字符串数组中编写源代码。 https://github.com/banxi1988/vscode-snippets-ext-template

- banxi1988

Answer 8

截至2023年10月31日，使用VSCode 1.83.1版本，我成功创建了一个VSCode等效的JetBrains IntelliJ内置的Java“psvm”快捷方式，通过在目录%AppData%\Code\User\snippets\下的java.json文件中添加以下条目实现：

"public static void main": 
{
    "prefix": "psvm",
    "description": "Creates an empty static main method",
    "body" : [
    "public static void main(String[] args)",
    "{",
    "\t$0",
    "}"
    ]
}

- user3785010